これからの「標準」を身につける HTML+CSSデザインレシピ

これからの「標準」を身につける HTML+CSSデザインレシピ

パーツを組み合わせてオリジナルなWebページを作ることを目的とした一冊です。レスポンシブWebデザインをはじめとする考え方が当然のものとして扱われている現状に合わせて、CSSフレームワークを利用せずに作るのか、CSSフレームワークを利用して作るのかを選択できるようにしています。

出版日 2014年3月
ISBN 4839948879
ISBN-13 978-4839948870
出版社 マイナビ
ページ数 320ページ
判型 B5変型

はじめに

スマートフォンやタブレットの登場により、多様なデバイスに対応できるWebページが求められるようになっています。その中で、レスポンシブWebデザインをはじめとする考え方が生まれ、Webページに当然のように組み込まれる時代になってきました。 その結果、多様なデバイスに対応したページを効率よく作成していくため、Webページ制作の現場ではワークフローの変化も起きています。 PCブラウザという1つの環境をターゲットに制作できた時代と異なり、現在は膨大な数のデバイスをターゲットに、さまざまな切り口で最大公約数を考えながらページを作成しなければなりません。従来のデザインカンプを再現する作り方では対応が難しく、ページを動かしながら作り込んでいく必要があります。 こうしたワークフローの変化とともに、HTMLのコーディングに求められるものにも変化が出てきています。

固定からリキッドへ

ページを構成するパーツそのものが固定のスタイルからリキッドとなり、それをページの骨格に流し込むのが主流となっています。

パーツのコンポーネント化

パーツのコンポーネント化が進んでいます。これは、Web標準から個人レベルまで、さまざまな形で進められています。

CSSフレームワークの登場

CSSフレームワークはコンポーネント化に関わる部分を持っているのと同時に、レスポンシブWebデザインなどに対応したグリッドレイアウトを実現するなど、ページ制作を効率化することができます。 このような現状をふまえ、この本ではこれからのWebページ制作に必要なレシピをできる限り詰め込みました。

本書について

この本にはそのまま使えるレシピは入っていません。 この中にあるものを組み合わせて、 オリジナルなWebページを作ることを目的としています。

本書の構成

本書は、ベースとなるWebページ(BASE)にパーツを組み合わせて配置していくことで、オリジナルのページを作成できるように構成しています。 このとき、レスポンシブWebデザインをはじめとする考え方が当然のものとして扱われている現状に合わせて、CSSフレームワークを利用せずに作るのか、CSSフレームワークを利用して作るのかを選択できるようにしています。 CSSフレームワークはBootstrapとFoundationを利用する方法を紹介しています。また、BASEに関してはP.014で解説しています。

本書では、ページに求められる機能の多様化、複雑化をふまえ、CSSフレームワークを利用することをメインに考えています。

パーツについて

ページを構成する基本的なパーツを用意
ページを構成するために必要なパーツを検討した結果、基本となる右の5分類になりました。これらを徹底的にシンプルな構成に落とし込んでいき、1イメージ1テキストをパーツの基本構造としています。
各パーツは3段階で構成
各パーツはHTML、CSS(レイアウト)、CSS(デザイン)の3段階で構成しています。このうち、HTMLとレイアウト用のCSSについては、Chapter 1~5でセットで解説しています。 デザイン用のCSSについてはさまざまなパーツと組み合わせて利用できるように、Chapter 6に分けて解説しています。
カスタマイズできるように構成
パーツは必要に応じてカスタマイズできるようにしてあります。パーツごとにどのような構造になっているのかが見えるように解説していますので参考にしてください。
リキッドレイアウトで作成
すべてのパーツはリキッド(可変)レイアウトで作成してありますので、そのままでもレスポンシブWebデザインに対応できます。
グリッドや段組みで利用可能
パーツは相互に干渉しないコーディングで作成してありますので、グリッドや段組みの中などでも問題なく利用することができます。

ページの作成について

