『ネットオウルユーザーコミュニティ』の提供に伴い、『Q&A掲示板』は2025年3月31日正午をもって提供を終了します。[関連ニュース]

メンバーメニュー

ようこそ、ゲストさん

トップ > カテゴリ一覧 > ウェブクロウ > レスポンシブ対応にうまくできない

質問

  • レスポンシブ対応にうまくできない
  • 本文:

    このサイトを作りました。
    datsumousyou.starfree.jpdatsumousyou.starfree.jp
    ですがうまくレスポシブ対応できません。

    想像ですがヘッダーの画像が大きすぎるせいで、bodyの文章が横にスクロールしないと読めなくなっていると思うのですが

    どうすれば横スクロールしなくなったてもこのサイトが見れるようになりますか?

    あとTOPもスクロールしないと見れませんが、これも横スクロールしないで見れるようにしたいです。これこそ画像サイズが大きすぎるせいだと思うのですが、画面サイズに合わせて縮小したいです。

    詳しい人からすればズレたこと言ってるかもしれませんが、回答よろしくお願いします。

  • 緊急度:通常投稿者:ふみや3さん投稿時間:2019/07/17 19:27
質問に対する回答は締め切られました

回答 No.9367

  • この回答がベストアンサーです

  • 本文:

    とりあえず、.css ファイルの中の、(少なくとも2ヶ所の)
    width 960px;
    をコメントアウトすれば、そこそこ見えるようになるはず。

    残るので、目立つのは、iframeの動画だけれど、これは
    width="560"
    の指定をなんとかしないといけない。

    画面の幅が、400dot 以下なら、width="320" 、600dot以下なら width="400" そうでなければ、width="560" のような場合わけ的な記述をしないといけないのだけれど、
    1. 動画の表示幅というのは、動画の種類によっては、固定にしか選べないことがあるので、上に書いたような幅が指定できるかどうかは不明。
    2. こういう場合分けの記述のしかたは、.cssのmedia query という手法を使うのが普通だけれども、そのやり方を書くのには、この解答欄は小さすぎるので、レスポンシブサイトの作り方の本を読むのが一番いい。

    htmlのソースを見る限りでは、かなり綺麗な書き方がされているので、それなりに技術力のある人を想定していたのだけれど、直前の回答でどこを修正すればいいのか判らないようだと、「もしかして、どこかのサイトのパクリ?」と疑われても仕方がない。

  • 投稿者:ジョバンニさん 投稿時間:2019/07/20 10:58

回答 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