HTML5＆CSS3デザイン 現場の新標準ガイド フロントエンドエンジニアのための必須知識と実践
- 著作者名：エビスコム
-
- 書籍：3,289円
- 電子版：3,289円
- B5変型判：368ページ
- ISBN：978-4-8399-6369-9
- 発売日：2017年08月28日
- 備考：初～中級
- Tweet
- mixiチェック
内容紹介
HTML5とCSS3をより深く理解し、使いこなしたい人のためのガイドブック
フロントエンドエンジニアの方や、Web制作に関わっていてHTML5/CSS3を使いこなしたい、と思っている人のためのガイドブックです。
思ったようなデザインをどう実現するか、現在の仕様がどのようになっているか、現時点で何に留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報を凝縮しました。
現場でリファレンスとしてぜひ常備しておきたい、「現在」と「これから」の標準をまとめた1冊。
『HTML5スタンダード・デザインガイド』『CSS3 スタンダード・デザインガイド』『これからの「標準」を身につける HTML+CSSデザインレシピ』等でWebの仕様解説に定評のある著者の手による、渾身の最新刊です。
【内容】
Chapter 1 HTML
Chapter 2 Webページの作成とメタデータ
Chapter 3 コンテンツのマークアップ
Chapter 4 CSSの適用
Chapter 5 ボックスのレイアウト
Chapter 6 フレキシブルボックスレイアウト
Chapter 7 グリッドレイアウト
Chapter 8 テーブル
Chapter 9 テキスト
Chapter 10 エンベディッド・コンテンツ
Chapter 11 フォーム
Chapter 12 特殊効果
続きを読む
充実のラインナップに加え、割引セールも定期的に実施中！
商品を選択する
| フォーマット | 価格 | 備考 | |
|---|---|---|---|
備考
エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『6ステップでマスターする 「最新標準」HTML+CSSデザイン』マイナビ出版刊
『これからの「標準」を学ぶ マルチデバイス対応サイト構築』同上
『これからの「標準」を身につける 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 HTML1-1 HTML5 とセマンティクス
1-2 コンテンツモデル
1-3 HTML5 の構文規則
Chapter2 Webページの作成とメタデータ
2-1 Web ページの基本設定
DOCTYPE 宣言 <!DOCTYPE html>
ルート要素 <html>
メタデータの記述 <head>
コンテンツの記述 <body>
2-2 メタデータ
ページのタイトル <title>
メタデータ <meta>
関連したURL についての情報 <link>
ベースURL <base>
内部スタイルシート <style>
スクリプト <script>
スクリプトが動作しない環境用の情報 <noscript>
テンプレートの情報 <template>
2-3 ボキャブラリーを使ったメタデータの記述
OGP（ The Open Graph protocol）
schema.org
Chapter3 コンテンツのマークアップ
3-1 コンテンツのマークアップ
3-2 セクション
完結したコンテンツ <article>
ナビゲーション <nav>
補足・関連情報 <aside>
汎用的なセクション <section>
3-3 セクションに関する情報
キーとなるワード（見出し・タイトル・表題など） <h1>/<h2>/<h3>/<h4>/<h5>/<h6>
ヘッダー / フッター <header>/<footer>
コンテンツに関する問い合わせ先 <address>
3-4 グルーピング・コンテンツ
パラグラフ <p>
パラグラフレベルの区切り <hr>
整形済みテキスト <pre>
引用 <blockquote>
リスト <ol> / <ul> / <li>
説明リスト <dl> / <dt> / <dd>
フィギュア <figure> / <figcaption>
メインコンテンツ <main>
汎用タグ <div>
3-5 テキストレベル・セマンティクス
リンク <a>
重要 <strong>
強調・強勢 <em>
但し書き・注意 <small>
変更・更新情報 <s>
作品のタイトル・著者名・URL <cite>
引用 <q>
定義する語句 <dfn>
略語 <abbr>
ルビ <ruby>/<rb>/<rt>/<rtc>/<rp>
マシンリーダブルな情報 <data>
日時 <time>
コンピュータ・コード <code>
変数 <var>
コンピュータからの出力内容 <samp>
コンピュータへの入力内容 <kbd>
上付き <sup>
下付き <sub>
学名や慣用句などの語句 <i>
注目してほしい語句 <b>
不明瞭な語句 <u>
ハイライト <mark>
双方向アルゴリズムの隔離 <bdi>
双方向アルゴリズムのオーバーライド <bdo>
汎用タグ <span>
改行タグ <br>
改行を認める箇所 <wbr>
3-6 エディット（編集）
追加したコンテンツ <ins>
削除したコンテンツ <del>
3-7 インタラクティブ
追加情報 <details> / <summary>
コマンドリスト <menu> / <menuitem>
3-8 スクリプト
テンプレートの活用
3-9 グローバル属性
Chapter4 CSSの適用
4-1 HTMLドキュメントのプレゼンテーション
4-2 ボックスとボックスモデル
4-3 プロパティ
4-4 セレクタ
セレクタの記述形式
タイプセレクタ / ユニバーサルセレクタ
属性セレクタ
クラスセレクタ / ID セレクタ
言語疑似クラス
構造疑似クラス
ルート疑似クラス
エンプティ疑似クラス
ダイナミック疑似クラス
ターゲット疑似クラス
インプット疑似クラス
否定疑似クラス
::first-line / ::first-letter 疑似要素
::before / ::after 疑似要素
セレクタの特定性
4-5 メディアクエリ
メディアクエリの記述形式
ビューポートの横幅／高さ／縦横比
ビューポートの向き
解像度（density）
走査方式
グリッドベース
カラー / カラールックアップテーブル / モノクロデバイス
Chapter5 ボックスのレイアウト
5-1 ボックスモデル
マージン margin
パディング padding
ボーダー border
横幅と高さ width / height
5-2 ボックスのレイアウト
基本となるディスプレイタイプ display
アウターディスプレイタイプ
インナーディスプレイタイプ
その他のディスプレイタイプ display
インラインレベルのインナーディスプレイタイプ
特殊なディスプレイタイプ
特定のレイアウトモードで使用するディスプレイタイプ
ブロック
インライン
ランイン
フローレイアウト
フローレイアウト（フロールート）
フレキシブルボックスレイアウト
グリッドレイアウト
テーブルレイアウト
ルビレイアウト
インラインへの埋め込み
リスト
ボックスを構成しない
5-3 特殊なボックス
フロート float
ポジション position
相対配置
絶対配置
固定配置
スティッキー配置
ボックスの重なり順 z-index
シェイプ shape-outside
エクスクルージョン wrap-flow
5-4 ボックスに関する付帯事項
オーバーフローしたコンテンツの表示方法 overflow
仮想的なボックスのコンテンツ content
ボックスのビジビリティ visibility
ボックスの不透明度 opacity
カーソル cursor
アウトライン outline
ボックスの角丸 border-radius
ボックスのドロップシャドウ box-shadow
Chapter6 フレキシブルボックスレイアウト
6-1 フレキシブルボックスレイアウト
6-2 フレックスアイテムの横幅
フレキシビリティ flex
6-3 フレックスアイテムの並び順と並べる方向
フレックスアイテムの並び順 order
フレックスアイテムを並べる方向 flex-direction
フレックスアイテムのマルチライン表示 flex-wrap
6-4 フレックスアイテムの位置揃え
横方向の位置揃え justify-content
縦方向の位置揃え align-items
マルチラインの位置揃え align-content
Chapter7 グリッドレイアウト
7-1 グリッドレイアウト
7-2 グリッドの作成
トラックサイズの指定
grid-template-rows/grid-template-columns
フレキシブルにする単位 fr
最小値・最大値の指定 minmax()
コンテンツに合わせたサイズにする
min-content / max-content / auto / fit-content()
パターンが連続する設定を指定する repeat()
レスポンシブなグリッドを作成する repeat()
自動配置の方向 grid-auto-flow
空セルができないように自動配置する
トラックの拡張（暗黙のトラック）
7-3 ラインの指定によるグリッドアイテムの配置
グリッドアイテムを配置するラインの指定
grid-row-start/grid-row-end/
grid-column-start/grid-column-end
7-4 エリアの指定によるグリッドアイテムの配置
グリッドエリアの作成 grid-template-areas
グリッドアイテムを配置するエリアの指定 grid-area
7-5 グリッドアイテムの間隔
グリッドアイテムの間隔 grid-gap
7-6 グリッドの位置揃え
横方向のグリッドの位置揃え justify-content
縦方向のグリッドの位置揃え align-content
7-7 グリッドアイテムの位置揃え
横方向のグリッドアイテムの位置揃え justify-items
縦方向のグリッドアイテムの位置揃え align-items
justify-self とalign-self による調整
グリッドの設定をまとめて記述する
Edge/IE におけるグリッドレイアウト
Chapter8 テーブル
8-1 テーブルレイアウト
テーブル <table>/<caption>/<tr>/<th>/<td>
テーブルのボックスモデル
複数の行・列にまたがるセルの作成
8-2 テーブルのグループ
列のグループ <colgroup>/<col>
行のグループ <thead>/<tbody>/<tfoot>
8-3 テーブルに関する付帯事項
テーブルの列の横幅の決定方法 table-layout
ボーダーの間隔 border-spacing
空セルの表示 empty-cells
ボーダーの重ね合わせ border-collapse
キャプションの表示位置 caption-side
Chapter9 テキスト
9-1 書式設定
フォントサイズ font-size
フォント font-family
フォントの太さ font-weight
斜体 font-style
フォントの幅 font-stretch
字形 font-variant
行の高さ line-height
書式設定をまとめて記述する font
フォントリソースの指定 @font-face
9-2 行内のコンテンツの位置揃え
行揃え text-align
垂直方向の位置揃え vertical-align
9-3 改行・タブ・スペースのコントロール
改行・タブ・スペースの反映と自動改行の有無 white-space
単語の改行ルール word-break
長い単語の改行ルール overflow-wrap
ハイフネーション hyphens
タブ幅 tab-size
単語の間隔 word-spacing
文字の間隔 letter-spacing
１行目のインデント text-indent
9-4 テキストの装飾
テキストの色 color
テキストトランスフォーム text-transform
下線・上線・取り消し線 text-decoration
圏点 text-emphasis
テキストのドロップシャドウ text-shadow
9-5 テキストのレイアウト
マルチカラムレイアウト columns
段の間隔 column-gap
区切り線 column-rule
複数段にまたがる表示 column-span
段組みの高さの処理 column-fill
横書き・縦書き writing-mode
縦書きの中の文字の向き text-orientation
縦中横 text-combine-upright
Chapter10 エンベディッド・コンテンツ
10-1 エンベディッド・コンテンツ
画像 <img>
画像の選択肢と選択に使用する情報 srcset/sizes 属性
イメージマップ <map>/<area>
サーバーサイドイメージマップ
画像 <picture>/<source>
インラインフレーム <iframe>
オブジェクト <object>
ビデオ / オーディオ <video>/<audio>
テキストトラック <track>
Canvas <canvas>
SVG <svg>
10-2 画像・ビデオの表示エリアへのフィッティング
画像・ビデオの表示エリアへのフィッティング object-fit
画像の表示位置の調整 object-position
10-3 CSS による画像の表示
背景画像 background-image
背景画像の表示位置の基点 background-origin
背景画像のサイズ background-size
背景画像の表示位置 background-position
背景画像の繰り返し background-repeat
背景画像の表示エリア background-clip
背景画像の固定対象 background-attachment
背景色 background-color
背景の設定をまとめて指定する background
ボーダー画像 border-image
分割されたインラインボックスの背景とボーダー box-decoration-break
グラデーション画像を作成する関数
CSS で画像の選択肢を用意する image-set()
画像の拡大処理のアルゴリズム image-rendering
Chapter11 フォーム
11-1 フォーム
フォーム <form>
11-2 フォームコントロール
入力フィールド / ボタン <input>
テキストフィールド
日時のコントロール
数値・色のコントロール
選択肢
特殊なコントロール
ボタン
ボタン <button>
プルダウン型の選択肢 <select>/<option>
複数行のテキストフィールド <textarea>
11-3 フォームコントロールの属性
Chapter12 特殊効果
12-1 トランスフォーム
2D トランスフォーム transform
変形処理の実行順と処理結果
ローカル座標系の原点の位置 transform-origin
2D の変換マトリクス（変換行列）
3D トランスフォーム transform
ローカル座標系の原点の位置 transform-origin
３D の変換マトリクス（変換行列）
裏面の表示 backface-visibility
子要素の透視投影 perspective/perspective-origin
３次元の変換処理の子要素への適用 transform-style
12-2 アニメーション
トランジション transition
キーフレームによるアニメーション animation
12-3 エフェクト
フィルタ filter
マスク mask
クリッピングパス clip-path
ブレンド mix-blend-mode
背景画像のブレンド background-blend-mode
