HTML5&CSS3デザイン 現場の新標準ガイド | マイナビブックス

HTML5&CSS3デザイン 現場の新標準ガイド フロントエンドエンジニアのための必須知識と実践

  • 著作者名:エビスコム
    • 書籍:3,289円
    • 電子版:3,289円
  • B5変型判:368ページ
  • ISBN:978-4-8399-6369-9
  • 発売日:2017年08月28日
  • 備考:初~中級
  • 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 特殊効果

続きを読む

電子版の購入は姉妹サイト「IT書籍ストア Manatee」がオススメ!
充実のラインナップに加え、割引セールも定期的に実施中!

商品を選択する

フォーマット 価格 備考

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

  

備考

エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、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 HTML
1-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
   1行目のインデント 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
   3D の変換マトリクス(変換行列)
   裏面の表示 backface-visibility
   子要素の透視投影 perspective/perspective-origin
   3次元の変換処理の子要素への適用 transform-style
12-2 アニメーション
   トランジション transition
   キーフレームによるアニメーション animation
12-3 エフェクト
   フィルタ filter
   マスク mask
   クリッピングパス clip-path
   ブレンド mix-blend-mode
   背景画像のブレンド background-blend-mode
 

最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにCCCMKホールディングス株式会社(以下、「MKHD」といいます)へ提供します。

  <提供目的>:MKHDの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、MKHDに提供された、以下の情報の利用については、MKHDの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(https://tsite.jp/contact/index.pl )

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?