〈手順１〉viewportを記述
viewportとは
表示領域の横幅などを変更させて見やすい環境を提示するための記述（仮想表示領域）。
通常、スマートフォン表示領域の横幅は960px。小さくて見づらいので最適な横幅の仮想表示領域を指定する。
htmlのheadタグ内にviewportを記述する
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewportで指定できる値
content属性内にカンマ区切りで指定する
〈手順２〉メディアクエリを設定する
メディアクエリとは
メディアクエリで使える値
CSSに書き入れる場合
後述の「HTMLに書き入れる場合」よりもこちらが主流。
理由：各HTMLファイルにlinkタグを設定するのが手間だから。
スマホ用のデザイン定義
@media screen and (max-width: 480px) {
定義文
}
PC用のデザイン定義
@media screen and (min-width: 481px) {
定義文
}
HTMLに書き入れる場合
PCファースト
<link rel="stylesheet" href="共通cssファイルパス" media="screen">
<link rel="stylesheet" href="スマホ用cssファイルパス" media="screen and (max-width:480px)">
モバイルファースト
<link rel="stylesheet" href="共通cssファイルパス" media="screen">
<!– PC画面サイズで読み込まれるCSS -->
<link rel="stylesheet" href=“PC用cssファイルパス" media="screen and (min-width:481px)">
ブレイクポイントとは
〈手順３〉スマホサイト用の定義文を記述
width指定をautoにする
要素名 { width: auto; }
⇒横スクロールバーが出なくなる
min-widthの指定を0にする
要素名 { min-width: 0; }
画像の最大幅を100%にする
img { max-width : 100% !important; height : auto !important; }
float を解除
要素名 { float: none; }
display: inline-block; を解除
要素名 { display: 元の要素の表示方法; }
左右マージンはなるべく使用しない
要素名 { margin-left: 0; margin-right: 0; }
スマホを横にした時に文字サイズが変わる対応
body { -webkit-text-size-adjust: 100%; }
半角英数字のみURLを強制改行
a や .url { word-break: break-all; }
テーブルとpreタグに横スクロールバーを表示
テーブルを囲ったdivのグループ名 { overflow: auto; }
pre { overflow: auto; }
段組みを作成するときはflexを積極採用
親要素名 { display: flex; }
子要素名 { width: 50%; }
どうしてもはみだしてしまうものには
要素名 { overflow: hidden; }
PC表示時のみ、スマホ表示時のみ のコンテンツ
HTML
<要素名 class="pc">PC用コンテンツ</要素名>
<要素名 class="sp">スマホ用コンテンツ</要素名>
CSS
@media screen and (max-width: 480px) {
.pc { display: none; }
}
@media screen and (min-width: 481px) {
.sp { display: none; }
}
