６ステップでマスターする　「最新標準」HTML+CSSデザインフレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック

著作者名：エビスコム
価格：3,110円
電子版：3,110円
B5変型判：320ページ
ISBN：978-4-8399-6022-3
発売日：2016年08月24日
サンプル画像を見る

追加しました
お気に入りに追加
購入形態を選択する

内容紹介

フレキシブルボックスレイアウトを使ったレスポンシブWebデザインをきっちり習得！

本書は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的とした書籍です。

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冊として、役立てていただければ幸いです。

購入形態を選択してください。

書籍

3,110円
- 在庫無し
- 8/10～8/15まで夏季休業のため、
  8/16(水)以降順次、配送開始となります。
PDF

3,110円

※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。

電子書籍フォーマットについて

書籍: 3,110円; 在庫無し; 8/10～8/15まで夏季休業のため、
8/16(水)以降順次、配送開始となります。; 数量：; 在庫がないため購入することができません。

他のサイトで購入

書籍を購入する

関連ページ

サポートサイト　https://book.mynavi.jp/supportsite/detail/9784839960223.html

目次

CHAPTER1　下準備
1-1　１段組みをベースとしたページを最新のHTML/CSSで作成する
　　1-1-1　１段組みをベースとしたWeb ページとは
　　　　レスポンシブWeb デザイン
　　　　セマンティクス
　　1-1-2　最新のHTML/CSS
　　　　古いブラウザのサポートについて
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の基本文法
　　セレクタ
　　メディアクエリ
ボックスモデル
　　ボックスの基本設定
　　ボックスの種類
　　フレキシブルボックスレイアウト
　　ポジションレイアウト
　　ボックス内のコンテンツのデザイン
　　単位
　　色の値
　　変数
最適化
主要デバイスの画面サイズ
古いブラウザ用の設定

６ステップでマスターする 「最新標準」HTML+CSSデザイン フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック

内容紹介

購入形態を選択してください。

他のサイトで購入

最近チェックした商品

６ステップでマスターする　「最新標準」HTML+CSSデザインフレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック