関連サイト
本書の関連ページが用意されています。
内容紹介
Webページ制作を取り巻く環境は、ここ数年で大きく変化しています。スマートフォンやタブレットといったモバイルデバイスからのアクセスがPCを凌駕し、それとともにWebページのデザインも１段組みをベースとしたシンプルなものが求められるようになっています。
そこで、本書では古いブラウザに縛られた時代には使い切ることができなかった機能をふんだんに活用し、今どきのWebページをシンプルなステップで形にしていく方法をまとめました。
サンプルサイトの制作工程を6ステップに分け、
CHAPTER1 下準備
CHAPTER2 トップページの作成 - コンテンツ編
CHAPTER3 トップページの作成 - ナビゲーション編
CHAPTER4 コンテンツページの作成
CHAPTER5 記事一覧ページの作成
CHAPTER6 アレンジ
と順に進めていくことで、基本からアレンジの方法まで、効率よくマスターできるカリキュラムとなっています。
本書サポートサイトから学習用のファイルをダウンロードできますので、それを使って学習することができます。
HTML5は2014年に正式勧告がリリースされ、２年が経とうとしていますが、まもなくHTML5.1の勧告もリリースされる予定です。CSSはさまざまな機能がCSS3やCSS4の規格として採り入れられ、策定作業が進められています。
同時に、OSレベルでのサポートの打ち切りなどにより、ブラウザの世代交代も強制的に進んでおり、主要ブラウザは最新のHTML+CSSをフルにサポートした状態になっています。
こうした現状をあらためてみると、
そろそろHTML5+CSS3の真価を発揮させてもいい時期
になったのではないでしょうか。」
（著者「はじめに」より）
巻末にはHTMLとCSSのリファレンスも用意し、学習中に適宜参照できるようになっています。これからWebページ制作を学びはじめる方にも、最新のHTML+CSSに興味がある方にも、これからのWebページ制作に求められるスキルやテクニックをまとめた1冊として、役立てていただければ幸いです。
書誌情報
- 著者: エビスコム
- 発行日: 2016-08-24 (紙書籍版発行日: 2016-08-24)
- 最終更新日: 2016-08-24
- バージョン: 1.0.0
- ページ数: 324ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『これからの「標準」を学ぶ マルチデバイス対応サイト構築』マイナビ出版刊、『これからの「標準」を身につける HTML+CSSデザインレシピ』（同）、『HTML5 スタンダード・デザインガイド』（同）、『CSS3 スタンダード・デザインガイド【改訂第2版】』（同）、『スマートフォンサイトのためのHTML5+CSS3』（同）、『XHTML/HTML+CSS スーパーレシピブック』（同）、『WordPress3 サイト構築スタイルブック』（同）、『WordPress3 デザイン&カスタマイズ スタイルブック』（同）、『Movable Type サイトデザイン&レシピ事典』（同）、『Dreamweaverデザインブック CC2015対応』ソシム刊、『WordPress デザインブック HTML5&CSS3準拠』（同）、『HTML5&CSS3 デザインブック』（同）、『WordPress レッスンブック HTML5&CSS3準拠』（同）、『WordPress ステップアップブック』（同）『HTML5&CSS3 レッスンブック』（同）
目次
CHAPTER1 下準備
- 1-1 １段組みをベースとしたページを最新のHTML/CSSで作成する
- 1-1-1 １段組みをベースとしたWeb ページとは
- レスポンシブWeb デザイン
- セマンティクス
- 1-1-2 最新のHTML/CSS
- 古いブラウザのサポートについて
- 1-1-1 １段組みをベースとしたWeb ページとは
- 1-2 構築するページとサイト
- 1-2-1 Webサイトの構造
- 1-2-2 ページの構造と作成手順
- 1-2-3 ページの配色
- 1-3 Webページのベースを用意する
- 1-3-1 HTMLファイルに記述する設定
- 1-3-2 CSSファイルに記述する設定
- HTML/CSSの編集に使用するテキストエディタ
- ページの表示確認に使用するブラウザ
- さまざまな画面サイズでの表示を簡単に確認する方法
CHAPTER2 トップページの作成 - コンテンツ編
- 2-1 ヒーローイメージ
- 2-1-1 画像に重ねるテキストを表示する
- 2-1-2 Webフォントで表示して字間を調整する
- 2-1-3 ブラウザ画面いっぱいに画像を表示する
- 2-1-4 SVGでロゴ画像を表示する
- 2-1-5 リンクボタンを表示する
- 2-2 概要（アイコン＋テキスト）
- 2-2-1 概要のテキストを表示する
- 2-2-2 アイコンを表示する
- 2-2-3 ３つの概要を横に並べる
- 2-3 概要（画像＋テキスト）
- 2-3-1 画像とテキストを表示する
- 2-3-2 画像とテキストを横に並べてレイアウトする
- 2-4 概要（画像＋テキスト：逆配置）
- 2-4-1 コンテンツCをベースに新しいブロックを作成する
- 2-4-2 画像の横幅を固定して並び順を変更する
CHAPTER3 トップページの作成 - ナビゲーション編
- 3-1 サイト情報
- 3-1-1 サイト情報を表示する
- 3-1-2 フッターのデザインを指定する
- 3-2 フッターメニュー
- 3-2-1 フッターメニューを作成する
- 3-2-2 ３つのメニューを横に並べる
- 3-3 コピーライト
- 3-3-1 コピーライトを表示する
- 3-3-2 フッター内のパーツのレイアウトを調整する
- 3-4 SNSメニュー
- 3-4-1 SNSメニューを表示する
- 3-4-2 SNSメニューのデザインを指定する
- 3-5 ヘッダーのサイト名
- 3-6 ナビゲーションメニュー
- 3-6-1 ナビゲーションメニューを作成する
- 3-6-2 大きい画面ではナビゲーションメニューを横に並べる
- 3-7 トグルボタン
- 3-7-1 トグルボタンを作成する
- 3-7-2 トグルボタンでナビゲーションメニューを開閉する
CHAPTER4 コンテンツページの作成
- 4-1コンテンツページ
- 4-1-1 コンテンツページを作成する
- 4-1-2 記事のデザインを指定する
- 4-1-3 パンくずリストを表示する
- 4-2アバウトページ
- 4-2-1 アバウトページを作成する
- 4-2-2 画像と沿革を表示する
- 4-3お問い合わせページ
- 4-3-1 お問い合わせページを作成する
- 4-3-2 地図を表示する
CHAPTER5 記事一覧ページの作成
- 5-1 カード型（画像＋テキストを上下に配置）
- 5-1-1 記事一覧Aのページを作成する
- 5-1-2 記事の概要を表示する
- 5-1-3 ブラウザ画面の横幅に応じて概要を横に並べて表示する
- 5-2 カード型（画像＋テキストを左右に配置）
- 5-3 サムネイル型（画像＋テキストを重ねて配置）
CHAPTER6 アレンジ
- 6-1 ヘッダーの色をアレンジする
- 6-2 ヘッダーとヒーローイメージを一体化したデザインにする
- 6-3 ヘッダーを画面上部に固定する
- 6-4 関連記事メニューを追加する
- 6-5 メタデータを記述する
- 6-6 ページの基本色をアレンジする
APPENDIX
- HTMLリファレンス
- HTMLの基本文法
- HTMLの基本設定
- メタデータ
- セクション
- コンテンツ
- CSSリファレンス
- CSSの基本文法
- セレクタ
- メディアクエリ
- ボックスモデル
- ボックスの基本設定
- ボックスの種類
- フレキシブルボックスレイアウト
- ポジションレイアウト
- ボックス内のコンテンツのデザイン
- 単位
- 色の値
- 変数
- 最適化
- 主要デバイスの画面サイズ
- 古いブラウザ用の設定