|
前提知識
・CSSの基本
■レスポンシブデザインとは
レスポンシブデザインとは、PCやスマートフォン、タブレットなど、表示するデバイスの画面サイズに応じてwebサイトの表示方法を変える方法です。
デバイスごとにhtmlファイルを作る必要が無いのが非常に大きなメリットです。
■基本形
＜HTMLファイルに記載するコマンド＞
htmlファイルのヘッダー部分に以下コマンドを入力します。
<meta name="viewport" content="width=device-width">
＜CSSファイルに記載するコマンド＞
cssファイルに以下コマンドを記入します。{}の中に、デバイスによって使い分けたいcssコマンドを記入します。cssの基本的な使い方はこちら。
■スマホ向けの場合
"max-width :800px"の部分でデバイスを切り替えています。このコマンドは「画面の横幅(解像度)が最大800pxまでのデバイスに対して処理を行う」という意味です。
数値は変える事が可能です。
@media screen and (max-width :800px){ } <!-- {}の中にcssコマンドを入力>
最近はスマホも解像度が高く、PCに近い解像度の場合もあります。一方画面サイズは小さいままなので、
解像度が良くても文字が小さいため、スマホでは見づらい場合もあります。対応として以下の様に画面サイズで表示方法を変えるやり方もあります。
@media screen and (max-width :6in){ } <!-- 6インチ以下のデバイスに対して適用>
■PC向けの場合
"min-width :801px"のコマンドは「画面幅が801px以上のデバイスに対して処理を行う」という意味です。
@media screen and (min-width :801px){ }
■コマンド例
＜スマホだけ非常時表示にする場合＞
@media screen and (max-width :800px){
P{display:none ;}
}
■デバイスの解像度
各デバイスの一般的な解像度を示します。以下数値は横x縦です。cssコマンドで設定するのは横幅の方です。
＜PC＞
「1920×1080」 , 「1366×768」などが多い。
＜スマホ＞
「375×667」、「360×640」のシェアが多く、最近は「750×1334」などもある。
|
トップメニューへ