レスポンシブデザインについて - 個人サイトのためのCSS3講座

パソコン・iPad・スマートフォン・ガラケーなど、利用する媒体の画面サイズに合ったサイト表示ができるようにすることをレスポンシブデザインといいます。そのレスポンシブデザインのやり方についての説明です。

まず、「メディアクエリ」というものを読み込む準備として、viewport(表示領域)の指定をおこないます。次のmeta要素をhtmlの開始タグとheadの開始タグの間に書きます。
<meta name=”viewport” content=”width=device-width”>
▲ページの先頭へ
「メディアクエリ」とは指定した画面のサイズのときにのみ読み込まれるCSSを決めるもので、link要素を用いて、どの画面サイズのときにどのようにサイトを表示させるかを指定します。
たとえば、「min-width: 601px」とすると601pxより大きい場合にPC用のCSSが反映され、「max-width: 600px」とすると画面サイズが600pxより小さい場合にスマホ用のCSSが反映されます。min-widthが最小幅、max-widthが最大幅を表します。
<link rel="stylesheet" href="PC表示の際に読み込むCSSのファイル名" media="screen and (min-width: 601px)">
<link rel="stylesheet" href="スマホ表示の際に読み込むCSSのファイル名" media="screen and (max-width: 600px)">
▲ページの先頭へ
パソコンの画面サイズは端末によって異なるため、PC用のCSSにおいてもレスポンシブ対応をする必要があります。
その方法が「コンテンツ幅」を指定する方法です。「コンテンツ幅」とはパソコンのモニターサイズに対するウェブサイトのコンテンツの「より適切な横幅サイズ」のことです。
たとえば、当サイトのコンテンツ幅は960pxに指定しており、パソコンのモニターサイズがどんなに大きくなってもサイト内のコンテンツの横幅は最大で960pxとなり、これ以上は大きくなりません。
指定方法はbody要素に「max-width: ◯px」を指定することで全コンテンツの幅を最大◯px(以下の例では960px)に、そして「margin: 0 auto」を指定してコンテンツ全体を中央に寄せ、「padding: 0 ◯vw」を指定して左右に最低◯vw(ここでは3vw)の余白を設けます。
body {
max-width: 960px;
margin: 0 auto;
padding: 0 3vw
}
※「margin」と「padding」については「余白の指定」を参照してください。
▲ページの先頭へ
スマホ表示になると、意図しない場所で文書が改行されて読みづらくなることがあります。
その場合は、次のようにスマホ表示のときのみ改行させたい場所にbrタグを記入し、そこにclassを付与してPCサイズでは反映されないようにします。PC表示用のCSSの該当classに「display: none」を記入することで、その部分は反映されなくなります。

HTML

スマホ表示のときのみ<br class="pc_none">改行させます。

CSS

.pc_none {
display: none
}
「display: none」は、改行位置の調整以外にも、PCとスマホで表示する画像を切り替えたり、スマホでは画像を非表示にするといった調整にも使えます。
▲ページの先頭へ

>>CSS3講座メニューへ戻る