できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典

¥1,680+税

品種名
書籍
発売日
2015/3/2
ページ数
416
サイズ
B6判
著者
小川 裕子 著/加藤 善規 著/できるシリーズ編集部 著
ISBN
9784844337393

HTML5とCSS3/2.1のタグとプロパティの使い方はこの1冊でOK!

2014年10月に正式な仕様が勧告されたHTML5の要素、および最新のブラウザーで実装されたCSS3のプロパティ(CSS2.1を含む)の使い方を解説した、手元に置いても邪魔にならないコンパクトな1冊です。HTML5編では、定番の要素はもちろん、定義が変更された要素や新しい要素、さらにHTML 5.1で策定中の要素を含めた情報をしっかりと解説。CSS3/2.1編では、いつも使うおなじみのプロパティから新しく登場したプロパティまで、多くのブラウザーで実装されている機能について扱っています。調べたい項目は、各インデックスからさっと引いてすぐに見つけられます。

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

詳細

著者プロフィール

小川裕子

Webサイト制作を行うデジパ株式会社所属のマークアップエンジニア。HTML、CSSによるコーディング業務から、CMSの導入・カスタマイズまで、制作業務全般に携わる。「ディレクターからの指示がなくても、かゆいところに手が届くように」がモットー。

加藤善規

フリーランスによるWebサイト制作業務などを経て、2004年よりWebサイト制作を行うデジパ株式会社に所属。同社取締役 クリエイティブ事業部マネージャー。2014年に、Webサイトの構築・運営を支援するバーンワークス株式会社を設立、同社代表取締役に就任。個人活動としてセミナーでの講演、執筆も行う。

ページイメージ

 

 

目次

第1章 基本構造
 ルート要素を表す[html]
 メタデータのあつまりを表す[head]
 文書の内容を表す[body]
 文書のメタデータを表す[meta]
 文書のタイトルを表す[tle]
 基準となるURLを指定する[base]
 文書を他の外部リソースと関連付ける[link]
 スタイル情報を記述する[style]
 クライアントサイドスクリプトのコードを埋め込む[script]
 スクリプトが無効な環境の内容を表す[noscript]
 スクリプトが利用するHTMLの断片を定義する[template]

第2章 セクションと見出し
 主要なコンテンツを表す[main]
 独立した記事セクションを表す[article]
 文書のセクションを表す[section]
 主要なナビゲーションを表す[nav]
 補足情報を表す[aside]
 セクションの見出しを表す[h1]
 ヘッダーを表す[header]
 フッターを表す[footer]
 連絡先情報を表す[adress]

第3章 段落と箇条書き
 段落を表す[p]
 段落単位での引用を表す[blockquote]
 序列リストを表す[ol]
 順不同リストを表す[ul]
 リストの項目を表す[li]
 定義リストを表す[dl]
 定義リストの語句を表す[dt]
 定義リストの説明文を表す[dd]
 写真などのまとまりを表す[figure]
 写真などにキャプションを付与する"[figcaption]
 整形済みテキストを表す[pre]
 段落の区切りを表す[hr]
 フローコンテンツをまとめる[div]

第4章 テキストの定義
 リンクを設置する[a]
 強調したいテキストを表す[em]
 重要なテキストを表す[strong]
 特別なテキストを表す[b]
 質が異なるテキストを表す[i]
 ハイライトされたテキストを表す[mark]
 テキストをラベル付する[u]
 細目や注釈のテキストを表す[small]
 無効なテキストを表す[s]
 作品のタイトルを表す[cite]
 語句単位での引用を表す[q]
 定義語を表す[dfn]
 略語を表す[abbr]
 日時や時刻、経過時間を表す[time]
 さまざまなデータを表す[data]
 ルビを表す[ruby]
 ルビテキストを表す[rt]
 ルビテキストを囲む括弧を表す[rp]
 ルビの対象テキストを表す[rb]
 ルビテキストのあつまりを表す[rtc]
 上付き・下付きテキストを表す[sup/sub]
 コンピューター言語のコードを表す[code]
 変数を表す[var]
 入力テキストを表す[kbd]
 出力テキストの例を表す[samp]
 テキストの書字方向を指定する[bdo]
 書字方向が異なるテキストを表す[bdi]
 改行を表す[br]
 折り返し可能な箇所を指定する[wbr]
 フレーズをグループ化する[span]
 追記、削除されたテキストを表す[ins/del]

