今回はHTML/CSSでホームページを作成している中でレスポンシブ(スマホやタブレットでの画面サイズ、レイアウト調整されたデザインの事)の設定方法を紹介していきます。
目次
メディアクエリとは
メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる方法になります。
ブラウザのサイズの分岐点をブレイクポイントと言います。
今回はyousoというクラス名でデザインしていると想定したCSSになります。
タブレット向けの設定場合(CSSコード)
1 2 3 4 5 |
@media(max-width:1000px){ .youso{ width:50%; } } |
ブレイクポイントが1000px以下でタブレット用のレイアウトに変更
スマホ向けの設定場合(CSSコード)
1 2 3 4 5 |
@media(max-width:670px){ .youso{ width:100%; } } |
ブレイクポイントが670px以下でタブレット用のレイアウトに変更
box-sizingでレイアウト崩れを防ぐ
要素の幅(width)の合計にpaddingとborderが含まれるようになります。その設定をする事でpaddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができるのでお忘れなく設定してください。(marginは要素に含まれないので)
全ての要素にbox-sizing:border-box;を適用する事が最終ベストですので*(アスタリクスで全ての要素)を用いて設定をします。
1 2 3 |
* { box-sizing:border-box; } |
viewportの設定
レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定してください。viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しませんので注意。
1 2 3 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> |
画面幅widthの設定は100%で設定がベスト
最後にwidthは直接的な数値ではなく全てに対応できる%でデザインするようにしてくださいね。