Follow #ソシム販売部Twitterアイコン

  

HTML5&CSS3 ステップアップブック

エビスコム

「CSSグリッド」と「フレキシブルボックス」による
Webデザインがステップ・バイ・ステップでわかる!

定価
3,080円(本体価格 2,800円)
  • 発売日
    2018年1月17日
  • 判型/ページ数
    B5判変形/320ページ(4C)
  • ISBN
    978-4-8206-1134-3

「CSSグリッド」と「フレキシブルボックス」によるWebデザインがステップ・バイ・ステップでわかる!
「CSSグリッド」と「フレキシブルボックス」といったHTML5やCSS3の新機能は、
たった1行の指定で要素を横並びにできたり、要素を並べる順番やサイズを
指定できたりなど、Webデザインの実務を省力化する上で非常に魅力的です。

かつて、ブラウザなどによる表示の違いなどから導入をためらうユーザーが
多かったものの、昨今、主要ブラウザが対応したことで、導入のハードルが
下がっています。

本書では、フレキシブルボックスレイアウトやグリッドレイアウトといった、
HTML5&CSS3の新機能をステップ・バイ・ステップで学べる内容になっています。

HTML5&CSS3 ステップアップブック 目次

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

Chapter 1で作成するサンプル 18
1-1 コンテンツを作成する 20
1-2 グリッドを作成する 30
1-3 コンテンツの配置を指定する 32
1-4 グリッドの行列のサイズを指定する 34
1-5 グリッドを切り替えてレスポンシブにする 36
1-6 パーツのアレンジ 40

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

Chapter 2で作成するサンプル 70
2-1 コンテンツを作成する 72
2-2 グリッドを作成する 86
2-3 コンテンツの配置を指定する 88
2-4 グリッドを切り替えてレスポンシブにする 96
2-5 バーの中身を記事のラインに揃える 102
2-6 入れ子のグリッドでメニューを2段組みにする 108
2-7 パーツのアレンジ 112

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

Chapter 3 で作成するサンプル 146
3-1 コンテンツを作成する 148
3-2 グリッドを作成する 154
3-3 コンテンツの配置を指定する 156
3-4 レスポンシブにする 160
3-5 ヘッダー画像を画面の横幅いっぱいに表示する 162
3-6 キャッチコピーを追加する 164
3-7 ナビゲーションメニューを追加する 174
3-8 SNS メニューを追加する 190
3-9 コンテンツの概要を追加する 202
3-10 ヘッダーとフッターのデザインをアレンジする 214

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

Chapter 4 で作成するサンプル 228
4-1 コンテンツを作成する 230
4-2 <body> のグリッドを作成する 234
4-3 コンテンツの配置を指定する 236
4-4 <article> のグリッドを作成する 238
4-5 記事を構成するパーツの配置を指定する 240
4-6 記事のレイアウトをレスポンシブにする 246
4-7 段落や画像を追加する 248
4-8 画像の配置をアレンジする 254
4-9 画像を重ねてレイアウトする 258
4-10 ドロワーメニューを作成する 276
4-10-1 メニューを追加する
4-11 ページのデザインをアレンジする 298

APPENDIX A 基本パーツの設定 306
APPENDIX B グリッドレイアウトに未対応なブラウザへの対策 310

ダウンロードデータ

本書で解説したサンプルデータをダウンロードできます。 なお、使用方法などに関しては、必ず書籍の該当箇所をご確認の上、ご利用ください。 ダウンロード後、解凍したファイル内に「readme.txt」ファイルなどが含まれる場合は、使用前にこちらもご確認ください。

お問い合わせ

本書に関するお問い合わせは、下記のボタンをクリックしてお問い合わせフォームよりお問い合わせください。

この書籍を問い合わせる

[ この書籍をシェアする ]

関連する書籍

カテゴリから本を探す

シリーズから本を探す

本を探す