レスポンシブWebデザインについて
大きさの異なるデバイス毎(PC、タブレット、スマートフォンなど)に、Webページのレイアウトを可変させるデザインをレスポンシブWebデザインと言います。
一つのHTMLファイルに対してCSSでデバイスごとのレイアウトを指示するものとなります。
PC用のレイアウトから指示する場合、まずは通常通りCSSの記述を行います。
PC用のレイアウトが完成した後スマートフォン(またはタブレット)用のレイアウトをメディアクエリ内に記述します。
メディアクエリの記述:
@media screen and (max-width:600px) { body{ background: #f00 } }
@mediaから始まる記述でデバイスの横幅を指定します。
上の例では600px以下(max-width:600px)と指定しています。
デバイスの幅を指定した後の{}内に600px以下の際のスタイルを記述します。
上の例では600px以下の場合bodyの背景色が赤になります。
レスポンシブWebデザインの考え方
一般的にレスポンシブWebデザインでは「PCの際に横に並んでいたレイアウトを、スマートフォンの際に縦に並べる」という考え方を用います。
デモ:「メディカル・ヘルスケアMesimo」のサイト(筆者作成 / ウィンドウ幅を変えるとレイアウトが可変します)
PC時のレイアウト:
スマートフォン時のレイアウト:
PC時の横並びの指示を「display:flex」で指定した場合は、スマートフォン時の縦並びのレイアウトを「display:block」で指定すると良いでしょう。
HTMLの記述:
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>flexによる並列なレイアウト</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="boxa"> <ul> <li><a href="">home</a></li> <li><a href="">about</a></li> <li><a href="">product</a></li> <li><a href="">contact</a></li> </ul> <p>テキストテキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト</p> </div> </body> </html> </html>
CSSの記述:
@charset "UTF-8"; *{ margin:0; padding: 0 } body{ background: #ccc; font-family: "メイリオ",Meiryo,sans-serif; } .boxa{ display: flex; justify-content:space-between; width: 100%; } ul{ display: flex; background: #fff; justify-content: space-between; width: 45%; border-radius: 30px; padding: 20px; box-sizing: border-box; } li{ list-style: none; } a{ color: #000; font-size: 18px; text-decoration: none; } p{ width: 45%; text-align:center; background-color: #333; color: #fff } @media screen and (max-width:600px) { body{ background: #f00 } div{ display: block; } ul{ display: block; width: 100%; } p{ width: 100% } }
またPC時に幅を固定した数値で指定した場合、スマートフォン時にはみ出してしまうことがあります。
それを避ける場合幅を画面いっぱい(width:100%)などに指定するのがスタンダードな手法になります。
viewportの指定
タブレットやスマートフォンなどで正しく表示を行うために必ずviewportの指定を行いましょう。
meta要素の記述になるので、記述箇所はhead要素内に記述します。
<meta name="viewport" content="width=device-width,initial-scale=1">
複数のメディアクエリを記述することで、PC時とタブレット時とスマートフォン時の3段階のレイアウトを作ることも可能です。