CSSグリッドで作る
HTML5&CSS3
レッスンブック
SAMPLE
Chapter 1
HTMLでマークアップする
1-3
HTMLの基本設定
1-4
パーツの記述
※ブラウザの画面サイズを確認する
Chapter 2
CSSでレイアウトをはじめる
2-2
CSSを用意する
2-3
グリッドを作成する
2-4
パーツの配置を調整する
Chapter 3
パーツの見栄えを整える - 基本
3-1
フォントの設定を行う
3-2
ヘッダー(サイト名)の見栄えを整える
3-3
ナビゲーションメニューのリンクを横に並べる
3-4
ナビゲーションメニューのリンクの見栄えを整える
Chapter 4
パーツの見栄えを整える - ボックス
4-1
ヒーローイメージの大きさや明るさを調整する
4-2
タイトルの見栄えを整える
4-3
サブタイトルの見栄えを整える
4-4
リンクをボタンの形にする
Chapter 5
パーツの見栄えを整える - 応用
5-1
記事一覧を2列にレイアウトする
5-2
フッターをバーの形にする
5-3
Webフォントを利用する
5-4
文法チェックを行う
Chapter 6
レスポンシブにする
6-3
PC版のグリッドを作成する
6-4
パーツの配置や見栄えを整える
6-5
より大きい画面での見栄えを整える
6-6
モバイル版とPC版のレイアウトを切り替える
グリッドの活用とレイアウトのアレンジ
6分割にした列の活用(1):
タイトルとサブタイトルのバランスを変えたもの
6分割にした列の活用(2):
半透明な黒色のボックスを追加したもの
行のライン名の活用:
緊急通知を追加したもの
自動配置の活用:
記事一覧に記事を追加したもの
Chapter 7
ページを増やす
7-1
記事ページを作成する
7-2
記事とメニューを追加する
7-3
記事の見栄えを整える
7-4
アイコンフォントを利用する
7-5
サブメニューの見栄えを整える
7-6
レスポンシブにする
7-7
テキストの自動拡大機能を無効化する
7-8
サイト名にトップページへのリンクを設定する
記事のデザインアレンジ
画像にテキストを回り込ませたレイアウト
(floatを「left」と指定した場合)
画像にテキストを回り込ませたレイアウト
(floatを「right」と指定した場合)
背景に透かし画像を入れたデザイン
Chapter 8
テーブルとフォームを作成する
8-1
テーブルを作成する
8-2
投稿フォームを作成する
8-3
投稿フォームの見栄えを整える
完成サンプル
(P.310のサイトの構成ファイル)
トップページ
記事ページ
サイトについてページ
お問い合わせページ