
- 現役Webマーケター
(元Webディレクター) - 東証一部上場の不動産系企業で勤務
- 最高収益:月間30万円
今回はレスポンシブデザインに初めて取り組む方に、レスポンシブデザインを作る上で欠かせないCSSの書き方を解説します。
レスポンシブデザインとは閲覧するPCやスマホ、タブレットのウインドウ幅に合わせて表示が最適化されるデザインです。
最近は色んなウインドウ幅のPCやスマホ、タブレットを使用している人が増えたのでレスポンシブデザインは必須の対応となっています。
レスポンシブデザインを作る時は以下の2つを書く必要があります。
viewpointとはWebページの表示領域を指定するmeta要素のname属性です。
viewportを指定することで、ユーザーの閲覧しているデバイスの画面サイズに合わせたサイトのレイアウトを表示できます。
下記をコピペで入れておけば問題ありません。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
</head>
contentの中にいくつか属性を追加しているのでその部分を説明します。
分解すると「width=device-width」「user-scalable」「initial-scale」の3つが属性値として入っています。
「width=device-width」はサイトの表示領域を閲覧しているデバイス画面の幅に合わせる指定ができるmeta要素のcontent属性の属性値。
「user-scalable」はサイト上でズーム操作を許可する(yes)・許可しない(no)の指定ができるmeta要素のcontent属性の属性値。
画面を拡大させない設定
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
画面の拡大を許可する設定
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
「initial-scale」は初期のズーム倍率で最小倍率(minimum-scale)と最大倍率(maximum-scale)の指定ができるmeta要素のcontent属性の属性値。
最小倍率(minimum-scale)は0~10の範囲、初期値は 0.25。最大倍率(maximum-scale)は0~10の範囲、初期値は1.6となっています。
メディアクエリはデバイスのウインドウ幅に合わせて適応するCSSを設定できる要素です。
サイトに訪れたユーザーのデバイスに合わせて、PCの時はPC用のCSS、スマホの時はスマホ用のCSSといったように適応するCSSを最適化することができます。
書き方は「スタイルシートに直接記述する方法」と「link要素としてmetaに記述する方法」があります。
またメディアクエリではブレイクポイントと呼ばれる分岐点を設定することで、デバイスのウインドウ幅に合わせたCSSの記述内容を適応させます。
ブレイクポイントの記述方法は、PCとスマホのどちらを基準にするかで書き方が変わってきます。
従来はPCメインでの書き方が大半でしたが、今はスマホの方が多いため、スマホファーストでCSSを記述することが増えています。
PCファーストかスマホファーストかは特に差が無いので書きやすい方を選びましょう。
PCファーストの場合、普通にPC用のコードを書いていき、その後にメディアクエリでスマホ用のCSSを書いていきます。
メディアクエリではタブレット向けにウインドウ幅が960px未満、スマホ向けに最大ウインドウ幅が480px以下のCSSを順番に書いていきます。
max-widthはウインドウ幅の最大値を指定できるプロパティになります。逆に最小値はmin-widthになります。
/* PC用CSS */
@media screen and (max-width: 959px) {
/* タブレット用CSS 959px以下 */
}
@media screen and (max-width: 480px) {
/* スマホ用CSS 480px以下 */
}
モバイルファースト方式では、まずメディアクエリを使わずにスマホ用のCSSを記述します。
その後、メディアクエリでウインドウ幅が481px以上のスマホ用のCSS、960px以上のタブレット用のCSSの順番で書いていきます。
/* スマホ用CSS */
@media screen and (min-width: 481px) {
/* タブレット用CSS 481px以上 */
}
@media screen and (min-width: 960px) {
/* PC用CSS 960px以上 */
}
PCとスマホでは画像の見せ方が変わることがよくあると思います。
PCでの見せ方だと画像が大きすぎたり、小さすぎたりする時に、スマホの横幅一杯に表示させるのに使えます。
@media screen and (max-width: 480px) {
img {
width: 100% ;
}
}
PCだけ表示させてスマホは非表示にしたい要素がある時は「display : none」を使います。
逆にPCやタブレットの時だけ非表示にすることもできます。
@media screen and (max-width: 480px) {
img {
display:none ;
}
PCで横並びに表示されている画像をスマホでは縦に並べるために横並びを解除するためには「float: none」を使います。
スマホでは横幅一杯に表示することが一般的だと思うのでそのCSSも書いています。
@media screen and (max-width: 480px) {
img {
float: none;
}
img {
width: 100% ;
}
}
レスポンシブデザインではデバイスのウインドウ幅に合わせて表示を最適化するため、画像やブロック要素に対してwidth: 100% のように、パーセントでの指定することが多いです。
これによりPCでもスマホでも見やすい表示になるのですが、パーセント指定ではウインドウ幅が想定よりも大きい場合、画像やブロック要素が大きくなりすぎてレイアウトが崩れることがあります。
そういう時に役立つのが、先程も少し触れた最大値を指定できるmax-widthプロパティになります。
/* スマホ用CSS */
img {
width: 100%;
}
@media screen and (min-width: 960px) {
img {
max-width: 960px;
}
}
positionのプロパティでabsoluteやfixedを指定していたものを解除するにはデフォルト値のposition: staticを指定することで解除することができます。
ちなみにposition:initialを使うことでもpositionのプロパティでabsoluteやfixedを指定していたものを解除することができます。ただしIEでは効かないので注意しましょう。
.example {
position: static;
}
CSSでは全称セレクタやタイプセレクタなどよりも「class」を優先したり、「class」よりも「id」を優先するなどルールがあります。
スタイルシートで「!important」を指定されたスタイルは他の何よりも最優先される例外の設定ができます。
注意は他の何よりも最優先されるため、記述したことを忘れていると他のスタイルで指定したことが反映されないなど勘違いもよくあるので取り扱いは注意しましょう。
p {
color : red !important;
}
img {
width: 100% !important;
height: auto !important;
}