もくじ
「Webサイト制作のワークショップ」のメモです。
サンプルデータを使ってスマホ対応（レスポンシブWebデザイン）を行う。スマホの仮想ウインドウサイズの横幅を取得して、CSSで表示を振り分ける。Webで扱える画像形式やファイル名、ディレクトリ構造を理解する。
enjoy!
スマホのスクリーン
スマホ向けに viewport に関する記述をする。スマホでアクセスした際にデバイスの横幅100％でコンテンツが表示されるようになる。
<meta name="viewport" content="width=device-width">iPhone 7の実際のデバイス解像度の幅は 750px だが、ブラウザ上での仮想ウインドウサイズ（device-width）は 375px として認識される。
| デバイス名 | デバイス解像度 (px) | 仮想ウインドウサイズ (px) |
|---|---|---|
| iPhone SE | 640×1136 | 320×568 |
| iPhone 6/7 | 750×1334 | 375×667 |
| Phone 6/7 Plus | 1080×1920（1242×2208） | 414×736 |
| iPad Pro 9.7 | 1536×2048 | 768×1024 |
| iPad Pro 12.9 | 2048×2732 | 1024×1366 |
Phone 6/7 Plus のデバイス解像度は 1080×1920px だが、スクリーンショットを撮ると 1242×2208px となる。これは、内部のデータサイズから0.87倍にダウンスケーリングされてスクリーンに表示されているため。
レスポンシブWebデザインのブレークポイント
現状、768px をブレークポイントとして、768px以上がPC/タブレット、768px以下がスマホというように振り分けができる。MediaQuery の max-width を利用して、デバイスによって適用する CSS を振り分けていく。
#selector {
/* PCで読み込むCSS */
}
@media screen and (max-width: 768px) {
#selector {
/* スマホで読み込むCSS */
}
}この記述方法によって、「スマホで読み込むCSS」はスマホでのみ読み込めるようになる。CSSは上から下へと順番に読み込まれ、同じセレクタに対する記述があった場合は、より下に書かれている内容に上書きされる。これらを利用してPC/スマホそれぞれに対してCSSを書いていく。
「PC｜スマホ」という分け方ではなく、「PC｜タブレット｜スマホ」のようにタブレット用のCSSも記述する場合は以下のようにする。
#selector {
/* PCで読み込むCSS */
}
@media screen and (max-width: 992px) {
#selector {
/* タブレットで読み込むCSS */
}
}
@media screen and (max-width: 768px) {
#selector {
/* スマホで読み込むCSS */
}
}
画像形式
画像によって使い分ける。
- jpg｜フルカラー｜非可逆圧縮なので、圧縮するとノイズが出る
- png-8｜256色（8bit）｜透明可｜可逆圧縮
- png-24｜フルカラー（24bit）｜透明可｜可逆圧縮
- gif｜256色｜透明可｜可逆圧縮｜アニメーション可能
- svg｜フルカラー｜透明可｜ベクターデータ｜IE8/Android 3.0までの標準ブラウザは未対応
ファイル名（画像ファイル/フォルダ名/CSSのセレクタ名も同じく）
ファイル名に使用するのは半角英数とアンダーバー/ハイフンにとどめておく。ファイル名に日本語やスペース、機種依存文字は使わない。
- a – z｜英字小文字
- A – Z｜英字大文字
- 0 – 9｜数字
- _｜アンダーバー
- -｜ハイフン
アンダーバーやハイフン、大文字/小文字で区切る。
- content_main_menu
- content-main-menu
- ContentMainMenu
相対パスと絶対パス
ファイルの位置を指定する方法が2つある。相対パスは、そのファイルからみた位置。絶対パスはトップディレクトリからの位置。
- img/img.png｜相対パス（同じ階層のimg/img.png）
- ../img/img.png｜相対パス（1つ上の階層のimg/img.png）
- /img/img.png｜絶対パス（一番上の階層のimg/img.png）
相対パスの「../」は「1つ上の階層」という意味。「../../」は2つ上の階層。一例として、ページ数の少ないWebサイトでは相対パス、規模が大きく全ページを通して共通パーツが多いサイトの場合は絶対パスを使うなど。
URL とディレクトリ
URLの「/（スラッシュ）」は、フォルダのディレクトリ構造と同じ。基本的な構造として、トップディレクトリ直下には
- index.html
- img｜このページで使う画像
- css｜全体で使う style.css
- js｜jQuery のライブラリなど
- common｜サイト全体で使う画像など
を置く。
第2階層には
- index.html
- img｜このページで使う画像
となる。
index.html について
http://www.ドメイン名.com/ にアクセスした場合、まずは index.html が読み込まれる。これはサーバーで読み込み順が決まっている（もしくは .htaccess で記述して設定する）。
読み込みの優先順位はこのようになる。
- index.html
- index.htm
- index.php
同一階層に index.html と index.php の両方を置いた場合は、index.html のみ読み込まれる。ファイルに直接アクセスした場合はその限りではない。
http と https
URL のプロトコルには http と https（SSL）がある。たとえばネットショップの場合、ショッピングカートが https でそれ以外のページは http など。
スマホサイトの自動リンク
電話番号やメールアドレスが自動的にリンクされるので、これをオフにする。必要な箇所だけ手動でリンクを設定する。
<meta name="format-detection" content="telephone=no,email=no">チェッカーツール
デザイン意図や構成などは考慮せず、まくまでもコードとしての評価なので目安として。
html基本タグ
html は本やサイトで見るだけだとなかなか覚えられないので、実際にコーディングして手で覚えるのが最も近道。自分のWebサイト（blog）を作成して、htmlタグで文章をマークアップする習慣をつけるとすぐに覚えられる。
htmlタグとdiv/spanの違い
div と span 自体は意味のないhtmlタグ。css でデザインするためにマークアップするもの。
- div｜ブロック要素｜htmlタグでマークアップしたブロック。
- span｜インライン要素｜ここだけ。テキストの一部など。
id と class の違いは、再利用する（使いまわす）かどうか。
- id｜そこだけ｜1ページ内に1つだけ存在してOK
- class｜いくつかの箇所｜1ページ内にいくつ存在してもOK
同じ id名を1ページ内に2つ以上置かない。1クラスに同姓同名の鈴木さんが2人以上いると区別ができないため。
- div id｜ページ内に1つだけのブロック要素
- div class｜ページ内に複数のブロック要素
- span id｜ページ内に1つだけのインライン要素
- span class｜ページ内に複数のインライン
CSS で呼び出す場合、id と class で書き方が違う。id はシャープ（#）、class はドット（.）。
- id｜#id名
- class｜.class名