第5章 画像/音声/動画
 画像を埋め込む[img]
 クリッカブルマップを表す[map]
 クリッカブルマップにおける領域を指定する[area]
 音声ファイルを埋め込む[audio]
 動画ファイルを埋め込む[vido]
 テキストトラックを埋め込む[track]
 選択可能なファイルを複数指定する[source]
 アプリケーションやコンテンツを埋め込む[embed]
 他のHTML文書を埋め込む[iframe]
 埋め込まれた外部リソースを表す[object]
 外部リソースが利用するパラメーターを与える[param]
 グラフィック描画領域を提供する[canvas]
 レスポンシブ・イメージを実現する[image]

第6章 テーブル
 表組みを表す[table]
 表組みのタイトルを表す[caption]
 表組みの行を表す[tr]
 表組みのセルを表す[td]
 表組みの見出しセルを表す[th]
 表組みのヘッダー部分の行グループを表す[thead]
 表組みの本体部分の行グループを表す[tbody]
 表組みのフッター部分の行グループを表す[tfoot]
 表組みの列グループを表す[colgroup]
 表組の列を表す[col]

第7章 フォーム
 フォームを表す[form]
 入力コントロールを表示する[input]
 送信ボタンを設置する[type=submit]
 画像形式の送信ボタンを設置する[type=image]
 入力内容のリセットボタンを設置する[type=reset]
 閲覧者には表示しないデータを表す[type=hidden]
 1行のテキスト入力欄を設置する[type=text]
 検索キーワードの入力欄を設置する[type=search]
 電話番号の入力欄を設置する[type=tel]
 URLの入力欄を設置する[type=url]
 メールアドレスの入力欄を設置する[type=email]
 パスワードの入力欄を設置する[type=password]
 日時の入力欄を設置する[type=datetime]
 月の入力欄を設置する[type=month]
 週の入力欄を設置する[type=week]
 日付の入力欄を設置する[type=date]
 時刻の入力欄を設置する[type=time]
 数値の入力欄を設置する[type=number]
 おおまかな数値の入力欄を設置する[type=range]
 チェックボックスを設置する[type=chechbox]
 ラジオボタンを設置する[type=radio]
 送信するファイルの選択欄を設置する[type=file]
 スクリプト言語を起動するためのボタンを設置する[type=bottun]
 RGBカラーの入力欄を設置する[type=color]
 ボタンを設置する[button]
 複数行にわたるテキスト入力欄を設置する[textarea]
 プルダウンメニューを表す[select]
 選択肢を表す[option]
 選択肢のグループを表す[optgroup]
 入力候補を提供する[datalist]
 入力コントロールにおける項目名を表す[label]
 入力コントロールの内容をまとめる[fieldset]
 入力コントロールの内容グループに見出しを付ける[legend]
 公開鍵の鍵ペアを生成する[keygen]
 計算の出力結果を表す[output]
 進捗状況を表す[progress]
 特定の範囲にある数値を表す[meter]

第8章 インタラクティブ
 操作可能なウィジットを表す[details]
 ウィジット内の項目の要約や説明文を表す[summary]
 操作メニューを表す[menu]
 操作メニューの項目を表す[menuitem]
 ダイアログを表す[dialog]

第9章 HTMLの基礎知識
 HTMLの基本書式
 HTMLの基本構造
 ブラウジングコンテキスト
 グローバル属性とイベントハンドラ属性
 HTML5の関連仕様について
 カテゴリーとコンテンツモデル
 セクションとアウトライン

