4-5 第 4 章 高 度 なリストのデザイン スマートフォン 向 けのCSSを 読 み 込 む スマートフォンのように 画 面 サイズの 小 さい 端 末 で 見 たときは 専 用 のCSSを 読 み 込 むように します 画 面 サイズが 小 さいときはレイアウトを 変 更 する スマートフォンなど パソコンに 比 べて 画 面 の 小 さい 端 末 で Web サイトを 閲 覧 しようとすると 文 字 や 画 像 が 縮 小 され ものすごく 小 さく 表 示 されることがあります そうならないように 画 面 サイズが 小 さいときはページのレイアウトを 変 更 します レイアウトの 変 更 は CSS だけで 行 います メディアクエリー と 呼 ばれる CSS の 新 機 能 を 使 って 画 面 サイズが 小 さいときだけ 追 加 の CSS ファイルが 読 み 込 まれるようにします 本 節 で 記 述 するメディアクエリーの 動 作 概 要 HTML <link rel="stylesheet" href="css/style.css"> 1 <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)"> 2 条 件 (メディアクエリー) 画 面 サイズが 小 さく 条 件 を 満 たす 場 合 1と2を 読 み 込 む 画 面 サイズが 大 きく 条 件 を 満 たさない 場 合 1だけ 読 み 込 む メディアクエリーを 使 って 別 のCSSファイルを 読 み 込 む 画 面 の 横 幅 が 480 ピクセル 以 下 のスマートフォンで 閲 覧 したときには style.css common.css に 加 え 追 加 の CSS ファイルとして css フォルダーの 中 にある responsive.css を 読 み 込 むよう にします <link> タグを 追 加 する 1 index.html を 開 きます <head> 内 のすでにある <link> タグの 下 にもう 1 行 <link> タグを 追 加 します index.html <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>hotel IMPERIAL RESORT TOKYO</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)"> </head> 148
2 index.html をブラウザーで 開 きます ブラウザーのウィンドウを 狭 めていくと 途 中 でレイアウトが 切 り 替 わります 通 常 のウィンドウ 幅 幅 480 ピクセル 以 下 解 説 レスポンシブWebデザイン スマートフォンやタブレットの 登 場 で パソコン 以 外 の 端 末 で Web サイトを 閲 覧 する 機 会 が 増 えまし た HTML はいっさい 切 り 替 えず 画 面 サイズなどの 条 件 に 応 じて 適 用 する CSS だけを 変 えることで 端 末 に 適 したレイアウトを 実 現 する 手 法 があります それが レスポンシブ Web デザイン です レスポンシブ Web デザインを 実 現 するには 次 の 2 つの 作 業 をします HTMLに<meta name="viewport"> タグを 追 加 する メディアクエリーを 使 用 して CSS を 切 り 替 える <meta name="viewport"> タグの 追 加 スマートフォンやタブレットのブラウザーが Web ページを 表 示 するとき そのページがパソコン 向 け に 横 幅 980 ピクセル *1 の 固 定 幅 で 作 られていると 仮 定 して 一 度 描 画 し その 後 端 末 の 画 面 サイズに 合 わせて 縮 小 表 示 します そのため パソコン 向 けに 作 られたページはものすごく 小 さく 表 示 されるこ とがあります 149
スマートフォンが Web ページを 表 示 するときの 通 常 の 処 理 ページの 横 幅 を 980 ピクセルと 仮 定 していったん 描 画 画 面 サイズに 合 わせて 縮 小 表 示 <meta name="viewport"> タグを 使 用 すると 横 幅 を 仮 定 して 描 画 し それを 縮 小 表 示 するという 通 常 の 処 理 手 順 をキャンセルすることができます 画 面 幅 が 480 ピクセル 以 下 のときに 適 用 される responsive.css には ページの 横 幅 を 固 定 せず 常 に 画 面 幅 の 95% になるような CSS が 書 かれているため 横 幅 を 仮 定 して 縮 小 表 示 する 必 要 がありま せん そこで <meta name="viewport"> タグを 使 って 通 常 の 表 示 処 理 をキャンセルしています *1 ios の 場 合 Android 端 末 は 機 種 によって 異 なる 表 示 処 理 をキャンセルするときの <meta name="viewport"> の 書 式 <meta name="viewport" content="width=device-width,initial-scale=1.0"> メディアクエリーの 使 用 メディアクエリー と 呼 ばれる 条 件 文 を 用 いれば 画 面 サイズの 違 いなどに 応 じて 適 用 する CSS を 切 り 替 えることができます メディアクエリーを 使 用 するには HTML に <link> タグを 追 加 するか もしくは CSS に @media ルールを 追 加 します 150 HTML に <link> タグを 追 加 する HTML の <link> タグを 使 って 条 件 に 適 合 したときの CSS を 読 み 込 ませます 条 件 を 指 定 するには <link> タグの media 属 性 を 使 います
<link> タグの media 属 性 を 使 用 する 書 式 <link rel="stylesheet" href="cssファイルのパス.css" media="メディア 特 性 and (メディアクエ リー)"> CSS に @media ルールを 追 加 する @media ルールを 使 うと すでにある CSS ファイルに 条 件 に 応 じて 切 り 替 える CSS を 追 加 するこ とができます つまり responsive.css に 書 かれた CSS を style.css に 丸 ごと 移 せるわけです 具 体 的 な 例 を 確 認 したいときは サンプルの c04-responsive フォルダーをご 覧 ください @media ルールの 書 式 @media メディア 属 性 and (メディアクエリー) { /* 条 件 に 適 合 したときのCSSをここに 記 述 する */ style.css に @media ルールを 使 って 記 述 する 例 (サンプル:c04-responsive /css/style.css) /* @mediaルールを 使 ったレスポンシブなCSSの 記 述 例 */ @media screen and (max-width: 480px) { /* 画 面 の 横 幅 が480px 以 下 のときに 適 用 されるCSSはすべてここに 記 述 する */ header, nav, #graphic, #contents, footer { margin: 0 auto; width: 95%; 4 高 度 な リ ス ト の デ ザ イ ン メディア 属 性 の 主 な 値 属 性 値 説 明 screen print 画 面 用 の CSS を 指 定 プリント 用 の CSS を 指 定 メディアクエリー の 主 な 値 メディアクエリーの 書 式 例 (max-width:480px) (min-width:600px) (max-height:500px) (min-height:768px) (orientation:portrait) (orientation:landscape) 説 明 画 面 幅 が 480 ピクセル 以 下 のとき CSS を 適 用 画 面 幅 が 600 ピクセル 以 上 のとき CSS を 適 用 画 面 高 が 500 ピクセル 以 下 のとき CSS を 適 用 画 面 高 が 768 ピクセル 以 上 のとき CSS を 適 用 画 面 幅 が 高 さ 以 下 のとき つまり 端 末 を 縦 に 持 っているとき CSS を 適 用 画 面 幅 が 高 さ 以 上 のとき つまり 端 末 を 横 に 持 っているとき CSS を 適 用 151
コンテンツを 折 りたたむ 開 閉 手 法 関 連 する 情 報 を 近 くにまとめたり *1 ボーダーラインで 囲 んだりしてグループ 化 すると ページの 内 容 が 整 理 されて 読 みやすくなります Web デザインならではのグループ 化 手 法 の 1 つに 開 閉 があります 掲 載 する 情 報 が 多 いときや 常 に 見 えてい る 必 要 がないものに 使 用 すると 効 果 的 です *1 第 9 章 近 接 P.249 スマートフォンのナビゲーション スマートフォンでは パソコンのようにナビゲーションのリンクを 横 に 並 ばせるのは 現 実 的 ではありません だから といってリンクを 縦 に 並 べて 狭 い 画 面 のかなりの 部 分 を 占 有 してまで 見 せておく 必 要 もありません そこで 画 面 を 有 効 に 利 用 するために ナビゲーションを 開 閉 できるようにすることがあります 開 閉 するナビゲーションの 例 タップ スマートフォンサイトで 見 かけるナビゲーション 一 般 的 に 3 本 線 のアイコンを 付 ける ことが 多 いため ハンバーガーメニュー と 呼 ばれている アコーディオン 情 報 量 の 多 いページをコンパクトに 見 せる 方 法 としてよく 用 いられるのは 一 度 見 出 しをクリックすると 記 事 が 表 示 され もう 一 度 クリックすると 記 事 が 隠 れるというものです 一 般 的 に アコーディオン と 呼 ばれるデザイン 手 法 です アコーディオンの 例 タップ スマートフォン 版 のウィキペディア 見 出 しをタップするとテキストが 表 示 されるように なっている 開 閉 を 実 現 するには スマートフォンのナビゲーションやアコーディオンなど Web ページで 開 閉 を 実 現 するには JavaScript と CSS を 組 み 合 わせます JavaScript が 書 けなくても どういう 場 面 で 使 うのが 効 果 的 か デザインのアイディアと して 知 っておいた 方 がよいでしょう 152