Q&A
仕様
ヘッダー、メインビジュアル、
それぞれの背景が、ブラウザーの幅に応じて左右に引き伸ばされるようなデザインを行っています。
一方で各レイアウト要素に対しては幅を指定して、左右のmarginをautoにすることで、
サイト全体が中央に配置されるように見せています
レイアウトを構成する主要要素それぞれを個別にdivタグで囲って背景色を指定し、
divタグが常にブラウザー幅全体に表示されるよう設定しています
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6 7<link href="css/common.css" rel="stylesheet" type="text/css"> 8</head> 9<body> 10<div class="wrapper row1"> 11 <header id="main_header"> 12 <img src="images/logo.png" width="300" height="42" alt=""> 13 </header> 14</div> 15<div class="wrapper row2"> 16 <p id="mainvisual"> 17 <img src="images/縮小パソコン.png" width="950" height="400" alt=""> 18 </p> 19</div> 20</body> 21</html> 22
css
1@charset "utf-8"; 2/* CSS Document */ 3/* wrapper関連 4**********************/ 5 6/*ここではブラウザー幅全体に広がるようにwidthを100%にし、 7不要なmarginを取り除くプロパティのみ記述します*/ 8.wrapper { 9 width: 100%; 10 margin: 0; 11} 12.row1 { 13 background-color: aqua; 14} 15.row2 { 16 background: #ECEFF1; 17 margin-bottom: 13px; 18 padding: 13px 0; 19} 20/* メインビジュアル 21**********************/ 22/*レイアウトを構成する主要要素それぞれを個別にdivタグで囲って背景色を指定し、 23divタグが常にブラウザー幅全体に表示されるよう設定しています*/ 24#mainvisual { 25 width: 960px; 26 margin: 0 auto; 27} 28#main_header { 29 width: 960px; 30 margin: 0 auto; 31} 32
ここに言語を入力
コード
実現したいこと
バックグラウンドカラーを残しつつ imgをレスポンシブしたい
発生している問題・エラーメッセージ
バックグラウンドカラーを残しつつ imgをレスポンシブしたいでのですがimgを伸縮させるようにすると左右の バックグラウンドカラーが消えてしまいます
該当のソースコード
css
1@charset "utf-8"; 2/* CSS Document */ 3/* wrapper関連 4**********************/ 5/*レスポンシブ用に変更*/ 6 7.wrapper { 8 margin: 0 auto; 9 max-width: 950px; 10} 11 12.row1 { 13 background-color: aqua; 14} 15.row2 { 16 background: #ECEFF1; 17 margin-bottom: 13px; 18 padding: 13px 0; 19} 20/* メインビジュアル 21**********************/ 22/*レスポンシブ用に変更*/ 23 24#mainvisual img { 25 max-width: 100%; 26 height: auto; 27} 28#main_headeer img { 29 max-width: 100%; 30 height: auto; 31}
試したこと
上のcssを作りましたが左右のカラーが切れてしまいます
補足情報（FW/ツールのバージョンなど）
エディタはdwです チェックはクロームでしています
回答1件
0
ベストアンサー
どういうことをしたいのか、正確に把握できていないかもしれませんが、
こちらでいかがでしょうか?
CSS
1#mainvisual { 2 width: 960px; 3 max-width: 100%; /* 場面幅をはみ出さないようにする */ 4 margin: 0 auto; 5} 6#main_header { 7 width: 960px; 8 max-width: 100%; /* 場面幅をはみ出さないようにする */ 9 margin: 0 auto; 10} 11 12img { 13 max-width: 100%; /* 親要素をはみ出さないようにする */ 14 display: block; 15}
上記だと、画面幅960px以下のときに左右の余白がなくなるので、
左右の余白が欲しい場合は以下をためしてみてください。
CSS
1#mainvisual, 2#main_header { 3 max-width: calc(100% - 15px - 15px); /* 左右の余白が15pxの場合。数字は好きに調整してください。 */ 4}
投稿2020/05/31 07:06
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/31 07:24