HTML5&CSS3ステップアップブック
CSSのグリッドレイアウトを利用して、ステップ・バイ・ステップでWebページを作成・アレンジしていく一冊です。
はじめに
ボックスを並べることしかできなかったWebページのレイアウトが、ついに変わろうとしています。
もちろん、これまでもポジション（position）やテーブル（table）を使って自由なレイアウトを行う試みは繰り返されてきましたが、どれもスマートなものではなく、一般的なテクニックとして浸透していくことはありませんでした。
しかし、今、目の前にあるCSSのグリッドレイアウト（CSS Grid）では、DTPのような自由なレイアウトが可能になります。もちろん、コンテンツの増加に合わせて追従するような設定や、レスポンシブWebデザインの設定も可能です。
そこで、本書ではできるだけグリッドレイアウトの可能性を垣間見られるようなサンプルを用意してみました。ステップ・バイ・ステップで作成していく中で、グリッドレイアウトの多彩な機能や活用方法も修得できるように構成しています。
ちょっとやりすぎている感じもありますが、参考にしてみてください。
グリッドレイアウトによるWebページ制作はまだスタートラインに立ったばかりです。これから、もっと便利な使い方のテクニックやレイアウトのバリエーション、ツールなどが生まれてくると思います。
そんなグリッドレイアウトの一助として、本書を手にとっていただければ幸いです。
本書について
本書は、姉妹書『HTML5&CSS3 デザインブック』を読了された方や、HTML5とCSS3でWebページ制作経験のある方が、CSSのグリッドレイアウトを習得することを目的としています。そのため、本書ではグリッドレイアウトを利用し、ステップ・バイ・ステップで次のようなサンプルを作成していきます。
Chapter 1
エリアベースのグリッドレイアウト
CSSグリッドでイメージされるレイアウト
Chapter 2
ラインベースのグリッドレイアウト
一般的な２段組みのレイアウトをCSSグリッドで再現
Chapter 3
自由度の高いグリッドレイアウト
プロトタイピングで少しずつ形にしながらページを構築
Chapter 4
ブロークングリッドレイアウト
フロートベースでは手間のかかるレイアウトをシンプルに作成
サンプルについて
- 各サンプルはCSSのグリッドレイアウトを利用し、次のような手順で作成していきます。
- パーツの基本設定は、姉妹書『HTML5&CSS3 デザインブック』で作成したパーツをベースに用意しています。
- パーツのデザインはCSSのグリッドレイアウトやフレキシブルボックスレイアウトを利用してアレンジしていきます。
- トグル型メニューやドロワーメニューはjQueryを使用せず、JavaScriptとCSSで作成していきます。
- サンプルで使用したグリッドレイアウトとフレキシブルボックスレイアウトの機能については、詳細を各章の最後にまとめていますので参考にしてください。
もくじ
[mokuji]
Chapter 1
エリアベースのグリッドレイアウト
1-1 コンテンツを作成する
1-2 グリッドを作成する
エリアベースのグリッドの作成
1-3 コンテンツの配置を指定する
エリアベースの配置の指定
1-4 グリッドの行列のサイズを指定する
行列のサイズが未指定の場合
列のサイズ（横幅）の指定
1-5 グリッドを切り替えてレスポンシブにする
グリッドの切り替え
TIPS グリッドを無効にして１段組みにする場合
1-6 パーツのアレンジ
1-6-1 ナビゲーションメニューを横に並べる
1-6-2 記事のまわりの余白サイズを調整する
1-6-3 関連記事メニューを横に並べる
TIPS リンクの間の余白
DEVICES 主要デバイスにおけるブラウザの画面サイズ
DISPLAY TYPE Webページ制作におけるモダンなレイアウトの仕組み
GRID LAYOUT グリッドレイアウトの基本
GRID LAYOUT エリアベースのグリッドの作成
GRID LAYOUT グリッドの行列のサイズ
FLEXIBLE BOX LAYOUT フレキシブルボックスレイアウトの基本
FLEXIBLE BOX LAYOUT フレックスアイテムの横幅
FLEXIBLE BOX LAYOUT レスポンシブな均等割を行う
FLEXIBLE BOX LAYOUT フレックスアイテムを複数行でレイアウトする
Chapter 2
ラインベースのグリッドレイアウト
2-1 コンテンツを作成する
2-2 グリッドを作成する
ラインベースのグリッドの作成
2-3 コンテンツの配置を指定する
ラインベースの配置の指定
グリッドのラインを視覚化して配置を確認する
指定した横幅でレイアウトされていることを確認する
2-4 グリッドを切り替えてレスポンシブにする
どのようにレスポンシブにするかを検討する
２段組みを可変にしたグリッドを作成する
１段組みのグリッドを作成する
2-5 バーの中身を記事のラインに揃える
バーの中身の配置を変更する
2-6 入れ子のグリッドでメニューを２段組みにする
サイドバーのメニューを２段組みにする
TIPS 人気の記事メニューの配置の指定
2-7 パーツのアレンジ
2-7-1 SNSメニューを作成する
2-7-2 リストマーク付きのメニューにする
2-7-3 画像とテキストの中央を揃えたメニューにする
2-7-4 画像の中央にテキストを重ねたメニューにする
2-7-5 小見出しのデザインをアレンジする
GRID LAYOUT ラインベースのグリッドの作成
GRID LAYOUT グリッドアイテムの間隔
FLEXIBLE BOX LAYOUT フレックスアイテムの位置揃え
Chapter 3
自由度の高いグリッドレイアウト
3-1 コンテンツを作成する
3-2 グリッドを作成する
ラインベースのグリッドの作成
3-3 コンテンツの配置を指定する
ライン名を付ける
ライン名で配置を指定する
コンテンツの間隔を調整する
TIPS マージンが挿入されていることを確認する
3-4 レスポンシブにする
どのようにレスポンシブにするかを検討する
列の横幅の最小値と最大値を指定する
3-5 ヘッダー画像を画面の横幅いっぱいに表示する
ヘッダー画像のレイアウトを検討する
ヘッダー画像の配置先を切り替える
3-6 キャッチコピーを追加する
3-6-1 キャッチコピーをヘッダー画像に重ねる
3-6-2 キャッチコピーをヘッダー画像の下に配置する
3-7 ナビゲーションメニューを追加する
3-7-1 ナビゲーションメニューを追加する
3-7-2 ナビゲーションメニューをトグル型にする
3-7-3 トグルボタンでメニューを開閉する
3-8 SNSメニューを追加する
3-8-1 SNSメニューとお知らせで２段組みにする
3-8-2 SNSメニューをお知らせの下に配置する
3-8-3 SNSメニューを左側のスペースに配置する
FLEXIBLE BOX LAYOUT フレックスアイテムを配置する方向
3-9 コンテンツの概要を追加する
3-9-1 概要を追加して横に並べる
3-9-2 概要をコンパクトに表示する
3-10 ヘッダーとフッターのデザインをアレンジする
3-10-1 フッターをバーの形にする
3-10-2 ヘッダーを罫線で区切る
TIPS <span>を使わずにデザインをアレンジする
GRID LAYOUT グリッドのライン名
GRID LAYOUT グリッドアイテムの位置揃え
Chapter 4
ブロークングリッドレイアウト
4-1 コンテンツを作成する
4-2 <body>のグリッドを作成する
<body>のグリッドの作成
4-3 コンテンツの配置を指定する
配置の指定
4-4 <article>のグリッドを作成する
<article>のグリッドの作成
4-5 記事を構成するパーツの配置を指定する
自動配置によるレイアウトを確認する
すべてのパーツを３列目に揃える
タイトルと日付を１列目に揃える
タイトルを３列分使って表示する
日付のデザインを調整する
日付を2行分使って表示する
4-6 記事のレイアウトをレスポンシブにする
ブレークポイントを検討する
記事のレイアウトを切り替える
4-7 段落や画像を追加する
段落を追加する
画像を追加する
画像にキャプションを付ける
4-8 画像の配置をアレンジする
4-8-1 画像を２つ目の段落の後に配置する
4-8-2 画像を横幅いっぱいに表示する
4-9 画像を重ねてレイアウトする
4-9-1 キャプション付きの画像を追加する
4-9-2 「fig3」の画像の配置を変更する
4-9-3 画像の横幅やキャプションの配置を調整する
4-9-4 画像を重ねてレイアウトする
4-9-5 画像を重ねたレイアウトが崩れないようにする
4-10 ドロワーメニューを作成する
4-10-1 メニューを追加する
4-10-2 ボタンでメニューを開閉する
4-10-3 メニュー以外のクリックでメニューを閉じる
4-10-4 スクロールを調整する
4-11 ページのデザインをアレンジする
4-11-1 赤色のバーを追加する
GRID LAYOUT グリッドアイテムの自動配置
GRID LAYOUT 行のラインの自動生成
GRID LAYOUT グリッドコンテナの横幅に応じて列の数を変化させる
APPENDIX A
基本パーツの設定
ベース
サイト名
メニュー
記事
コピーライト
APPENDIX B
グリッドレイアウトに未対応なブラウザへの対策
ブラウザの対応状況
未対応なブラウザへの対策方法
対応ブラウザと同じレイアウトを再現する
１段組みの形でレイアウトを整える
[/mokuji]