CSS編
第1章 セレクタ
 指定した要素にスタイルを適用する[要素名]
 すべての要素にスタイルを適用する[*]
 指定したクラス名を持つ要素にスタイルを適用する[要素名.クラス名]
 指定したID 名を持つ要素にスタイルを適用する[要素名#ID名]
 子孫要素にスタイルを適用する[要素名A 要素名B]
 子要素にスタイルを適用する[要素名A > 要素名B]
 直後の要素にスタイルを適用する[要素名A + 要素名B]
 弟要素にスタイルを適用する[要素名A 〜 要素名B]
 指定した属性を持つ要素にスタイルを適用する[要素名[属性]]
 指定した属性と属性値を持つ要素にスタイルを適用する[要素名[属性="属性値"]]
 指定した属性値を含む要素にスタイルを適用する[要素名[属性~="属性値"]]
 指定した文字列で始まる属性値を持つ要素にスタイルを適用する[要素名[属性^="属性値"]]
 指定した文字列で終わる属性値を持つ要素にスタイルを適用する[要素名[属性$="属性値"]]
 指定した文字列を含む属性値を持つ要素にスタイルを適用する[要素名[属性*="属性値"]]
 指定した文字列がハイフンの前にある属性値を持つ要素にスタイルを適用する[要素名[属性|="属性値"]]
 n番目の子要素にスタイルを適用する[要素名:nth-child(n)]
 n番目の子要素にスタイルを適用する(同一要素のみ)[要素名:nth-of-type(n)]
 最後からn番目の子要素にスタイルを適用する[要素名:nth-last-child(n)]
 最後からn番目の子要素にスタイルを適用する(同一要素のみ)[要素名:nth-last-of-type(n)]
 最初の子要素にスタイルを適用する[要素名:first-child]
 最初の子要素にスタイルを適用する(同一要素のみ)[要素名:first-of-type]
 最後の子要素にスタイルを適用する[要素名:last-child]
 最後の子要素にスタイルを適用する(同一要素のみ)[要素名:last-of-type]
 唯一の子要素にスタイルを適用する[要素名:only-child]
 唯一の子要素にスタイルを適用する(同一要素のみ)[要素名:only-of-type]
 子要素を持たない要素にスタイルを適用する[要素名:empty]
 文書のルート要素にスタイルを適用する[要素名:root]
 閲覧者が未訪問のリンクにスタイルを適用する[a:link]
 閲覧者が訪問済みのリンクにスタイルを適用する[a:visited]
 アンカーリンクの移動先となる要素にスタイルを適用する[要素名:target]
 特定の言語コードを指定した要素にスタイルを適用する[要素名:lang(言語)]
 有効な要素にスタイルを適用する[要素名:enabled]
 無効な要素にスタイルを適用する[要素名:disabled]
 チェックされた要素にスタイルを指定する[要素名:checked]
 要素の1行目にのみスタイルを適用する[要素名::first-line]
 要素の1文字目にのみスタイルを適用する[要素名::first-letter]
 要素の内容の前後に指定したコンテンツを挿入する[要素名::before/擬似要素 要素名::after]
 選択された要素にスタイルを適用する[要素名:selection]
 指定した条件を除いて要素にスタイルを適用する[要素名:not(s)]
 アクティブになった要素にスタイルを適用する[要素名:active]
 マウスポインターが重ねられた要素にスタイルを適用する[要素名:hover]
 フォーカスされている要素にスタイルを指定する[要素名:focus]

第2章 フォント/テキスト
 フォントを指定する[font-family]
 フォントのスタイルを指定する[font-style]
 フォントのスモールキャップを指定する[font-variant]
 フォントの太さを指定する[font-weight]
 フォントのサイズを指定する[font-size]
 行の高さを指定する[line-height]
 フォントの行と高さをまとめて指定する[font]
 フォントの幅を指定する[font-stretch]
 OpenTypeフォントの機能の有効・無効を指定する[font-feature-settings]
 Webフォントの利用を指定する[@font-face]
 英文字の大文字や小文字の表示方法を指定する[text-transform]
 文章の揃え位置を指定する[text-align]
 文章の均等割付の形式を指定する[text-justify]
 文章の最終行の揃え位置を指定する[text-align-last]
 ボックスに収まらない文章の表示方法を指定する[text-overflow]
 行内やセル内の縦方向の揃え位置を指定する[vertical-align]
 文章の1行目の字下げ幅を指定する[text-indent]
 文字の間隔を指定する[letter-spacing]
 単語の間隔を指定する[word-spacing]
 タブの表示幅を指定する[tab-size]
 スペース、タブ、改行の表示方法を指定する[white-space]
 文章の改行方法を指定する[word-break]
 改行の禁則処理を指定する[line-break]
 単語の途中での改行を指定する[overflow-wrap/word-wrap]
 単語の途中での改行におけるハイフンを指定する[hyphens]
 文字を記述する方向を指定する[direction]
 文字の書字方向の上書き方法を指定する[unicode-bidi]
 縦書き、または横書きを指定する[writing-mode]
 文字に傍線を引く[text-decoration-line]
 傍線の色を指定する[text-decoration-color]
 傍線のスタイルを指定する[text-decoration-style]
 文字の傍線をまとめて指定する[text-decoration]
 傍点のスタイルと形を指定する[text-emphasis-style]
 傍点の色を指定する[text-emphasis-color]
 文字の傍点をまとめて指定する[text-emphasis]
 傍点の位置を指定する[text-emphasis-position]
 文字の影を指定する[text-shadow]
 リストマーカーの画像を指定する[list-style-image]
 リストマーカーの種類を指定する[list-style-type]
 リストマーカーの位置を指定する[list-style-position]
 リストマーカーをまとめて指定する[list-style]
 文字の色を指定する[color]

第3章 色/背景/ボーダー
 要素の背景色を指定する[background-color]
 要素の背景画像を指定する[background-image]
 背景画像の繰り返しを指定する[background-repeat]
 スクロールしたときの背景画像の表示方法を指定する[background-attachment]
 背景画像を表示する水平・垂直位置を指定する[background-position]
 背景画像の表示サイズを指定する[background-size]
 背景画像を表示する基準位置を指定する[background-origin]
 背景画像を表示する領域を指定する[background-clip]
 背景のプロパティをまとめて指定する[background]
 色の透明度を指定する[opacity]
 線形のグラデーションを表示する[linear-gradient]
 円形のグラデーションを表示する[radial-gradient]
 線形のグラデーションを繰り返して表示する[repeating-liner-gradient]
 円形のグラデーションを繰り返して表示する[repeating-radial-gradient]
 ボーダーのスタイルを指定する[border-style系]
 ボーダーのスタイルをまとめて指定する[border-style]
 ボーダーの幅を指定する[border-width系]
 ボーダーの幅をまとめて指定する[border-width]
 ボーダーの色を指定する[border-color系l]
 ボーダーの色をまとめて指定する[border-color]
 ボーダーの各辺をまとめて指定する[border系]
 ボーダーをまとめて指定する[border]
 ボーダーの角丸を指定する[border-radius系]
 ボーダーの角丸をまとめて指定する[border-radius]
 ボーダーに利用する画像を指定する[border-image-source]
 ボーダー画像の幅を指定する[border-image-width]
 ボーダーが画像の分割位置を指定する[border-image-slice]
 ボーダー画像の繰り返しを指定する[border-image-repeat]
 ボーダー画像の領域を広げるサイズを指定する[border-image-outset]
 ボーダー画像をまとめて指定する[border-image]

第4章 ボックス
 分割されたボックスの表示方法を指定する[box-shadow]
 ボックスの影を指定する[box-decoration-break]
 ボックスサイズの算出方法を指定する[box-sizing]
 ボックスの幅と高さを指定する[width/height]
 ボックスの幅と高さの最大値を指定する[max-width/max-height]
 ボックスの幅と高さの最小値を指定する[min-width/min-height]
 ボックスに収まらない内容の表示方法を指定する[overflow]
 ボックスに収まらない内容の表示方法を個別に指定する[overflow-x/overflow-y]
 ボックスのマージンの幅を指定する[margin系]
 ボックスのマージンの幅をまとめて指定する[margin]
 ボックスのパディングの幅を指定する[padding系]
 ボックスのパディングの幅をまとめて指定する[padding]
 ボックスのアウトラインのスタイルを指定する[outline-style]
 ボックスのアウトラインの幅を指定する[outline-width]
 ボックスのアウトラインの色を指定する[outline-color]
 ボックスのアウトラインをまとめて指定する[outline]
 アウトラインとボーダーの間隔を指定する[outline-offset]
 ボックスのサイズ変更の可否を指定する[resize]
 ボックスの種類を指定する[display]
 ボックスの配置方法を指定する[position]
 ボックスの配置位置を指定する[top/right/bottom/left]
 ボックスの回り込み位置を指定する[float]
 ボックスの回り込みを解除する[clear]
 ボックスの重ね順を指定する[z-index]
 ボックスの表示・非表示を指定する[visibility]
 ボックスを部分的に切り抜いて表示する[clip]
 表組みのレイアウト方法を指定する[table-layout]
 表組み内のボーダーの表示形式を指定する[border-collapse]
 表組み内のボーダーの間隔を指定する[border-spacing]
 空白セルのボーダーの表示方法を指定する[empty-cells]
 表組みのタイトルの表示位置を指定する[caption-side]

第5章 段組み
 段組みの列数を指定する[column-count]
 段組みの列幅を指定する[column-width]
 段組みの列幅と列数をまとめて指定する[columns]
 段組みの間隔を指定する[column-gap]
 段組みをまたがる要素を指定する[column-span]
 段組みの内容を揃える方法を指定する[column-fill]
 段組みの罫線の幅を指定する[column-rule-style]
 段組みの罫線のスタイルを指定する[column-rule-width]
 段組みの罫線の色を指定する[column-rule-color]
 段組みの罫線の幅とスタイル、色をまとめて指定する[column-rule]
 ブロックの前後での改ページや段区切りを指定する[break-before/break-after]
 ブロック内での改ページや段区切りを指定する[break-inside]

第6章 フレキシブルボックス
 フレキシブルボックスレイアウトを指定する[display]
 フレックスアイテムの配置方法を指定する[flex-wrap]
 フレックスアイテムの折り返しを指定する[flex-direction]
 フレックスアイテムの配置と折り返しを指定する[flex-flow]
 フレックスアイテムを配置する順序を指定する[order]
 フレックスアイテムの幅の伸び率を指定する[flex-grow]
 フレックスアイテムの幅の縮み率を指定する[flex-shrink]
 フレックスアイテムの基本の幅を指定する[flex-basis]
 フレックスアイテムの幅をまとめて指定する[flex]
 フレックスアイテムの主軸方向の揃え位置を指定する[justify-content]
 フレックスアイテムのクロス方向の揃え位置を指定する[align-items]
 フレックスアイテムのクロス軸方向の揃え位置を個別に指定する[align-self]
 複数行のアイテムのクロス軸方向の揃え位置を指定する[align-content]

第7章 トランジション
 トランジションを適用するプロパティを指定する[transition-property]
 トランジションが完了するまでの時間を指定する[transition-duration]
 トランジションの進行度を指定する[transition-timing-function]
 トランジションが開始されるまでの時間を指定する[transition-delay]
 トランジションをまとめて指定する[transition]

第8章 トランスフォーム
 平面空間で対象要素を変形する[transform]
 3D空間で対象要素を変形する[transform]
 3D空間で変形した要素の子要素の配置を指定する[transform-style]
 変形する要素の中心点を指定する[transform-origin]
 3D空間で変形した要素の奥行きを表す[perspective]
 3D空間に変形した要素の視点の位置を指定する[perspective-origin]
 3D空間で変形した要素の背面の表示方法を指定する[backface-visibility]

第9章 アニメーション
 アニメーションの動きを指定する[@keyframes]
 アニメーションを適用する要素を指定する[animation-name]
 アニメーションが完了するまでの時間を指定する[animation-duration]
 アニメーションが開始するまでの時間を指定する[animation-delay]
 アニメーションの再生、または一時停止を指定する[animation-play-state]
 アニメーションの進行度を指定する[animation-timing-function]
 アニメーションの再生中・再生後のスタイルを指定する[animation-fill-mode]
 アニメーションの実行回数を指定する[animation-iteration-count]
 アニメーションの再生方向を指定する[animation-direction]
 アニメーションのプロパティをまとめて指定する[animation]

第10章 コンテンツ
 マウスポインターの表示方法を指定する[cursor]
 :afterと:beforeを対象にコンテンツを挿入する[content]
 contentプロパティで挿入する記号を指定する[quotes]
 カウンター値を更新する[counter-increment]
 カウンター値をリセットする[counter-reset]
 画像などをボックスにフィットさせる方法を指定する[object-fit]
 画像などをボックスに揃える位置を指定する[object-position]
 画像の回転角度を指定する[image-orientation]
 テキスト入力欄での入力モードを指定する[ime-mode]

第11章 CSSの基礎知識
 CSSの基本書式
 CSSをHTML文書に組み込むには
 CSSのファイルの種類とMIMEタイプ
 メディアタイプとメディアクエリ
 CSSにおけるボックスモデル
 ボックスの種類と要素の分類
 スタイルの優先順位
 スタイルの継承
 単位付きの数値の指定方法
 色の指定方法

索引

関連書籍

好評発売中

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

好評発売中

いちばんやさしいJimdoの教本 人気講師が教える本格ホームページの作り方

好評発売中

できるWordPress WordPress Ver.4.x対応

初めてでも本格的なホームページを作れる!

好評発売中

いちばんやさしいPHPの教本 第2版 人気講師が教える実践Webプログラミング

ダウンロード

本製品の読者さまを対象としたダウンロード情報はありません。

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

  • 132ページ 項目見出し
    • [誤]
      <input type="subimit">
    • [正]
      <input type="submit">
    • 【 第2刷にて修正 】
  • 207ページ 項目見出し
    • [誤]
      要素名:nth-of-last(n){~}
    • [正]
      要素名:nth-last-of-type(n){~}
    • 【 第2刷にて修正 】
  • 207ページ サンプルコード 1行目
    • [誤]
      body p:nth-of-last(1){
    • [正]
      body p:nth-last-of-type(1){
    • 【 第2刷にて修正 】
  • 210ページ 下段項目見出し
    • [誤]
      要素名:first-of-type {~}
    • [正]
      要素名:last-of-type {~}
    • 【 第2刷にて修正 】
  • 210ページ 上段サンプルコード 1行目
    • [誤]
      div p:first-child
    • [正]
      div p:last-child
    • 【 第2刷にて修正 】
  • 287ページ 上段サンプルコード
    • [誤]
      div{
      border-top-width:10px;
      border-top-width:10px;
      border-bottom-width:2px;
      border-top-width:10px;
      }
    • [正]
      div{
      border-top-width:10px;
      border-right-width:10px;
      border-bottom-width:2px;
      border-left-width:10px;
      }
    • 【 第2刷にて修正 】
  • 363ページ 項目見出し
    • [誤]
      {transition : -property -delay -duration -timing-function ;}
    • [正]
      {transition : -property -duration -delay -timing-function ;}
    • 【 第2刷にて修正 】
  • 363ページ サンプルコード
    • [誤]
      .box:hover {
      transition-property: border;
      transition-transition-delay: 5ms;
      transition-duration: 1s;
      transition-timing-function: ease-out;
      border-color: #f00;
      }
    • [正]
      .box:hover {
      transition-property: border;
      transition-duration: 5ms;
      transition-delay: 1s;
      transition-timing-function: ease-out;
      border-color: #f00;
      }
    • 【 第2刷にて修正 】
  • 364ページ 本文 末尾から5行目
    • [誤]
      rotate(50dig)と指定すると、要素は時計回りに50度回転します。
    • [正]
      rotate(50deg)と指定すると、要素は時計回りに50度回転します。
    • 【 第2刷にて修正 】

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム