レスポンシブ対応が適応されません。
やってみたこと↓
コード全体に指定したidタグにレスポンシブ対応を指定したんですが適応されません。
実現したいこと
ブレイクポイントを860px;に設定し
ブラウザのサイズを小さくした際にページが縦並びになるように設定したいです。
順番としては↓
VISION
↓
SERVICE
↓
CAMPANY
↓
banner
突っ込みどころが多いコードかと思いますがご教授お願いします。
HTML
1 <div id="site-box"> 2 <h1 class="page-title">VISION</h1> 3 <ul class="VISION"> 4 <li>・ 私たちは情熱をもってあらゆるニーズに対応していきます。</li> 5 <li>・ 努力を怠らない事によりやりたいことを追究していきます。</li> 6 <li>・ 最大限のパフォーマンスを発揮し効果を出し続け相乗効果を生み出します。</li> 7 </ul> 8 9 <h1 class="page-title">SERVICE</h1> 10 <div class="SERVICE"> 11 12 <div class="SERVICE2"> 13 <img src="./images/system_development.jpg" alt="サービス1"> 14 <p class="text">あらゆる受託開発においてプロフェッショナル集団がお客様の環境変化に対応・ 改善し常に最適化されたシステムにしていきます。</p> 15 </div> 16 17 <div class="SERVICE2"> 18 <img src="./images/outsourcing.jpg" alt="サービス2"> 19 <p class="text">JavaやPHP、オープン系開発からネイティブアプリ、デザインやWebディレクションなど幅広い領域に対応しております。</p> 20 </div> 21 22 <div class="SERVICE2"> 23 <img src="./images/recruit.jpg" alt="サービス3"> 24 <p class="text">専門分野に特化したエージェントがお仕事をご紹介します。</p> 25 </div> 26 27 </div> 28 29 <h1 class="page-title">CAMPANY</h1> 30 <div class="CAMPANY"> 31 32 <div class="CAMPANY1"> 33 <p>会社名<span style="margin-right: 1.4em;"></span>株式会社LiNew</p> 34 </div> 35 36 <div class="CAMPANY2"> 37 <p>代表<span style="margin-right: 2em;"></span>西本弘昌</p> 38 </div> 39 40 <div class="CAMPANY3"> 41 <p>資本金<span style="margin-right: 1.2em;"></span> 500万円</p> 42 </div> 43 44 <div class="CAMPANY4"> 45 <p>本社住所<span style="margin-right: 1em;"></span>東京都港区芝2-27-13芝尾島ビル3F</p> 46 </div> 47 48 </div> 49 50 <div class="banner"> 51 52 <div class="banner1"> 53 <img src="./images/banner.png"> 54 </div> 55 56 <div class="banner2"> 57 <img src="./images/banner.png"> 58 </div> 59 60 <div class="banner3"> 61 <img src="./images/banner.png"> 62 </div> 63 64 </div> 65 66 67 </div> 68 69 <div class="border2"></div> 70 71 <div class="logo2"> 72 <img src="./images/logo_icon.png"height="70"width="70"alt="バナー2"> 73 </div> 74 75 <footer> 76 <p>Copyright © 2020 LiNew inc. All Rights Reserved.<p> 77 </footer> 78 79</body> 80</html> 81
css
1@charset "UTF-8"; 2/* reset */ 3body, h1, h2, h3, h4, h5, h6, p, address, 4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 5 margin: 0; 6 padding: 0; 7 border: none; 8 font-style: normal; 9 font-weight: normal; 10 font-size: 100%; 11 text-align: left; 12 list-style-type: none; 13 border-collapse: collapse; 14} 15 16textarea { font-size: 100%; vertical-align:middle;} 17img { border-style: none; display: block; } 18hr { display: none; } 19em{font-style: normal} 20input{line-height:auto;vertical-align:middle;} 21strong.more{color:#c30} 22a{text-decoration: none;} 23 24html { 25 26} 27 28body { 29 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; 30} 31 32* { 33 -webkit-box-sizing: border-box; 34 -moz-box-sizing: border-box; 35 -o-box-sizing: border-box; 36 -ms-box-sizing: border-box; 37 box-sizing: border-box; 38} 39 40/* 上の部分は気にせずここから書く */ 41#site-box{ 42 width: 980px; 43 display: flex; 44 margin: auto; 45 flex-wrap: wrap; 46} 47 48.logo{ 49 display:flex; 50 max-width: 980px; 51 margin-top: 10px; 52 margin-bottom: 10px; 53 margin-left: auto; 54 margin-right: auto; 55} 56 57.logo2{ 58 margin-top: 20px; 59 margin-bottom: 20px; 60 display: flex; 61 justify-content: center; 62} 63 64.border{ 65 width: 100%; 66 background-color: #279b8f; 67 margin-bottom: 20px; 68} 69 70.border2{ 71 border-bottom: 3px solid #279b8f; 72 margin-top: 10px; 73 width: 100%; 74} 75 76.main-nav{ 77 display: flex; 78 color: #ffffff; 79 font-size: 15px; 80 max-width: 980px; 81 margin: 0 auto; 82} 83 84.main-nav li{ 85 margin-left: auto; 86 margin-right: auto; 87 text-align: center; 88 font-size: 15px; 89 border-right:1px solid white; 90 border-left: 1px solid white; 91 width: 50%; 92} 93 94.page-title{ 95 font-size: 17px; 96 background-color: #279b8f; 97 color: #ffffff; 98 width: 71.5%; 99 height: 40px; 100 padding-left: 20px; 101 padding-top: 7px; 102 font-weight:bold; 103} 104 105.VISION{ 106 margin: 10px; 107} 108 109.VISION li{ 110 line-height: 2; 111 padding-left: 10px; 112 font-size: 13px; 113} 114 115.SERVICE{ 116 width: 700px; 117 display: flex; 118 justify-content: space-between; 119 margin-top: 20px; 120} 121 122.SERVICE2{ 123 margin-bottom: 15px; 124} 125 126p.text { 127 margin-top: 10px; 128 word-break: break-all; 129 font-size: 12px; 130 width: 220px; 131} 132 133.CAMPANY1{ 134 margin-top: 25px; 135 margin-bottom: 18px; 136 font-size: 14px; 137} 138 139.CAMPANY1 p{ 140 text-align: left; 141 display: inline-block; 142 padding-left: 10px; 143 font-size: 14px; 144} 145 146.CAMPANY2 p{ 147 text-align: left; 148 display: inline-block; 149 padding-left: 15px; 150 font-size: 14px; 151} 152 153.CAMPANY3 p{ 154 text-align: left; 155 display: inline-block; 156 padding-left: 8px; 157 margin-top: 17px; 158 font-size: 14px; 159} 160 161.CAMPANY4{ 162 text-align: left; 163 display: inline-block; 164 font-size: 14px; 165} 166 167.banner{ 168 margin-left: 720px; 169 position: absolute; 170 bottom: 580px; 171 top: 112px; 172} 173 174.banner1{ 175 margin-bottom: 20px; 176 177} 178 179.banner2{ 180 margin-bottom: 20px; 181} 182 183.banner3{ 184 margin-bottom: 20px; 185} 186footer{ 187 width: 100%; 188 background-color: #279b8f; 189 height: 50px; 190 padding-top: 15px; 191} 192 193footer p{ 194 text-align: center; 195 font-size: 12px; 196 color: #ffffff; 197} 198 199body{ 200 background-color: #eaeaea 201} 202 203@media screen and (max-width:860px) { 204#site-box { 205 width: 100%; 206 display: block; 207}
回答2件
あなたの回答
tips
プレビュー