質問
- レスポンシブ対応にうまくできない
-
本文:
このサイトを作りました。
datsumousyou.starfree.jpdatsumousyou.starfree.jp
ですがうまくレスポシブ対応できません。
想像ですがヘッダーの画像が大きすぎるせいで、bodyの文章が横にスクロールしないと読めなくなっていると思うのですが
どうすれば横スクロールしなくなったてもこのサイトが見れるようになりますか?
あとTOPもスクロールしないと見れませんが、これも横スクロールしないで見れるようにしたいです。これこそ画像サイズが大きすぎるせいだと思うのですが、画面サイズに合わせて縮小したいです。
詳しい人からすればズレたこと言ってるかもしれませんが、回答よろしくお願いします。 - 緊急度:通常投稿者:ふみや3さん投稿時間:2019/07/17 19:27
回答 No.9354
-
本文:
.content {
width: 960px;
margin: 0 auto;
}
のように、固定幅で指定したら、レスポンシブにはなりません。
#ここだけでなく、他にも多数あり。
レスポンシブにしたいなら、基本的に、幅は、% で指定です。
あとは、画面の幅に合わせてレイアウトを換える必要があれば、それなりに .css をコーディングですが、その辺は、一度、『レスポンシブなサイトの作り方』みたいな本を一読した方がいいです。
- 投稿者:ジョバンニさん 投稿時間:2019/07/17 20:23
回答 No.9388
-
本文:
平素はネットオウルをご利用いただき誠にありがとうございます。
ネットオウル運営チームです。
本ご質問は一定期間新たな回答がなかったため
運営チームで締め切らせていただきました。
■質問の締め切りについて
Q&A掲示板はユーザー様同士の交流掲示板です。
回答がもらえた場合、回答者へお礼コメントをしましょう。
問題が解決した際にはベストアンサーを選び、
質問を締め切ってください。
■再度のご質問について
ご質問が未解決の場合、「ワンポイント!」を参考に、
再度質問してみてください。
【ワンポイント!】
メールやFTPの設定がうまくいかない場合、
ネットオウルIDやサーバーIDなどのお客様情報を公開しない範囲で、
現在の設定内容を出来るだけ詳しく書いてみましょう。
設定内容のミスを指摘してもらえるかもしれません。
エラーが出てうまくいかない場合、
エラーメッセージの内容を書いてみましょう。
エラーメッセージにはエラー原因が詳しく書かれていることが多く、
問題の解決につながる回答が得られるかもしれません。
■ベストアンサーについて
ご質問の締め切りに際して、運営チームにて
ベストアンサーを選んでおります。
※ベストアンサーの回答者様には通常と同様のポイントが
付与されています。
--ネットオウル運営チーム-- - 投稿者:ネットオウル運営 投稿時間:2019/07/31 10:09
回答 No.9367
この回答がベストアンサーです
とりあえず、.css ファイルの中の、(少なくとも2ヶ所の)
width 960px;
をコメントアウトすれば、そこそこ見えるようになるはず。
残るので、目立つのは、iframeの動画だけれど、これは
width="560"
の指定をなんとかしないといけない。
画面の幅が、400dot 以下なら、width="320" 、600dot以下なら width="400" そうでなければ、width="560" のような場合わけ的な記述をしないといけないのだけれど、
1. 動画の表示幅というのは、動画の種類によっては、固定にしか選べないことがあるので、上に書いたような幅が指定できるかどうかは不明。
2. こういう場合分けの記述のしかたは、.cssのmedia query という手法を使うのが普通だけれども、そのやり方を書くのには、この解答欄は小さすぎるので、レスポンシブサイトの作り方の本を読むのが一番いい。
htmlのソースを見る限りでは、かなり綺麗な書き方がされているので、それなりに技術力のある人を想定していたのだけれど、直前の回答でどこを修正すればいいのか判らないようだと、「もしかして、どこかのサイトのパクリ?」と疑われても仕方がない。