パーツを使ってページを作成していく方法を解説
Chapter 7~9では、パーツを使って実際にページを作成していく方法を解説しています。グリッドシステムや段組みの組み込み方なども含め、作業手順の解説を目的とした章ですので、複雑なことは行わず、シンプルなブログ形式のページを作成していきます。
ページの作成方法は段階にわけて解説
ページの作成方法は段階にわけて解説していますので、必要に応じて読んでください。ページ作成の目的によっては、CSSフレームワークの機能だけを利用してページを形にした段階で完成形とすることも可能です。
グリッドにパーツ(HTMLのみ)を配置した段階
CSSフレームワークの機能だけを利用してページを形にした段階
パーツごとにCSSを適用してレイアウトやデザインをアレンジした段階

レシピについて

作例を紹介
Chapter 10では、本書に収録したパーツとCSSフレームワークを組み合わせて使うことで、どのようなことができるのか、どのぐらい作り込むことができるのかを4例紹介しています。

ここではCSSフレームワークに用意されたカルーセルやオフキャンバスメニューなどの機能も利用する形でページを作成しています。

RECIPE 01 プロモーションサイト

Bootstrapを使用

完成サンプルを表示
RECIPE 02 プロモーションサイトのコンテンツページ

Bootstrapを使用

完成サンプルを表示
RECIPE 03 ビジネスサイト

Bootstrapを使用

完成サンプルを表示
RECIPE 04 ショップサイト

Foundationを使用

完成サンプルを表示

パーツやレシピのデータについて

パーツやレシピのデータについては、マイナビのサポートページからダウンロードすることができます。
対応ブラウザについて
本書のパーツは主要ブラウザ(iOS、Android、Chrome、Safari、Firefox、Opera、Internet Explorer)に対応しています。また、IE8/IE7についても、表示が大きく崩れないレベルで対応するようにしています。ただし、CSSフレームワークを利用した場合、BootstrapはIE8以上、FoundationはIE9以上の対応となります。

HTML5のセクショニングに関して

本書では、HTML5のセクショニング・コンテンツ(<article>や<nav>など)によるマークアップは行っていません。セクショニング・コンテンツによるマークアップは、「メニューのパーツだから<nav>でマークアップする」という類のものではなく、パーツを組み合わせてページを構成し、セクショニングの明示が必要かどうか、どこをどのように明示したいかを制作者が判断すべきものだからです。 なお、本書のパーツでは見出しを<h1>でマークアップしていますので、使用する状況に応じて適切に変更して利用してください。<h1>のまま利用しても文法的な問題はなく、HTML5では暗黙のセクションが構成されます。

※HTML5のセクショニング・コンテンツによるマークアップや暗黙のセクションの構成などについて詳しくは「HTML5 スタンダード・デザインガイド」を参考にしてください。

もくじ

BASE 基本

BASE ページを作成するための下準備
TIPS <meta name=”viewport” />のinitial-scaleの指定
TIPS 游ゴシックで表示する場合
TIPS Internet Explorerが互換表示モードになるのを防ぐ
TIPS IE8/IE7をメディアクエリに対応させる
About CSS CSSについて

CHAPTER 1 ヘッダー

HEADER 01 ヘッダーの基本レイアウト
HEADER 02 中央揃えのレイアウト
HEADER 03 ロゴ画像とサイト名を並べたレイアウト
TIPS vertical-align: middleの利用
03-A ロゴ画像とサイト名を上下に並べて中央揃えにする
HEADER 04 ロゴ画像と複数行のテキストを並べたレイアウト
TIPS floatを利用したレイアウトの仕組み
TIPS clearfix(クリアフィックス)の設定
TIPS overflowでより簡単にclearfix(クリアフィックス)の設定を行う
04-A ロゴ画像と複数行のテキストを垂直方向で中央揃えにする
HEADER 05 サイト名を画像で表示したレイアウト
05-A 高解像度な閲覧環境で画像がぼけるのを防ぐ
TIPS レスポンシブイメージの設定
05-B SVGフォーマットの画像を利用する
HEADER 06 ヘッダー画像を表示したレイアウト
HEADER 07 ヘッダー画像にテキストを重ねたレイアウト
HEADER 08 ヘッダーの右端にパーツを追加したレイアウト
TIPS 右端のパーツのレイアウトをレスポンシブにするには

