レスポンシブウェブデザインは、1つのウェブサイトで多様なデバイスに対応できるデザインのことです。ディスプレイモニターやスマートフォンに対応できるように、文書のサイズを相対単位にし画面の大きさによって配置を変えます。
ブラウザサイズによってスタイルシートを変えるにはメディアクエリを使います。
PC版からタブレット・スマホ版を追加する場合の記述方法です。
画面幅が780ピクセルより大きい場合のスタイル
@media (max-width: 780px) {
画面幅が780ピクセル以下の場合のスタイル
}
@media (max-width: 480px) {
画面幅が480ピクセル以下の場合のスタイル。
}
これはスマホ版からタブレット・PC版へと拡張する場合の記述方法です。
画面幅が480ピクセルより小さい場合のスタイル。
@media (min-width: 480px) {
画面幅が480ピクセル以上の場合のスタイル
}
@media (min-width: 780px) {
画面幅が780ピクセル以上の場合のスタイル
}
フレックスボックスとグリッドレイアウトで記述した3カラムのページをスマホ用に配置を変えます。
画面幅が480ピクセル以下になったら、box1の高さを半分にし、横のbox2と4を削除、新たにbox6をbox1の下に追加するレイアウトにします。
フレックスボックスでの記述。
CSS
.s1{height:600px; background: white; border: solid;display: flex;flex-flow: column;}
.box11{background: deeppink; height:20%;}
.box12{background: violet;flex:0 100px;}
.boxf1{display: flex;flex: 1;}
.box13{background: salmon;flex: 1;}
.box14{background: royalblue;}
.box15{background: darkkhaki;}
.box16{background: tomato;display:none;}
@media (max-width: 480px) {
.box11{height:10%;}
.box12{display:none;}
.box14{display:none;}
.box16{display:block;}
}
HTML
<div class = "s1">
<div class = "box11">box1</div>
<div class = "box16">box6</div>
<div class = "boxf1">
<div class = "box12">box2</div>
<div class = "box13">box3</div>
<div class = "box14">box4</div>
</div>
<div class = "box15">box5</div>
</div>
グリッドレイアウトでの記述
CSS
.s2{height:600px; background: white; border: solid; display: grid; grid-template:'box1 box1 box1'20% 'box2 box3 box4'1fr 'box5 box5 box5'auto / 20% 1fr auto;}
.box21{background: deeppink; grid-area:box1;}
.box22{background: violet; grid-area:box2;}
.box23{background: salmon; grid-area:box3;}
.box24{background: royalblue; grid-area:box4;}
.box25{background: darkkhaki; grid-area:box5;}
.box26{background: tomato; grid-area:box6;display:none;}
@media (max-width: 480px) {
.s2{grid-template:'box1'10% 'box6'auto 'box3'1fr 'box5'auto;}
.box22{display:none;}
.box24{display:none;}
.box26{display:block;}
}
HTML
<div class = "s2">
<div class = "box21">box1</div>
<div class = "box22">box2</div>
<div class = "box23">box3</div>
<div class = "box24">box4</div>
<div class = "box25">box5</div>
<div class = "box26">box6</div></div>