スマホ対応

PC用にコーディングしたサイトをスマホ対応する書き方を学びます。

スマホ対応コーディング

メディアクエリの指定

サイトの表示幅によりPCかスマホかを判定してCSSを切り替える方法です。

[ 例）h1のフォントサイズはPCは20px, スマホは18px]

PCファースト式

モバイルファースト式

メディアクエリを使っても、CSSの優先度は変わりません。具体的には、同じ要素に対して異なるスタイルを適用する場合、後から読み込まれたCSSが優先されます。そのため、メディアクエリ指定は必ず後に書きます。

PC:
h1のフォントサイズは20px
スマホ:
h1のフォントサイズは18px
PC:
h1のフォントサイズは20px
スマホ:
h1のフォントサイズは20px(※メディアクエリを先に書いているので上書きされてしまう)

widthの最大値指定

max-widthプロパティで最大値を指定することで、スマホで画面外にはみ出さないようにします。

画面サイズ単位(Viewport単位)

画面サイズ単位は画面サイズに対しての割合で指定できる単位です。
画面幅には【vw】、画面高には【vh】の単位を使います。
画面サイズによって要素のサイズを変えたい場合に使用します。

calc関数による計算

calc関数を使うと、計算が必要な値を指定することができます。

横並びを縦並びにする

PCでは横並び、スマホでは縦並びにする方法です。display: flexとあわせて、flex-directionプロパティを指定します。

表示/非表示

displayプロパティを使ってコンテンツの表示非表示を制御することができます。

改行のPC/スマホ制御

下記のようなsp-onlyクラスを定義しておくことで改行の有無を切り替えできます。

imgタグの画像ソース切替

pictureタグとsourceタグで表示する画像の切替ができます。

CSSと同様に下記の書き方でもOKになったらしい

【使用例】

モバイルシミュレーターの活用

ブラウザのモバイルシミュレーターを使うと、スマホの表示をPCでシミュレートできます。

Chromeの場合
  1. 上部メニューバーから[表示]→[開発/管理]→[デベロッパーツール]
  2. 表示されたデベロッパーツール上部のアイコンをクリック
  3. シミュレータ表示に切り替わります。上部の端末指定箇所で表示する端末サイズの変更もできます。
Safariの場合
  1. 上部メニューバーから[開発]→[レスポンシブデザインモードにする]をクリック
  2. シミュレータ表示に切り替わります。上部の端末指定箇所で表示する端末サイズの変更もできます。

スマホ実機でのプレビュー方法(※学校ではできないかも)

PCとスマホが同じネットワークに繋がっている場合、Live Serverの機能によりスマホでもプレビューさせることができます。

初期設定

  1. VSCode左側のアイコンメニューから【拡張機能】を選択して【Live Server】を開く
  2. 設定アイコンから【拡張機能の設定】をクリック
  3. 【Use local Ip】の項目で[Use local IP as host]にチェックを入れる
  4. 設定画面を閉じる

プレビュー方法

実機プレビューはPCにてLive Serverが立ち上がっており、かつPCとスマホが同じネットワークに繋がっている場合のみ使うことができます。

  1. 通常通りVSCode下の【Go Live】をクリック
  2. 表示されたブラウザのアドレス欄をコピー
  3. コピーしたアドレスをスマホに送り、スマホで開く

練習課題1

以前作成した[Profile]ページを修正して、スマホでも表示できるようにしてください。

HTML+CSS+素材ダウンロード

練習課題2

[PhotoBook]ページを修正して、スマホでも表示できるようにしてください。

HTML+CSS+素材ダウンロード

修正のコツ

  1. widthで幅指定していところすべてにmax-width: 100%;指定を追記
  2. 横並びコンテンツを縦並びにする
  3. スマホ用画像があれば画像のソースを切り替える
（ここまで出来たら下記↓の細かいところを調整）
  • 左右が詰め詰めになっている箇所にpadding-inlineで余白を入れる
  • 見出し等大きすぎるフォントサイズを調整
  • コンテンツ間余白で広すぎるところを調整
  • その他レイアウト調整
修正箇所例を見る
  • widthで幅指定しているところすべてにmax-width: 100%;指定を追記
  • 横が詰め詰めなので左右に20pxの余白を追加
  • 上の余白を無くす
  • ロゴの横幅を120pxにする
  • 横が詰め詰めなので左右に20pxの余白を追加
  • 横が詰め詰めなので左右に20pxの余白を追加
  • 見出しをセンター揃えにする
  • 画像テキストエリアを縦並びにする
  • 画像とテキストの間に余白を入れる
  • 画像テキストエリアの子要素を中央揃えにする
  • テキストをセンター揃えにする
回答例のCSSコード