CHAPTER 2 記事

ENTRY 01 記事の基本レイアウト
01-A パーツ内の最後の要素の下マージンを削除する
01-B フォントの構成
TIPS 行の構成
ENTRY 02 中央揃えのレイアウト
02-A 中央揃えの中で本文だけを左揃えにする場合
02-B 画像だけを中央揃えにする場合
ENTRY 03 画像にテキストを回り込ませたレイアウト
03-A 画像の下にテキストを回り込ませない場合
ENTRY 04 タイトルの下にパーツを追加したレイアウト

CHAPTER 3 メニュー

MENU 01 リンクを縦に並べたメニューの基本レイアウト
01-A 縦に並べたリンクを罫線で区切る
MENU 02 階層構造を持つメニュー
MENU 03 リストマークを画像で表示したメニュー
03-A リストマークを垂直方向の中央に揃える
03-B リストマークを文字で表示する
03-C リストマークをアイコンフォントで表示する
03-D リンクの右端に右向きの矢印アイコンを表示する
03-E リストマークを連番で表示する
MENU 04 サムネイル画像の横にテキストを並べたメニュー
04-A 日付の横にタイトルを並べたメニュー
MENU 05 リンクを横に並べたメニューの基本レイアウト
05-A メニューをコンパクトに表示する
05-B 横に並べたリンクを罫線で区切る
05-C リンクの横幅を固定する場合
05-D 等分割した横幅でリンクを表示する場合 その1
05-E 等分割した横幅でリンクを表示する場合 その2
05-F 各リンクに付加情報を追加する
05-G 横に並べたリンクをパンくずリストとして利用する
MENU 06 アイコンを横に並べたメニュー
06-A アイコンを画像で表示する場合
MENU 07 アイコンにテキストをつけて横に並べたメニュー
07-A アイコンを画像で表示する場合
TIPS ドロップダウンメニューやタブメニューの設定について

CHAPTER 4 フッター

FOOTER 01 フッターの基本レイアウト
FOOTER 02 中央揃えのレイアウト
FOOTER 03 ロゴ画像と複数行のテキストを並べたレイアウト
FOOTER 04 フッター画像にテキストを重ねたレイアウト
04-A ページの背景色で表示する
TIPS レスポンシブイメージの設定(背景画像の場合)
FOOTER 05 フッターの右端にパーツを追加したレイアウト
TIPS フッターを段組みにしてメニューなどを配置する場合

CHAPTER 5 その他

OTHER 01 ボタン
01-A フォームを利用したボタン
01-B 配置した場所の横幅に合わせてボタンを表示する
TIPS CSSフレームワークによるボタンの表示
01-C ラベルの表示
OTHER 02 フォーム
TIPS CSSフレームワークによるフォームの表示
OTHER 03 テーブル(表組み)
03-A 横方向の罫線のみで区切る
03-B テーブルの行をストライプにする
03-C テーブルの列をストライプにする
03-D 列ごとに位置揃えを変更する
03-E レスポンシブテーブル
TIPS CSSフレームワークによるテーブルの表示
OTHER 04 段組み
04-A 段ごとに横幅を変える
04-B 段数を変える
OTHER 05 グループ

CHAPTER 6 デザイン

