フレキシブルボックスで作る
HTML5&CSS3
レッスンブック
SAMPLE
Chapter 1
HTMLでマークアップする
1-3
HTMLの基本設定
1-4
ブロックとパーツを追加する
Chapter 2
CSSでレイアウトをはじめる
2-3
CSSを用意する
2-4
ブロックの背景に色を付ける
2-5
ブロック内に余白を入れる
※ブラウザの画面サイズを確認する
Chapter 3
記事の見栄えを整える
3-1
フォントの設定を行う
3-2
記事をカード型のデザインにする
3-3
画像を追加する
3-4
アイコンフォントを利用する
Chapter 4
ヘッダーとフッターの見栄えを整える
4-1
Webフォントを利用する
4-2
リンクを設定する
4-3
ナビゲーションメニューを追加する
4-4
ナビゲーションメニューのリンクを横に並べる
Chapter 5
サブメニューの見栄えを整える
5-1
サブメニューを追加する
5-2
サブメニューをカード型のデザインにする
5-3
プロフィールの見栄えを整える
5-4
注目記事メニューの見栄えを整える
Chapter 6
レスポンシブにする
6-3
パーツの横幅を調整する
6-4
記事の見栄えを整える
6-5
サイト名とナビゲーションメニューを両端に並べる
6-6
モバイル版とPC版のレイアウトを切り替える
6-7
より大きい画面での見栄えを整える
6-8
テキストの自動拡大機能を無効化する
Chapter 7
トップページを作成する
7-1
トップページの作成
7-2
ブロックとパーツを追加する
7-3
ヒーローイメージの画像を表示する
7-4
ヒーローイメージのテキストの見栄えを整える
7-5
リンクをボタンの形にする
7-6
記事一覧の記事を2列に並べたレイアウトにする
7-7
トップページをレスポンシブにする
Chapter 8
テーブルとフォームを作成する
8-1
テーブルを作成する
8-2
投稿フォームを作成する
8-3
投稿フォームの見栄えを整える
記事のデザインアレンジ
画像にテキストを回り込ませたレイアウト
(floatを「left」と指定した場合)
画像にテキストを回り込ませたレイアウト
(floatを「right」と指定した場合)
ネガティブマージンで画像の横幅を大きくする
完成サンプル
(P.311のサイトの構成ファイル)
トップページ
記事ページ
サイトについてページ
お問い合わせページ