関連サイト
本書の関連ページが用意されています。
内容紹介
本書では、モバイルファースト＆レスポンシブで、サンプルサイトを制作していく過程を実際に操作しながら学んでいきます。サイトはパーツ単位で作成し、章ごとに1つのパーツを作成していきます。
Chpater1 ヘッダー
Chpater2 ヒーロー
Chapter3 画像とテキスト
Chpater4 記事一覧
Chapter5 フッター
Chapter6 記事
Chapter7 プラン＆フッター
Chapter8 ナビゲーション
それぞれのパーツの作成にあたっては、パーツのレイアウトを実現するCSSの選択肢を示し、場面に応じて適切なものを選択して、作成していきます。
章末には他の選択肢やそのバリエーションをまとめて解説していますので、デザインやレイアウトの技を幅広く身につけることができるでしょう。
HTMLは最新の「HTML Living Standard」に準拠し、CSSでは従来から活用されてきたメディアクエリの他、Flexbox、CSS Gridなどのレイアウトのコントロール、CSS関数を使いこなします。
「本書では、新しいHTML&CSSに沿った形で『レスポンシブWebデザイン』を見直し、ページを作成しながらさまざまな選択肢を比較検討していきます。
サンプルのページを作成するばかりでなく、ページを実現するためのバリエーションを増やして、これからのWeb 制作に活用していただければと思います。』（著者「はじめに」より）
演習用ファイルがダウンロードできますので、ぜひ本書で最新のHTML&CSSコーディングを体感してください。
【特典付き】
・特典PDF『HTML&CSS 簡易リファレンス』
本書のサポートサイトから入手してください。
書誌情報
- 著者: エビスコム
- 発行日: 2021-09-16 (紙書籍版発行日: 2021-09-16)
- 最終更新日: 2021-09-16
- バージョン: 1.0.0
- ページ数: 320ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『HTML5＆CSS3デザイン 現場の新標準ガイド【第２版】』マイナビ出版刊、『Webサイト高速化のための 静的サイトジェネレーター活用入門』同上、『CSSグリッドレイアウト デザインブック』同上、『WordPressレッスンブック 5.x対応版』ソシム刊、『フレキシブルボックスで作るHTML5&CSS3レッスンブック』同上、『CSSグリッドで作るHTML5&CSS3レッスンブック』同上、『HTML&CSS コーディング・プラクティスブック 1～7』エビスコム電子書籍出版部刊、『グーテンベルク時代のWordPressノート テーマの作り方（入門編）』同上、『グーテンベルク時代のWordPressノート テーマの作り方（ランディングページ＆ワンカラムサイト編）』同上
目次
Introduction イントロダクション
- レスポンシブWeb デザインとは
- ワンカラムレイアウトの特徴
- ワンカラムレイアウトのコーディング
- これからのレスポンシブWebデザインで重要なCSS
Setup 下準備
- HTML とCSS のファイルを準備する
- Web フォントを準備する
- アイコンを準備する
- Chrome のデベロッパーツールを準備する
Chpater1 ヘッダー
- ヘッダー
- 「ヘッダー」パーツはこう表示したい
- STEP 1-1 ヘッダーをマークアップする
- STEP 1-2 ヘッダーをバーの形にする
- STEP 1-3 サイト名とボタンを両端に配置する
- STEP 1-4 横幅と左右の余白を指定する
- STEP 1-5 サイト名とボタンの表示を整える
- 両端に配置するレイアウト【Flexbox で設定するケース（１）】
- 両端に配置するレイアウト【Flexbox で設定するケース（２）】
- 両端に配置するレイアウト【CSS Grid で設定するケース】
- 横幅と左右の余白【width で調整するケース】
- 横幅と左右の余白【padding で調整するケース】
- 横幅と左右の余白【CSS Grid で調整するケース】
- ヘッダーを画面上部に固定するレイアウト【position:sticky で設定するケース】
Chpater2 ヒーロー
- ヒーロー
- 「ヒーロー」パーツはこう表示したい
- STEP 2-1 ヒーローをマークアップする
- STEP 2-2 ヒーローイメージを表示する
- STEP 2-3 テキストを縦横中央に配置する
- STEP 2-4 キャッチコピーと文章の表示を整える
- STEP 2-5 キャッチコピーのフォントサイズを画面幅に合わせて変化させる
- STEP 2-6 ボタンの表示を整える
- 縦横中央に配置するレイアウト【CSS Grid で設定するケース】
- 縦横中央に配置するレイアウト【Flexbox で設定するケース】
- 画像にテキストを重ねるレイアウト【背景画像で表示するケース】
- 画像にテキストを重ねるレイアウト【<img> で表示するケース】
- 画面幅に合わせて変わるフォントサイズ【clamp() で設定するケース】
- テキストの拡大表示とアクセシビリティ
Chapter3 画像とテキスト
- 画像とテキスト
- 「画像とテキスト」パーツはこう表示したい
- STEP 3-1 画像とテキストをマークアップする
- STEP 3-2 画像の表示を整える
- STEP 3-3 パーツの背景色と上下の余白を整える
- STEP 3-4 タイトルとサブタイトルの表示を整える
- STEP 3-5 縦並びと横並びを切り替える
- STEP 3-6 画像とテキストの間隔を調整する
- STEP 3-7 テキストの最小幅を指定する
- STEP 3-8 パーツを増やして画像とテキストの配置を逆にする
- 画像とテキストを横並びにするレイアウト【Flexbox で設定するケース】
- 画像とテキストを横並びにするレイアウト【CSS Grid で設定するケース】
Chpater4 記事一覧
- 記事一覧
- 「記事一覧」パーツはこう表示したい
- STEP 4-1 記事一覧をマークアップする
- STEP 4-2 パーツの背景色と上下の余白を整える
- STEP 4-3 見出しの表示を整える
- STEP 4-4 見出しの配置を整える
- STEP 4-5 記事を追加する
- STEP 4-6 記事をタイル状に並べる
- STEP 4-7 画像を３：２の縦横比に揃える
- STEP 4-8 記事のタイトルと概要文の表示を整える
- タイル状に並べるレイアウト【CSS Grid で設定するケース】
- タイル状に並べる列の数がコンテナの横幅に応じて変わるレイアウト【CSS Grid で設定するケース】
- タイル状に並べるレイアウト【Flexbox で設定するケース】
- タイル状に並べる列の数がコンテナの横幅に応じて変わるレイアウト【Flexbox で設定するケース】
- 画像によるレイアウトシフトを防ぐ【<img> のwidth/height 属性】
Chapter5 フッター
- フッター
- 「フッター」パーツはこう表示したい
- STEP 5-1 フッターをマークアップする
- STEP 5-2 フッターの基本的な表示を整える
- STEP 5-3 SNS メニューの表示を整える
- STEP 5-4 アイコンを円の中に表示する
- STEP 5-5 テキストメニューの表示を整える
- STEP 5-6 ２列×３行のグリッドを作成する
- STEP 5-7 SNS メニューのみを右側に配置する
- STEP 5-8 アイテムを両端に配置する
- STEP 5-9 トップページ全体の表示を確認する
- 自在に配置を変更するレイアウト【CSS Grid で設定するケース】
- 自在に配置を変更するレイアウト【Flexbox で設定するケース】
- 中身に合わせたサイズで横並びにするレイアウト【Flexbox で設定するケース】
- 中身に合わせたサイズで横並びにするレイアウト【CSS Grid で設定するケース】
- クリッピングパスで切り抜く【clip-path】
Chapter6 記事
- 記事
- 「記事」パーツはこう表示したい
- STEP 6-1 コンテンツページを作成する
- STEP 6-2 記事をマークアップする
- STEP 6-3 記事の背景色と下の余白サイズを整える
- STEP 6-4 ヘッダー画像の表示を整える
- STEP 6-5 ヘッダー画像とタイトルの間隔を調整する
- STEP 6-6 タイトルと本文の最大幅を調整する
- STEP 6-7 タイトルと本文のフォントサイズを調整する
- STEP 6-8 本文の構成要素の間隔をブラウザ標準の設定にする
- STEP 6-9 段落の間隔を大きくする
- 記事本文のレイアウト【margin で設定するケース】
- 記事本文のレイアウト【CSS Grid / Flexbox で設定するケース】
- 複数の適用先をまとめて指定【:is() で指定するケース】
- 複数の適用先をまとめて指定【:where() で指定するケース】
- レスポンシブイメージ【<img> のsrcset/sizes 属性】
- レスポンシブイメージ【<picture> とWebP】
Chapter7 プラン＆フッター
- プラン＆フッター
- 「プラン」パーツはこう表示したい
- STEP 7-1 プランをマークアップする
- STEP 7-2 パーツの基本的な表示を整える
- STEP 7-3 プランを追加する
- STEP 7-4 カード型のデザインにして並べる
- STEP 7-5 カード内のテキストの表示を整える
- STEP 7-6 カード内のボタンの表示を整える
- STEP 7-7 横並びにしたカードの価格とボタンの位置を揃える
- STEP 7-8 フッターを追加する
- STEP 7-9 コンテンツページ全体の表示を確認する
- カード型UI のレイアウト【CSS Grid で設定するケース】
- カード型UI のレイアウト【Flexbox で設定するケース】
- カードの中身を上下に揃えて配置するレイアウト【Flexbox で設定するケース】
- カードの中身を上下に揃えて配置するレイアウト【CSS Grid で設定するケース】
- 画像の遅延読み込み【<img> のloading 属性】
Chapter8 ナビゲーション
- ナビゲーション
- 「ナビゲーション」はこう表示したい
- STEP 8-1 メニューを追加する
- STEP 8-2 メニューの表示を整える
- STEP 8-3 ボタンクリックでメニューを表示する
- STEP 8-4 閉じるボタンを用意する
- STEP 8-5 PC 版のメニューの表示を整える
- STEP 8-6 コンテンツページのメニューを設定する
- オーバーレイの形で表示するレイアウト【position で設定するケース】
- ハンバーガーメニューのボタンのアニメーション
- 各種オンラインチェックツール