今回はレスポンシブの対応についてご紹介します。
webサイトを閲覧するとき、PC、タブレット、スマートフォンによってwebページのレイアウトが異なることにお気づきかと思います。
このレイアウトの違いは、同一のhtmlに対して画面サイズに応じたcssを適用しているためです。
webページを作るうえでは、このレスポンシブ対応が標準となっているので、レスポンシブページの書き方の例を紹介しようと思います。
今回使用するhtmlはこちら!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>タイトル</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <main> <div class="backgroundBox"> <div class="flexBox"> <div class="example1"></div> <div class="example2"></div> </div> </div> </main> </body> </html>
上記のhtmlに対して768pxを境に、cssを切り替えるように記述したいと思います。
まずはスマートフォンの表示の場合のcssを書きます。
※スマホから作成し、スマホの記述をベースにPC用のcssを記述したほうが簡単
<768px以下のレイアウト用css>
.backgroundBox { background-color: whitesmoke; padding-top: 100px; } .flexBox { height: 500px; } .example1 { display: block; width: 200px; height: 200px; background-color: green; margin: 0 auto; } .example2 { display: block; width: 200px; height: 200px; background-color: blue; margin: 0 auto; }
<ポイント>
・ block要素と定義したexample1とexample2を縦で中心に並べる
(スマートフォンはスクリーンの幅が狭いため、要素は縦に並べた方がレイアウトはすっきりする)
現時点でブラウザ確認すると緑と青の四角は縦に並んでいます。
次に、PCで、閲覧するときのcssを先ほどのcssに書き足していきます。
<PC表示用css>
.backgroundBox { background-color: whitesmoke; padding-top: 100px; } @media screen and (min-width: 768px) { .backgroundBox { padding-top: 300px; } } .flexBox { height: 500px; } @media screen and (min-width: 768px) { .flexBox { display: flex; justify-content: center; } } .example1 { display: block; width: 200px; height: 200px; background-color: green; margin: 0 auto; } @media screen and (min-width: 768px) { .example1 { margin: 0; } } .example2 { display: block; width: 200px; height: 200px; background-color: blue; margin: 0 auto; } @media screen and (min-width: 768px) { .example2 { margin: 0; } }
<ポイント>
・ @media screen and (min-width: 768px){PC表示用のコードを書く}
(スマートフォンの時と違ってスクリーンの幅が広いため、要素を横に配置することが可能)
・example1とexample2の親要素である.flexBox要素にflexを適用し、横並びにしている。
メディアクエリでcssを書き足したため、ブラウザの幅を768px以上に広げると、緑と青の四角は横に並ぶはずです。
実際に自分が書いたindex.htmlをブラウザで開き、横幅を小さくしてみましょう。
example1とexample2が縦並び・横並びと変化すれば成功です。
これでPCとmobileに対応したwebサイトを作成できますね!
<補足>
・@media screen and (min-width:768px) {}について
min-widthだけではなくmax-widthもあります。数値も自由に決めることができます。
本日は以上~
ps
javascript勉強中・・・