レスポンシブデザインを作る時の設定など
目次
レスポンシブデザインのサイトを作成するときの簡単な設定をいくつか書いていきます。
Vieportを設定する
head内に下記のようなメタタグを書きます。これはそのアクセスしたデバイスの横幅にフィットさせるための設定です。
よってこれはほぼ必須の設定ですね。
width=device-width
これはサイトのサイズをデバイスの横幅にフィットさせて表示するという設定です。サイトの操作性を考えてもこれは必須の項目だといえます。
<meta name="viewport" content="width=device-width">↑だけの最低設定でもいいのですが。
サイトのデザインによっては下記の指定もしたほうがいい場合もあります。
initial-scale=1.0
こちらは初期表示時に画面の拡大率を設定します。つまり、初めてのその画面を開いた時のデフォルトの要素の拡大率が100%であることを意味しています。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
minimum-scale=1.0,maximum-scale=1.0,user-scalable=0
これらはピンチ操作（2本の指（親指と人差し指）でつまむように操作すること）による画面の拡大・縮小に関する設定です。デフォルトは「user-scalable=yes」で、ピンチによる拡大縮小が可能。
これを
「user-scalable=no」もしくは「user-scalable=0」とすることで、拡大縮小を禁止にできます。
「maximum-scale」は拡大率の制限
２倍までなら
maxium-scale=2.0
「minimum-scale」で縮小率を制限
縮小が1/2までなら
maxium-scale=0.5
ができます。
スポンサードリンク
メディアクエリを指定する
ブレイクポイントをつくり、画像の幅によって読み込むCSSを変えるためのものです。「CSS」
<br>
@media screen and (min-width:1000px) {
/*ここに書いたCSSが1000pxより大きい場合に適用*/
}
@media only screen and (min-width:600px) and (max-width:1000px) {
/*ここに書いたCSSがビューエリアが600pxから1000pxの場合にが適用*/
}
@media screen and (max-width:600px) {
/*ここに書いたCSSがビューエリアが指定したサイズ（600px）より小さい場合に適用*/
}
このような記述で幅によってCSSを切り替えることができます。
スマホ表示の画像サイズ
共通画像を使う場合
レスポンシブだとデバイスの幅によってcssを切り替えるだけなので、画像も同じものを使いことになります。画像の幅がそのデバイスよりも大きいとはみ出してしまったりします。
これを調整するために下記の指定をします。
「CSS」
img {max-width:100%; width /***/:auto;} /*画像サイズが横幅に合わせて変化*/
別の画像と切り替えて使う場合
PC用の画像とスマホ用の画像という感じで別の画像を用意して、その画像を切り替えて使う場合は、下記のような設定をします。2枚画像を置き、デバイスの幅によってCSSのdisplay:nonを使い片方の画像を非表示にする方法になります。
「html」
<div class="sp_img"><img src="スマホ用の画像URL"></div> <div class="pc_img"><img src="PC用の画像URL"></div>
「css」
@media screen and (min-width:600px) {
.sp_img {display:none;} /*横幅600px以上では表示しない*/
}
@media screen and (max-width:600px) {
.pc_img {display:none;} /*横幅600px以下では表示しない*/
}
他にも色々設定はありますが、わかりやすいものだけさっと書いておきます。
では！
スポンサードリンク
コメントを書き込む