DESIGN 01 枠で囲むデザイン
01-A 枠のデザインのアレンジ
01-B 枠のデザインで見出しやボタンをアレンジする
TIPS デザインの設定の適用方法: プロパティの指定が重複しないようにする場合
TIPS デザインの設定の適用方法: クラス名で指定できるようにする場合
TIPS デザインの設定の適用方法: Sassのミックスイン(@mixin)として利用する場合
TIPS 枠やボタンの設定を簡単に作成できるCSSジェネレータ
DESIGN 02 枠と見出しを一体化したデザイン
02-A 枠と見出しを一体化したデザインのアレンジ
02-B 枠とメニューを一体化したデザイン
DESIGN 03 罫線で区切るデザイン
03-A 罫線で区切るデザインのアレンジ
DESIGN 04 円形の枠で囲むデザイン
04-A 円形の枠のデザインのアレンジ
04-B ボタンを円形にする
04-C 画像を円形に切り抜く
04-D 半円形の枠で囲む
DESIGN 05 吹き出し型の枠で囲むデザイン
05-A 罫線で囲んだ枠を吹き出し型にする
05-B 吹き出し型の枠に影をつける
TIPS 吹き出しの設定を簡単に作成できるCSSジェネレータ
DESIGN 06 背景画像を利用したデザイン
06-A 背景画像に重ねたテキストに影をつけて読みやすくする
06-B 背景画像に重ねたテキストを半透明の枠で囲んで読みやすくする
DESIGN 07 グラデーションを利用したデザイン
07-A 古いブラウザに対応するためのグラデーションの設定
07-B SVGを利用したグラデーションの設定
TIPS グラデーションの設定を簡単に作成できるCSSジェネレータ
DESIGN 08 パーツを重ねて表示するデザイン
TIPS 色の選択
TIPS ネット上のリソースを活用してデザインする

CHAPTER 7 Bootstrapを利用したページ作成

BOOTSTRAP 01 Bootstrapを利用してページを作成するための下準備
TIPS BootstrapをCDNで利用する
TIPS 必要な機能のみを含んだBootstrapをダウンロードする
BOOTSTRAP 02 グリッドの用意とパーツの配置
02-A Bootstrapのグリッドシステム
02-B グリッドのネスト
02-C 小さい画面でメニューを上に表示する
BOOTSTRAP 03 CSSに触れることなくBootstrapの機能だけでページを形にする
03-A ナビゲーションバーのアレンジ
TIPS 適用されたCSSの設定を確認する方法
BOOTSTRAP 04 Bootstrapで形にしたページをテーマでアレンジする
BOOTSTRAP 05 Bootstrapで形にしたページをCSSでアレンジする
TIPS LESSやSassを利用したデザインのアレンジ
TIPS ナビゲーションバーにドロップダウンメニューを追加する

CHAPTER 8 Foundationを利用したページ作成

FOUNDATION 01 Foundationを利用してページを作成するための下準備
TIPS 必要な機能のみを含んだFoundationをダウンロードする
FOUNDATION 02 グリッドの用意とパーツの配置
02-A Foundationのグリッドシステム
02-B グリッドのネスト
02-C 小さい画面でメニューを上に表示する
FOUNDATION 03 CSSに触れることなくFoundationの機能だけでページを形にする
03-A トップバーのアレンジ
FOUNDATION 04 Foundationで形にしたページをCSSでアレンジする
TIPS Sassを利用したデザインのアレンジ
TIPS トップバーにドロップダウンメニューを追加する

CHAPTER 9 フレームワークを利用しないページ作成

NO-FRAMEWORK 01 パーツを配置して1段組みのレイアウトでページを形にする
NO-FRAMEWORK 02 段組みの設定を追加して2段組みのレイアウトにする
NO-FRAMEWORK 03 レスポンシブにして1段組みと2段組みのレイアウトを切り替える
TIPS メディアクエリの利用
NO-FRAMEWORK 04 コンテンツ全体が横に広がりすぎないようにする
NO-FRAMEWORK 05 パーツのデザインをアレンジする
TIPS CSSフレームワークのグリッドシステムにおける余白の扱い

CHAPTER 10 レシピ

RECIPE 01 プロモーションサイト
RECIPE 02 プロモーションサイトのコンテンツページ
RECIPE 03 ビジネスサイト
RECIPE 04 ショップサイト