今回は、”レスポンシブデザインの作り方後編”です。
前回、少し触れた”meta viewportのhead内への記述方法”、”cssによる調整方法”についてお話しします。
目次
１.viewportとは何か？
・content属性の設定
3.initial-scale
２.レスポンシブの為のCSS調整方法
viewportとは、PC・スマホ・タブレットといったデバイスごとにコンテンツの表示領域を設定するための、HTML属性値（meta要素のname属性の属性値）のことです。
直訳すると、「表示領域」と言います。
viewportを設定するには、まずHTMLファイルのドキュメントの先頭である<head></head>を見つけます。
その<head></head>内にmeta要素を記述し、name属性の属性値にviewportを記述します。
さらに、content属性の属性値にwidth=device-width, initial-scale=1.0を記述します。
<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
上記記述が、Googleで推奨されている基本的なvierportの設定方法です。
・content属性の設定
viewportのcontent属性の設定は、属性値に「width=device-width」「user-scalable」「initial-scale」が記述できます。
１.width=device-width
meta viewport利用時に追加できる「width=device-width」は、表示領域の幅で、端末画面の幅に合わせる指定ができる、meta要素のcontent属性の属性値です。
２.user-scalable
meta viewport利用時に追加できる「user-scalable」は、ズームの操作で、許可する（yes）・許可しない（no）の指定ができる、meta要素のcontent属性の属性値です。
３.initial-scale
meta viewport利用時に追加できる「initial-scale」は、初期のズーム倍率で、倍率（minimum-scale～maximum-scale の範囲）指定ができる、meta要素のcontent属性の属性値です。
続いては、レスポンシブの為のCSS調整方法
レスポンシブでよく使うプロパティには、次のようなものがあります。
１.width, max-width
画面サイズに合わせて、画像やボックス領域の幅を伸び縮みさせるときに使います。
レスポンシブでは width:100％;のように、パーセンテージでの指定することが多いです。ただ、パーセンテージで大きさを指定すると、PCブラウザのように画面幅が1000pxを超えてくるようなときに、画像が大きくなりすぎてしまいます。そこで、max-widthプロパティで最大の幅を指定します。
/* スマホ用のCSSはメディアクエリの外に記述する */
img { width: 100%; }
@media screen and (min–width: 960px) {
img { max–width: 900px; }
}
２.display
ある要素を「PCだけ表示する」「スマートフォンだけ表示にする」というように、デバイスごとに表示・非表示を切り替えるときに使います。
メディアクエリを使い、特定の画面サイズのときにdisplay: none;に指定すると、非表示になります。
たとえば、ボタンをPCだけで表示する場合は、次のように記述します。
/* スマホ用のCSSはメディアクエリの外に記述する */
.button {
color: #fff;
display: block;
}
@media screen and (max–width: 500px) {
.button { display: none; }
}
３.flex
画面サイズの狭いデバイスでは縦並び、広いデバイスでは横並びにレイアウトすることがありますよね。
フレックスボックスレイアウトでは、flexやflex-wrapなどを使います。
たとえば、スマホだけコンテンツを縦並びにするには次のように記述します。
ul { display: flex; flex–wrap: wrap; }
@media screen and (min–width: 500px) {
ul { display: block;}
}
レスポンシブデザインではこの３つをメインにデザインを整えています。
長くなりましたが、難しい記述でもないのでまずは１つずつ調整していけば、自ずと成長していきますので挫けずやっていきましょう！
本日も、ご拝読ありがとうございました。
