アートボード 1
  1. 書籍情報

HTML5&CSS3ステップアップブック(2018)

CSSのグリッドレイアウトを利用して、ステップ・バイ・ステップでWebページを作成・アレンジしていく一冊です。

HTML5&CSS3ステップアップブック(2018)

2018年1月 ソシム株式会社刊
B5変型 320ページ / 978-4802611343

はじめに

ボックスを並べることしかできなかったWebページのレイアウトが、ついに変わろうとしています。

もちろん、これまでもポジション(position)やテーブル(table)を使って自由なレイアウトを行う試みは繰り返されてきましたが、どれもスマートなものではなく、一般的なテクニックとして浸透していくことはありませんでした。

しかし、今、目の前にあるCSSのグリッドレイアウト(CSS Grid)では、DTPのような自由なレイアウトが可能になります。もちろん、コンテンツの増加に合わせて追従するような設定や、レスポンシブWebデザインの設定も可能です。

そこで、本書ではできるだけグリッドレイアウトの可能性を垣間見られるようなサンプルを用意してみました。ステップ・バイ・ステップで作成していく中で、グリッドレイアウトの多彩な機能や活用方法も修得できるように構成しています。

ちょっとやりすぎている感じもありますが、参考にしてみてください。

グリッドレイアウトによるWebページ制作はまだスタートラインに立ったばかりです。これから、もっと便利な使い方のテクニックやレイアウトのバリエーション、ツールなどが生まれてくると思います。
そんなグリッドレイアウトの一助として、本書を手にとっていただければ幸いです。

本書について

本書は、姉妹書『HTML5&CSS3 デザインブック』を読了された方や、HTML5とCSS3でWebページ制作経験のある方が、CSSのグリッドレイアウトを習得することを目的としています。そのため、本書ではグリッドレイアウトを利用し、ステップ・バイ・ステップで次のようなサンプルを作成していきます。

Chapter 1
エリアベースのグリッドレイアウト

CSSグリッドでイメージされるレイアウト

Chapter 2
ラインベースのグリッドレイアウト

一般的な2段組みのレイアウトをCSSグリッドで再現

Chapter 3
自由度の高いグリッドレイアウト

プロトタイピングで少しずつ形にしながらページを構築

Chapter 4
ブロークングリッドレイアウト

フロートベースでは手間のかかるレイアウトをシンプルに作成

Chapter 2と3のサンプルは、姉妹書『HTML5&CSS3 デザインブック』の「ブログ・ニュース系サイトのトップページ」「ビジネスサイト風のトップページ」をグリッドレイアウトで作成したものです。

サンプルについて

サンプルは主要ブラウザでの表示に対応しています。ただし、グリッドレイアウトに未対応なIE11や古いバージョンの主要ブラウザに対応するためには対策が必要です。対策方法についてはAPPENDIXで解説しています。

もくじ

Chapter 1
エリアベースのグリッドレイアウト

1-1 コンテンツを作成する
1-2 グリッドを作成する
 エリアベースのグリッドの作成
1-3 コンテンツの配置を指定する
 エリアベースの配置の指定
1-4 グリッドの行列のサイズを指定する
 行列のサイズが未指定の場合
 列のサイズ(横幅)の指定
1-5 グリッドを切り替えてレスポンシブにする
 グリッドの切り替え
 TIPS グリッドを無効にして1段組みにする場合
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段組みを可変にしたグリッドを作成する
 1段組みのグリッドを作成する
2-5 バーの中身を記事のラインに揃える
 バーの中身の配置を変更する
2-6 入れ子のグリッドでメニューを2段組みにする
 サイドバーのメニューを2段組みにする
 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メニューとお知らせで2段組みにする
 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 記事を構成するパーツの配置を指定する
 自動配置によるレイアウトを確認する
 すべてのパーツを3列目に揃える
 タイトルと日付を1列目に揃える
 タイトルを3列分使って表示する
 日付のデザインを調整する
 日付を2行分使って表示する
4-6 記事のレイアウトをレスポンシブにする
 ブレークポイントを検討する
 記事のレイアウトを切り替える
4-7 段落や画像を追加する
 段落を追加する
 画像を追加する
 画像にキャプションを付ける
4-8 画像の配置をアレンジする
 4-8-1 画像を2つ目の段落の後に配置する
 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
グリッドレイアウトに未対応なブラウザへの対策

 ブラウザの対応状況
 未対応なブラウザへの対策方法
 対応ブラウザと同じレイアウトを再現する
 1段組みの形でレイアウトを整える