好評につき、改訂3版の発売(2022年8月22日)が決定しました。

できるポケットWeb制作必携HTML&CSS全事典改訂版

手元に置いておきやすいコンパクトな B6 判で、HTML Living Standard に準拠した HTML 全要素、および最新仕様に基づく CSS セレクタ、プロパティを幅広く掲載したロングセラー HTML/CSS リファレンス本

表紙画像: できるポケット Web制作必携 HTML&CSS全事典 改訂版

このような方々におすすめ

  • Webサイト制作の現場でサッと開けるHTML/CSSのリファレンス本が欲しいという方
  • 最新のHTML要素、CSSセレクタやプロパティについて網羅的に学びたい方
  • Webサイト制作会社でHTMLやCSSを日常的に使用する方
  • HTMLやCSSを基礎から学びたい、学び直したい方
著者
加藤 善規 (& できるシリーズ編集部)
定価
本体 2,068円(税込)
判型
B6正寸
ページ数
528ページ
ISBN
978-4-295-00828-6
発売日
2020年2月14日
その他
2022年3月現在 第5刷

目次

HTML編
  • ドキュメント
  • セクション
  • コンテンツのグループ化
  • テキストの定義
  • 埋め込みコンテンツ
  • テーブル
  • フォーム
  • インタラクティブ
  • スクリプティング
  • HTMLの基礎知識
CSS編
  • セレクター
  • フォント / テキスト
  • 色 / 背景 / ボーダー
  • ボックス / テーブル
  • 段組み
  • フレキシブルボックス
  • グリッドレイアウト
  • アニメーション
  • トランスフォーム
  • コンテンツ
  • CSSの基礎知識

内容紹介

HTML編 / CSS編ともに、サンプルソースコード、図版などを用いて詳しく解説しています。

対応ブラウザなどもアイコンでわかりやすく表示、役に立つ基礎知識の解説も多数掲載。

  • 紙面画像:【HTML編】dd要素のページ - 各要素について仕様書に基づいたわかりやすい解説を掲載しています。
  • 紙面画像:【HTML編】colgroup、col要素のページ - 各要素には対応ブラウザや使用頻度のアイコンを提示しています。
  • 紙面画像:【HTML編】colgroup、col要素の実践例ページ - 要素によっては実践例として、より詳細なサンプルソースコードを掲載しています。
  • 紙面画像:【HTML編】HTMLの基礎知識ページ - HTMLの基本的な知識についても解説しています
  • 紙面画像:【CSS編】in-range、out-of-range疑似クラスのページ - サンプルソースに加え、実際の画面例も数多く掲載してわかりやすく解説しています。
  • 紙面画像:【CSS編】background-orignプロパティのページ - HTML編と同様、各セレクタ、プロパティには対応ブラウザや使用頻度のアイコンを提示しています。
  • 紙面画像:【CSS編】scrolle-marginプロパティのページ - 最新の仕様書に基づいて数多くのプロパティを掲載しています。
  • 紙面画像:【CSS編】CSSの基礎知識ページ - CSSの基本的な知識についても解説しています

購入する

お買い求めは、全国の書店、下記をはじめとした各オンラインストアへ

お詫びと訂正

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

