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倍にダウンスケーリングされてスクリーンに表示されているため。

iPhone/iPad解像度(画面サイズ)早見表

レスポンシブ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 で記述して設定する)。

読み込みの優先順位はこのようになる。

  1. index.html
  2. index.htm
  3. 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基本タグ

HTML5リファレンス

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名

こちらの関連記事もあわせてどうぞ!

    WS|コーディング 1

    「Webサイト制作のワークショップ」のメモです。 頭で理解するよりも手で覚えることが大切。たとえば普段使っている Photoshop のショートカットを口で説明しようとすると、すぐには出てこない。手…

    WS|ページの読み込みスピード

    「Webサイト制作のワークショップ」のメモです。 Webサイトの読み込みスピードは非常に重要な要素。PCのネット回線は高速化したが、スマホはまだまだ回線速度が貧弱。 ネットショップの場合、読み込みス…

    WS|Webブラウザ

    「Webサイト制作のワークショップ」のメモです。 ブラウザによってWebサイトの表示が変わるというのは、昔ほどではないが今でも存在する。理由はブラウザに使われているレンダリングエンジンがそれぞれ異な…

    WS|Webサイトのテキスト

    「Webサイト制作のワークショップ」のメモです。 デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めると…

    WS|Webサイト制作

    Webサイト制作のワークショップを各所で行いたいと思います 都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何…