スマホサイトのポイント
viewport を記述
headタグ内にviewportを記述
<meta name="viewport" content="width=device-width, initial-scale=1.0">
メディアクエリを使ってデザイン
PCファースト：HTML対応
<link rel="stylesheet" href="css/pc.css">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:480px)">
media属性に「screen and (max-width:480px)」を指定する。
- 「screen」：画面を使用するデバイス向けCSSファイル
- 「max-width:480px」：画面幅480px以下に適用するCSSファイル（スマホ用CSS）
モバイルファースト：HTML対応
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width:480px)">
- 「screen」：画面を使用するデバイス向けCSSファイル
- 「min-width:480px」：画面幅480px以上に適用するCSSファイル（PC用CSS）
PCファースト：CSS対応
/* すべての画面幅：PCデザインをメディアクエリなしで記述 */
body {
background-color: green;
}
/* 画面幅480pxまで：スマホデザイン */
@media screen and (max-width: 480px) {
body {
background-color: orange;
}
}
/* 画面幅1280px以上：幅広ディスプレイ対応（必要であれば） */
@media screen and (min-width: 1280px) {
body {
background-color: gray;
}
}
「@media screen and (画面幅の条件) {}」
- 「max-width: 480px」：画面幅480px以下に適用するCSS（スマホ用CSS）
- 「min-width: 1280px」：画面幅1280px以上に適用するCSS（幅広ディスプレイ用CSS）
モバイルファースト：CSS対応
/* すべての画面幅：スマホデザインをメディアクエリなしで記述 */
body {
background-color: orange;
}
/* 画面幅480pxまで：PCデザイン */
@media screen and (min-width: 480px) {
body {
background-color: green;
}
}
/* 画面幅1280px以上：幅広ディスプレイ対応（必要であれば） */
@media screen and (min-width: 1280px) {
body {
background-color: gray;
}
}
「@media screen and (画面幅の条件) {}」
- 「max-width: 480px」：画面幅480px以上に適用するCSS（PC用CSS）
- 「min-width: 1280px」：画面幅1280px以上に適用するCSS（幅広ディスプレイ用CSS）
ブレイクポイント
CSSを切り替える区切りとなる画面幅をブレイクポイントと呼びます。
新しいスマホがリリースされるとブレイクポイントの見直しが行われます。
このブレイクポイントはメディアクエリの「画面幅の条件」に使用します。
スマホデザイン：基本
スマホコーディングの基本は横スクロールバーを表示させないようにすることです。縦スクロールのみで表示されるよう各種CSSを定義していきます。
幅の指定を初期値「auto」に戻す
「width: 960px;」のように幅を数値で指定している要素は「width: auto;」で横スクロールがでない幅に自動計算させる。
セレクタ {
width: auto;
}
最小幅指定を初期値「0」に戻す
主にbody要素に指定している「min-width: 960px;」のような表示領域指定は「min-width: 0;」で最小幅を解除する。
「min-width: auto;」ではないので注意！※iPhoneで最小幅が解除されない
セレクタ {
min-width: 0;
}
画像の最大幅を100%にする
親要素をの幅を超える大きさの画像は自動的に親要素幅まで縮小される。
スマホに限らず基本タグの設定で指定することが多い。
img {
max-width : 100%;
height : auto;
}
float を解除
「float: left;」や「float: right;」を使用して画像の回り込みをしている要素は「float: none;」で回り込みを解除する。
セレクタ {
float: none;
}
スマホデザイン：必要であれば
半角英数字のみURLを強制改行
半角英数字のみで構成されるURLが改行されないことで、横スクロールバーが表示されることがあります。
※英語のルール「単語の途中で改行させない」がURLに適用されてしまうため
a や .url {
word-break: break-all;
}
テーブルの対応
table要素をdivで囲って「overflow: scroll;」でエリア内スクロールにします。
HTML
<div class="scroll">
<table class="test">
：
</table>
</div>
CSS
.scroll {
overflow: scroll;
}
整形済みテキストの対応
整形済みテキスト（pre要素）は、要素幅による自動改行がされないため、横スクロールバーが表示されることがあります。
HTML
<div class="scroll">
<pre>
：
</pre>
</div>
CSS
.scroll {
overflow: scroll;
}
どうしてもはみだしてしまうもの：最終手段
どうしてもはみだしてしまうものは「overflow: hidden;」で強制非表示にします。
セレクタ {
overflow: hidden;
}
「PCのみ表示」と「スマホのみ表示」を使い分ける
displayプロパティを使用して画面幅に応じたパーツの表示・非表示を制御します。
クラス名「pc」をつけた要素はPC画面幅の時のみ表示されスマホ画面幅では非表示になります。
クラス名「sp」をつけた要素はスマホ画面幅の時のみ表示されPC画面幅では非表示になります。
HTML
<p class="pc">PC表示のみ</p>
<p class="sp">スマホ表示のみ</p>
CSS
/**
表示・非表示
*/
.pc {
display: block;
}
.sp {
display: none;
}
@media screen and (max-width: 480px) {
.pc {
display: none;
}
.sp {
display: block;
}
}
※表示時の値が「block」のため、ブロックレベル要素に指定します
「initial」を使用すれば要素本来の表示に戻せますがIE非対応のためNG