53ページ サンプルコード 9行目第2刷にて修正
誤記
<script src="/js/scipt.js">
訂正後
<script src="/js/scipt.js"></script>
61ページ 実践例 サンプルコード 5~6行目第2刷にて修正
誤記
<li><a href="/blog">メニュー</a></li><li><a href="/contact/">店舗情報</a></li>
訂正後
<li><a href="/blog/">メニュー</a></li><li><a href="/shop/">店舗情報</a></li>
145ページ value属性の解説文第2刷にて修正
誤記
また、type属性値がsubmit、image、reset、buttonの場合は、value属性の値が表示されるbeforeボタン名となります。
訂正後
また、type属性値がsubmit、reset、buttonの場合は、value属性の値がボタンに表示されるラベルとなります。
165ページ 使用できる属性 一覧第2刷にて修正
誤記
valueを含む
訂正後
valueを含まない
165ページ 使用できる属性 本文第2刷にて修正
誤記
value属性で指定した値は、ボタンに表示されるラベルとして使用されます。
訂正後
(削除)
193ページ サンプルコード 2行目第2刷にて修正
誤記
<style><!--省略--></style>
訂正後
<style>/*省略*/</style>
233ページ 本文第2刷にて修正
誤記
以下の例では、閲覧者が操作しているフォームの入力コントロールにスタイルを適用し、背景色を薄い赤で表示しています。
訂正後
以下の例では、閲覧者が操作している type="text" が指定されたフォームの入力コントロールにスタイルを適用し、背景色を薄い赤で表示しています。
233ページ CSS サンプルコード 1行目第2刷にて修正
誤記
input[type]:focus {
訂正後
input[type="text"] {
233ページ HTML サンプルコード 9行目第2刷にて修正
誤記
<input type="type" name="address" id="address" value="">
訂正後
<input type="text" name="address" id="address" value="">
238ページ 下段 サンプルコード 1行目第2刷にて修正
誤記
textarea:disable {
訂正後
textarea:disabled {
239ページ 上段 サンプルコード 1行目第2刷にて修正
誤記
type[checkbox]:checked {
訂正後
input[type="checkbox"]:checked {
246ページ 要素名::first-line 本文およびサンプルコード第2刷にて修正
誤記
以下の例では、p要素のマージンを広くしたうえで、段落の1行目にのみ別のスタイルを適用し、広くしたマージンを取り消しています。p {margin-left: 1em;}p::first-line {margin-left: -1em;}
訂正後
以下の例では、p要素のフォントサイズを指定したうえで、段落の1行目にのみ別のフォントサイズを適用しています。p {font-size: 1rem;}p::first-line {font-size: 1.5rem;}
324ページ 引数の指定方法 サイズ 2行目第3刷にて修正
誤記
closet-side
訂正後
closest-side
324ページ 引数の指定方法 サイズ 3行目第3刷にて修正
誤記
farset-side
訂正後
farthest-side
324ページ 引数の指定方法 サイズ 4行目第3刷にて修正
誤記
closet-corner
訂正後
closest-corner
324ページ 引数の指定方法 サイズ 5行目第3刷にて修正
誤記
farset-corner
訂正後
farthest-corner
346ページ 値の指定方法 下から2行目第2刷にて修正
誤記
値が2つ 1つ目が左右上角、2つ目が左右下角に適用されます。
訂正後
値が2つ 1つ目が左上角と右下角、2つ目が右上角と左下角に適用されます。
392ページ 値の指定方法 下から2行目第3刷にて修正
誤記
1つ目は上下、2つ目は左右の間隔に適用されます。
訂正後
1つ目は左右、2つ目は上下の間隔に適用されます。
421ページ ページ下部 本文第3刷にて修正
誤記
flex-direcrionプロパティ(P.347)
訂正後
flex-directionプロパティ(P.422)
460ページ サンプルコード1つ目 2行目第3刷にて修正
誤記
grid-area: span 3 / 6 / 2 / 4;
訂正後
grid-area: span 3 / 2 / 6 / 4;
460ページ サンプルコード2つ目 3~4行目第3刷にて修正
誤記
grid-column-start: 6;grid-row-end: 2;
訂正後
grid-column-start: 2;grid-row-end: 6;
470ページ サンプルコード 5行目以降第3刷にて修正
誤記
.box {background-color: yellow;animation-name: box-animation;animation-delay: 5s;animation-fill-mode: both;}
訂正後
.box {background-color: yellow;animation-name: box-animation;animation-delay: 5s;animation-fill-mode: both;animation-duration: 1s;}
482ページ 値の指定方法 rotateY() の解説文第3刷にて修正
誤記
正の数値を指定すると、要素の左辺が画面の奥に向かって回転します。
訂正後
正の数値を指定すると、要素の右辺が画面の奥に向かって回転します。

Information