HTML5&CSS3デザインブック
エビスコム
「レスポンシブWebデザイン」で、レイアウトを自在に操るための最新技法を身につける!
- 定価
- 2,860円(本体価格 2,600円)
- 発売日
- 2014年10月28日
- 判型/ページ数
- B5変形/320ページ(オール4C)
- ISBN
- 978-4-88337-964-4
PCだけでなくスマートフォンやタブレットなど多様なデバイスに対応することが、Webデザイン、Web制作の標準になりつつあります。そのためには、PCサイトを作ってから、スマートフォンなどに対応するのではなく、最初からどのデバイスにも対応できるデザインやレイアウトを考えることが重要です。
本書ではそういったスキルがレッスン形式のステップバイステップで身につくように構成しました。
●基礎
レイアウトの根本となるボックスの並べ方をマスターし、Webページにおける段組みを自在にコントロールする手法を身につけます。
●実践
「ブログ・ニュース系サイト」と「ビジネス系サイト」の実例サイトを、1からパーツを組み立てながら作成していきます。
●応用
マルチデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニックや実践で役立つTIPSを学びます。
Chapter 1 Webページにおける段組み
1-1 Webページにおける段組み
1-2 ボックスを横に並べる
1-3 ボックスを分割する
1-4 ボックスの横幅を指定する
1-5 ボックスの並び順を指定する
1-6 レスポンシブWebデザインを設定する
Chapter 2 Webページを作成する準備
2-1 パーツの準備
2-2 Webページの準備
Chapter 3 ブログ・ニュース系サイトのコンテンツページ
3-1 レイアウトの基本構造を作る
3-2 ボックスの中にコンテンツを入れる
3-3 レイアウトの調整を行う
3-4 レスポンシブWebデザインの調整を行う
3-5 パーツの追加と修正
3-6 ナビゲーションバーとフッターを横幅いっぱいに表示する
Chapter 4 ブログ・ニュース系サイトのトップページ
4-1 トップページの作成
4-2 パーツの追加と修正
Chapter 5 ビジネスサイト風のトップページ
5-1 レイアウトの基本構造を作る
5-2 ボックスの中にコンテンツを入れる
5-3 レイアウトの調整を行う
5-4 レスポンシブWebデザインの調整を行う
5-5 パーツの追加と修正
5-6 ナビゲーションメニューをトグル型にする
Chapter 6 ビジネスサイト風のコンテンツページ
6-1 コンテンツページの作成
6-2 パーツの追加と修正
APPENDIX Internet Explorer 8に対応する
段組み&パーツ索引
キーワード索引
ダウンロードデータ
本書で解説したサンプルデータをダウンロードできます。
なお、使用方法などに関しては、必ず書籍の該当箇所をご確認の上、ご利用ください。
ダウンロード後、解凍したファイル内に「readme.txt」ファイルなどが含まれる場合は、使用前にこちらもご確認ください。
(約13.1MB。zip形式で圧縮してありますので、ダウンロード後解凍してください)
正誤情報
- 2015.07.24当書籍について、現在以下の記述ミスが発見されております。 大変ご迷惑をおかけしますが、以下をご参照いただきますよう、よろしくお願いいたします。
P71の手順1「マークアップ」の3行目 - 2015.07.28P252の左側上部の吹き出しの赤字のコメント
- 2015.07.29P90の左側リストの2行目と3行目の間
- 2015.09.08P162の右側リスト、P165の左側リスト
- 2015.10.06P257の上のリスト
- 2015.10.13P297の下段リスト、P303の下段リスト
- 2015.12.19P249の下段リスト、P251のリスト
- 2016.02.03P227の本文の上から6行目
- 2017.01.05P111の下のリスト
- 2020.04.13P135の本文7行目
当書籍について、現在以下の記述ミスが発見されております。 大変ご迷惑をおかけしますが、以下をご参照いただきますよう、よろしくお願いいたします。
P71の手順1「マークアップ」の3行目
誤:…クラス名を「copy」と指定しています。
↓
正:…クラス名を「copyright」と指定しています。
P252の左側上部の吹き出しの赤字のコメント
誤:BOX4
↓
正:BOX6
P90の左側リストの2行目と3行目の間
誤:<aside class=”sidemenu”>
<ul>
↓
正:<aside class=”sidemenu”>
<h1>特集記事</h1>
<ul>
P162の右側リスト、P165の左側リスト
P162の右側リストの上から12行目
誤:<div class=”box5-innder”>
↓
正:<div class=”box5-inner”>
P165の左側リストの上から19行目
誤:<div class=”box5-innder”>
↓
正:<div class=”box5-inner”>
P257の上のリスト
P257の上のリストの12行目
誤:margin-bottom: 20px;
↓
正:margin-bottom: 0;
P257の上のリストの16行目
誤:margin-bottom: 20px
↓
正:margin-bottom: 0
P297の下段リスト、P303の下段リスト
P297の下段リストの右側上から1行目~2行目
誤:.kiji .kiji {max-width: 100%;
height: auto}
↓
正:この2行を削除
P303の下段リストの上から1行目~2行目
誤:.kiji .kiji {max-width: 100%;
height: auto}
↓
正:この2行を削除
P249の下段リスト、P251のリスト
P249の下段リストの上から8行目
誤:.follow p
↓
正:.follow-info
P251のリストの上から8行目
誤:.follow p
↓
正:.follow-info
P227の本文の上から6行目
誤:…margin-rightを「60px」に指定しています。
↓
正:…margin-leftを「60px」に指定しています。
P111の下のリスト
P111の下のリストの一番下のコメント(赤字反転部分)
誤:2つ目のボックス BOX4-1
↓
正:2つ目のボックス BOX4-2
P135の本文7行目
P135の本文7行目
誤:margin-right
↓
正:margin-left
お問い合わせ
本書に関するお問い合わせは、下記のボタンをクリックしてお問い合わせフォームよりお問い合わせください。