質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

レスポンシブ対応だ適応されない

aaa2121
aaa2121

総合スコア1

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

0クリップ

213閲覧

投稿2022/04/28 06:43

編集2022/04/28 16:43

レスポンシブ対応が適応されません。
やってみたこと↓
コード全体に指定したidタグにレスポンシブ対応を指定したんですが適応されません。

実現したいこと

ブレイクポイントを860px;に設定し
ブラウザのサイズを小さくした際にページが縦並びになるように設定したいです。
順番としては↓イメージ説明

VISION

SERVICE

CAMPANY

banner

突っ込みどころが多いコードかと思いますがご教授お願いします。

HTML

<div id="site-box"> <h1 class="page-title">VISION</h1> <ul class="VISION"> <li>・ 私たちは情熱をもってあらゆるニーズに対応していきます。</li> <li>・ 努力を怠らない事によりやりたいことを追究していきます。</li> <li>・ 最大限のパフォーマンスを発揮し効果を出し続け相乗効果を生み出します。</li> </ul> <h1 class="page-title">SERVICE</h1> <div class="SERVICE"> <div class="SERVICE2"> <img src="./images/system_development.jpg" alt="サービス1"> <p class="text">あらゆる受託開発においてプロフェッショナル集団がお客様の環境変化に対応・ 改善し常に最適化されたシステムにしていきます。</p> </div> <div class="SERVICE2"> <img src="./images/outsourcing.jpg" alt="サービス2"> <p class="text">JavaやPHP、オープン系開発からネイティブアプリ、デザインやWebディレクションなど幅広い領域に対応しております。</p> </div> <div class="SERVICE2"> <img src="./images/recruit.jpg" alt="サービス3"> <p class="text">専門分野に特化したエージェントがお仕事をご紹介します。</p> </div> </div> <h1 class="page-title">CAMPANY</h1> <div class="CAMPANY"> <div class="CAMPANY1"> <p>会社名<span style="margin-right: 1.4em;"></span>株式会社LiNew</p> </div> <div class="CAMPANY2"> <p>代表<span style="margin-right: 2em;"></span>西本弘昌</p> </div> <div class="CAMPANY3"> <p>資本金<span style="margin-right: 1.2em;"></span> 500万円</p> </div> <div class="CAMPANY4">  <p>本社住所<span style="margin-right: 1em;"></span>東京都港区芝2-27-13芝尾島ビル3F</p>   </div>  </div> <div class="banner"> <div class="banner1"> <img src="./images/banner.png"> </div> <div class="banner2"> <img src="./images/banner.png"> </div> <div class="banner3"> <img src="./images/banner.png"> </div> </div> </div> <div class="border2"></div> <div class="logo2"> <img src="./images/logo_icon.png"height="70"width="70"alt="バナー2"> </div> <footer> <p>Copyright © 2020 LiNew inc. All Rights Reserved.<p> </footer> </body> </html>

css

@charset "UTF-8"; /* reset */ body, h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; border-collapse: collapse; } textarea { font-size: 100%; vertical-align:middle;} img { border-style: none; display: block; } hr { display: none; } em{font-style: normal} input{line-height:auto;vertical-align:middle;} strong.more{color:#c30} a{text-decoration: none;} html { } body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* 上の部分は気にせずここから書く */ #site-box{ width: 980px; display: flex; margin: auto; flex-wrap: wrap; } .logo{ display:flex; max-width: 980px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; } .logo2{ margin-top: 20px; margin-bottom: 20px; display: flex; justify-content: center; } .border{ width: 100%; background-color: #279b8f; margin-bottom: 20px; } .border2{ border-bottom: 3px solid #279b8f; margin-top: 10px; width: 100%; } .main-nav{ display: flex; color: #ffffff; font-size: 15px; max-width: 980px; margin: 0 auto; } .main-nav li{ margin-left: auto; margin-right: auto; text-align: center; font-size: 15px; border-right:1px solid white; border-left: 1px solid white; width: 50%; } .page-title{ font-size: 17px; background-color: #279b8f; color: #ffffff; width: 71.5%; height: 40px; padding-left: 20px; padding-top: 7px; font-weight:bold; } .VISION{ margin: 10px; } .VISION li{ line-height: 2; padding-left: 10px; font-size: 13px; } .SERVICE{ width: 700px; display: flex; justify-content: space-between; margin-top: 20px; } .SERVICE2{ margin-bottom: 15px; } p.text { margin-top: 10px; word-break: break-all; font-size: 12px; width: 220px; } .CAMPANY1{ margin-top: 25px; margin-bottom: 18px; font-size: 14px; } .CAMPANY1 p{ text-align: left; display: inline-block; padding-left: 10px; font-size: 14px; } .CAMPANY2 p{ text-align: left; display: inline-block; padding-left: 15px; font-size: 14px; } .CAMPANY3 p{ text-align: left; display: inline-block; padding-left: 8px; margin-top: 17px; font-size: 14px; } .CAMPANY4{ text-align: left; display: inline-block; font-size: 14px; } .banner{ margin-left: 720px; position: absolute; bottom: 580px; top: 112px; } .banner1{ margin-bottom: 20px; } .banner2{ margin-bottom: 20px; } .banner3{ margin-bottom: 20px; } footer{ width: 100%; background-color: #279b8f; height: 50px; padding-top: 15px; } footer p{ text-align: center; font-size: 12px; color: #ffffff; } body{ background-color: #eaeaea } @media screen and (max-width:860px) { #site-box { width: 100%; display: block; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/04/28 06:55

ご提示のコードを試してみましたが、縦並びになりました。 つまり、問題が再現しませんでした。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
aaa2121

2022/04/28 07:00

説明不足で申し訳ございません。上記のような縦並びにしたいと思っております。
mather

2022/04/28 07:01

「レスポンシブ対応を指定した」とのことですが、これは何かを参考にしたのでしょうか?
aaa2121

2022/04/28 07:04

レスポンシブ対応のやり方を調べ下記コードを入力したという意味で「指定した」と記載しました。 @media screen and (max-width:860px) { #site-box { width: 100%; display: block; }
vabo

2022/04/28 07:40

ついでに気になったのですが、上記に書かれているコードですと最後の閉じカッコが一つ足りてませんね。 @media screen and (max-width:860px) { #site-box { width: 100%; display: block; } }/*追加*/
aaa2121

2022/04/28 07:43

全く気付けていませんでした。 隅々まで確認して頂きありがとうございます。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。