HTML&CSS 標準デザイン講座【HTML5&CSS3対応】（草野 あけみ）｜翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. HTML&CSS 標準デザイン講座【HTML5&CSS3対応】

HTML&CSS 標準デザイン講座【HTML5&CSS3対応】

著

形式：
書籍
発売日：
ISBN：
9784798129679
定価：
2,618円（本体2,380円＋税10%）
仕様：
B5変・328ページ
カテゴリ：
Web制作
キーワード：
#グラフィックソフト・ツール,#デザイン,#ビジネスデザイン,#イラスト集・作品集
紙の書籍
電子書籍
本書籍には新版があります
HTML5&CSS3標準デザイン講座

購入はこちら

作りながら学ぶ、Webサイト制作の標準技術

本書は、Webサイトを作るために必須の「HTML」と「CSS」が学べる学習書です。各レッスンに沿ってサンプルサイトを作っていく学習形式で、解説を読んで理解するだけでなく、実際に手を動かしながら学ぶことができます。レッスンは初歩的な文法学習から始めて、実務と同じ流れでの本格的なサイト制作までをカバー。

1冊を通した学習で、初心者でもHTMLとCSSの実践的な考え方と書き方が身に付きます。また、新規格「HTML5」と「CSS3」の解説も掲載しているので、次世代Webサイトの動向も学ぶことができます。Webサイト制作の最初の学習書として、ぜひオススメの1冊です。

CHAPTER 01　HTMLで文書を作成する

LESSON 01　HTMLの基本ルール
LESSON 02　文書をHTMLでマークアップする
LESSON 03　改行や強調・画像やリンクを挿入する
LESSON 04　表とフォームを設置する
SUPPLEMENTARY LESSON　文法チェックのすすめ

CHAPTER 02　CSSで文書を装飾する

LESSON 05　CSSの概要
LESSON 06　基本プロパティとセレクタの使い方
LESSON 07　背景画像を使って装飾する
LESSON 08　初歩的なレイアウトとボックスモデル
LESSON 09　表組みと入力フォームのスタイリング

CHAPTER 03　CSSレイアウトの基本

LESSON 10　レイアウトの種類
LESSON 11　floatレイアウト
LESSON 12　positionレイアウト

CHAPTER 04　本格的なWeb制作のための設計と準備

LESSON 13　Webサイトのコーディング設計
LESSON 14　効率的なCSSコーディングの下準備

CHAPTER 05　実践的なWebサイトのコーディング

LESSON 15　大枠のレイアウトフォーマットを作成する
LESSON 16　横並びのテキストメニューを作る
LESSON 17　横並びの画像メニューを作る
LESSON 18　ヘッダー領域を作成する
LESSON 19　メインコンテンツ領域を作成する

CHAPTER 06　jQueryでWebページに動きを追加する

LESSON 20　JavaScript/jQueryの役割と基本
LESSON 21　シンプルなjQueryプラグインを使ってみる

CHAPTER 07　HTML5入門

LESSON 22　HTML5の概要
LESSON 23　これまでのマークアップとの違い
LESSON 24　セクション関連の新要素
LESSON 25　テキスト関連の新要素と変更/廃止された要素・属性
LESSON 26　HTML5でお問い合わせページをマークアップする

CHAPTER 08　CSS3入門

LESSON 27　CSS3の概要
LESSON 28　CSSセレクタ
LESSON 29　CSS3プロパティ
LESSON 30　変形・アニメーションとメディアクエリ
SUPPLEMENTARY LESSON　CSS3でのInternet Explorer対策

付属データはこちら

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。

  • hgroup要素の削除について

    本書p.241、第7章「HTML5入門」 LESSON24「セクション関連の新要素」に掲載しているhgroup要素は、本書刊行後にW3CのHTML5勧告候補から削除されました。
    ※参考URL（英文）
    http://www.w3.org/html/wg/drafts/html/CR/#the-hgroup-element

    ブラウザ側でのサポートが突然無くなるわけではないので、表示されなくなったりレンダリングが崩れるということはありませんが、hgroup要素を使っているとHTML5のバリデート（本書p.054参照）が通らないようです。

    ※W3Cの勧告プログラムについては本書p.224を参照してください。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付（書籍の最終ページ）に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2015年02月25日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 011
ソースコード内、titleタグの部分 		4刷 未
誤 <title>はじめてのHTML</title>
正 <title>HTMLの練習</title>
2014.04.25
1刷 027
コンテンツ(2)「飼い主紹介」のすぐ上の「※同上」		 2刷 未
誤 ※同上　　　2匹目紹介
正 ※同上　　　3匹目紹介
備
考		 2つ目の「2匹目紹介」を「3匹目紹介」に訂正します。
2013.05.10
1刷 031
【index.html】の15～17行目のコメント		 2刷 未
誤 箇条書き（ul）の範囲
正 リスト項目（li）
備
考		 14～18行目のコメントは「箇条書き（ul）の範囲」のままで正しいです。
2013.05.13
1刷 040
2つ目の【index.html】		 2刷 未
誤 （略）
正 index.html
備
考		 上記のように、<a href="パス">と</a>にハイライト色を付けます。コードに変更はありません。
2013.05.13
1刷 051
手順6のentry.htmlのソースコード		 4刷 未
誤 <input type="checkbox" name="like1" value="お魚" />お魚 <input type="checkbox" name="like2" value="お肉" />お肉 <input type="checkbox" name="like3" value="ミルク" />ミルク <input type="checkbox" name="like3" value="カリカリ" />カリカリ <input type="checkbox" name="like4" value="猫缶" />猫缶 <input type="checkbox" name="like5" value="甘いもの" />甘いもの
正 <input type="checkbox" name="like1" value="お魚" />お魚 <input type="checkbox" name="like2" value="お肉" />お肉 <input type="checkbox" name="like3" value="ミルク" />ミルク <input type="checkbox" name="like4" value="カリカリ" />カリカリ <input type="checkbox" name="like5" value="猫缶" />猫缶 <input type="checkbox" name="like6" value="甘いもの" />甘いもの
備
考		 name属性の値でlike3が重複していたのを訂正
2014.04.16
1刷 052
表組み「フォーム部品の種類」上から2つ目		 3刷 未
誤 テキストフィールド（マルチライン） <textare name="textarea">test test</textarea>
正 テキストフィールド（マルチライン） <textarea name="textarea">test test</textarea>
備
考		 「textarea」の末尾の「a」が抜けていました。
2013.05.15
1刷 053
表内の「ラベル」欄		 5刷 未
誤 <input type="checkbox" name="checkbox1" id="　checkbox1" /><label for="check1">aaa</label>
正 <input type="checkbox" name="checkbox1" "id="checkbox1" /><label for="checkbox1">aaa</label>
2014.11.18
1刷 064
図05-4のキャプション		 2刷 未
誤 図05-4　CSS基本書式
正 図05-4　外部CSS読み込みの基本書式
2013.03.11
1刷 064
図05-4の上のソースコード画像		 3刷 未
誤 type="type/css"
正 type="text/css"
2013.06.24
1刷 064
図05-4「media="all"」の説明		 2刷 未
誤 type属性
正 media属性
2013.05.13
1刷 067
図06-5 paddingの例		 5刷 未
誤 padding: 5px 10px;
正 padding: 5px 20px;
備
考		 ※p.66手順4の場合の値です。
2014.09.16
1刷 070
【index.html】		 2刷 未
誤 ―
正 </span>にハイライト
備
考		 3か所のにハイライト色を付けます。
2013.05.13
1刷 074
「属性セレクタ」の表組み内、E[attr="value"]行の「例」		 3刷 未
誤 a[href="_blank"]
正 a[target="_blank"]
2013.10.29
1刷 079
「MEMO」の1行目		 2刷 未
誤 /* ～ */と/* ～ */で挟まれた範囲のコードはコメント扱いとなり、
正 /* ～ */の範囲のコードはコメント扱いとなり、
2013.05.13
1刷 079
「背景画像の指定をショートハンドに修正する」の「style.css」ソースコード画像		 3刷 未
誤 /*ウィンドウ背景色の設定*/ body{ /* background-color:#fbf9cc; background-image:url(img/bg-stripe01.png); background-repeat:repeat-x; */ background:#fbf9cc url(img/bg-stripe02.png) repeat-x; }
正 /*ウィンドウ背景色の設定*/ body{ /* background-color:#fbf9cc; background-image:url(img/bg-stripe01.png); background-repeat:repeat-x; */ background:#fbf9cc url(img/bg-stripe01.png) repeat-x; }
備
考		 下の「bg-stripe02.png」を「bg-stripe01.png」に訂正
2013.08.07
1刷 086
【style.css】の4行上		 2刷 未
誤 960pxにしたい場合、以下の図のように設定されている
正 960pxにしたい場合、設定されている
2013.05.13
1刷 086
サンプルファイル内		 未 未
誤 /*コンテンツ領域の設定*/ #wrap{ width:878px; margin:40px auto; padding:40px 80px; border:#f6bb9e 1px solid; background-color:#fff; } /*横並びレイアウトの設定*/ .ph{ float:left; margin-right:30px; } .data{ float:left; width:468px; } .more{ clear:left; }
正 /*コンテンツ領域の設定*/ #wrap{ width:798px; margin:40px auto; padding:40px 80px; border:#f6bb9e 1px solid; background-color:#fff; } /*横並びレイアウトの設定*/ .ph{ float:left; margin-right:30px; } .data{ float:left; width:388px; } .more{ clear:left; }
備
考		 サンプルファイル「style.css」の#wrapのwidthを798pxに、.dataのwidthを388pxに訂正します。
ダウンロードファイルは、2015年2月25日以降、訂正版となっております。
2015.01.06
1刷 089
手順1「dtとddを横並びにする」の2行目		 2刷 未
誤 横並びする
正 横並びにする
2013.05.13
1刷 102
図09-6		 3刷 未
誤 「scope="row"」 ↓ 「scope="col"」→
正 「scope="col"」 ↓ 「scope="row"」→
備
考		 図中の「row」と「col」が逆になっていました。
2013.06.04
1刷 114
「マルチカラムレイアウト」の5行目		 2刷 未
誤 マイチカラムレイアウトが
正 マルチカラムレイアウトが
2013.05.13
1刷 115
本文下から4行目		 2刷 未
誤 「float」と「positon」という
正 「float」と「position」という
備
考		 tの後ろに「i」を追加します。
2013.03.14
1刷 116
下から4～3行目		 2刷 未
誤 左に配置したいものにfloat:left、右に配置したいものにfloat:rightと設定し、
正 左に配置したいものにfloat:left;、右に配置したいものにfloat:right;と設定し、
備
考		 2か所に「;」（セミコロン）を追加します。
2013.03.11
1刷 125-126
p.125下から2行目～p.126上から2行目		 4刷 未
誤 たとえば図11-8のようにfloatしている#mainと#subを囲むようにもう１つのdiv要素（#contents）で包んだ場合、いくら#footerでclear:both;を指定しても#contentsの枠は潰れて上部に貼りつくような形になってしまいます。
正 たとえば図11-8のようにfloatしている#leftと#rightを囲むようにもう１つのdiv要素（#container）で包んだ場合、いくら#footerでclear:both;を指定しても#containerの枠は潰れて上部に貼りつくような形になってしまいます。
2014.03.06
1刷 126
「clearfix」の5行上		 2刷 未
誤 （この場合は#contets）
正 （この場合は#container）
2013.05.13
1刷 126
「MEMO：」の1行目		 2刷 未
誤 loatした子要素を
正 floatした子要素を
2013.05.13
1刷 130
LESSONタイトル		 2刷 未
誤 positiionレイアウト
正 positionレイアウト
備
考		 tの後ろの「i」を1つ削除します。p.131、p.133、p.135のページ右上にあるLESSONタイトルも訂正します。
2013.03.11
1刷 131
図12-2のキャプション		 2刷 未
誤 図12-2　positon:absoluteの概念図
正 図12-2　position:absoluteの概念図
備
考		 tの後ろに「i」を追加します。
2013.03.14
1刷 132
CSSソースコード「絶対配置コンテンツ」の29行目		 2刷 未
誤 right:0
正 right:0;
備
考		 行末に「;」（セミコロン）を追加します。
2013.05.13
1刷 132
上から2行目		 2刷 未
誤 右上に配置したいので、表示位置をleft:0; top:0;に設定します。
正 右上に配置したいので、表示位置をright:0; top:0;に設定します。
2013.04.16
1刷 133
手順5、2つ目の緑点線の囲みの3行目		 2刷 未
誤 通常コンテンツはz-index0とみなされており
正 通常コンテンツはz-index:0;とみなされており
備
考		 「:」（コロン）と「;」（セミコロン）を追加します。
2013.03.11
1刷 136
「POINT」の2行上		 2刷 未
誤 「スマートフォンとpositiion:fixedのバグ」
正 「スマートフォンとposition:fixedのバグ」
備
考		 tの後ろの「i」を1つ削除します。
2013.05.13
1刷 171
【base.css】の第137行～第140行		 2刷 未
誤 
#pankuzu li{
  display:inline;
  font-size:83%;
}
正 line 137-140
備
考		 注釈を追加します。ソースコードに変更はありません。
2013.03.11
1刷 172
図16-3の吹き出し		 2刷 未
誤 フロック要素なので自動改行される
正 ブロック要素なので自動改行される
2013.05.13
1刷 173
【base.css】の第113行の注釈		 2刷 未
誤 
border-right:#fff 1px solid; ←左端の白線
正 
border-right:#fff 1px solid; ←右端の白線
備
考		 注釈を訂正します。ソースコードに変更はありません。
2013.05.13
1刷 190
2行目、図18-4中の赤い文字（2か所）		 5刷 未
誤 verticla-align
正 vertical-align
2015.02.25
1刷 195
【base.css】の第345行		 2刷 未
誤 
height:30px;
line-height:30px;
正 line345
備
考		 注釈を追加します。ソースコードに変更はありません。
2013.03.11
1刷 196
画面キャプチャ内の注釈		 3刷 未
誤 .contactBtn
正 .contact-btn
備
考		 クラス名を訂正（ダウンロードサンプルのほうが正しい表記となります）
2013.05.17
1刷 199-199
p.198の下から2行目、p.199上から5行目		 3刷 未
誤 <div id="method">
正 <div id="msg">
備
考		 スタイルを適用するID名をmsgに訂正
2013.05.17
1刷 219
BSDライセンスの正式名称		 2刷 未
誤 BSD（Berkekey Software Distribution License）
正 BSD（Berkeley Software Distribution License）
2013.03.11
1刷 222
「HTML5とは」の7行目		 2刷 未
誤 まとめたものがHMTL5 API
正 まとめたものがHTML5 API
2013.05.13
1刷 223
図22-2「デバイスアクセス」の項目		 3刷 未
誤 デバイス内臓ガメラやGPS
正 デバイス内蔵カメラやGPS
2013.06.11
1刷 224
「MEMO」の3行上		 3刷 未
誤 ひっくり返される心配はありません。
正 ひっくり返される心配はほとんどありません。
2013.12.02
1刷 224
左側の「MEMO」の下から2行目		 3刷 未
誤 勧告候補の段階までくればこのようなことはほとんど無くなるため、安心して使っていくことができるようになります。
正 勧告候補の段階までくればこのような変更はかなり頻度が減ってきますが、完全にゼロになるわけではないため、2014年の勧告までは念のため動向に注意した方が良いでしょう。
2013.12.02
1刷 239
コードの1行目		 5刷 未
誤 body>
正 <body>
2015.02.04
1刷 241
ページの最後		 3刷 未
誤 ―
正 ※ hgroup要素は、本書第1刷刊行後にW3CのHTML5勧告候補から削除されました。ブラウザ側でのサポートが突然無くなるわけではないので、表示されなくなったり表示が崩れるということはありませんが、hgroup要素を使っているとHTML5のバリデート（p.054参照）が通らないようです。W3Cの勧告プログラムについてはp.224を参照してください。
備
考		 本書刊行後の仕様変更に伴い、注意書きを追加します。
2013.12.02
1刷 248
「a要素」手順1の囲み解説の2～3行目		 2刷 未
誤 また複数のセルをまたいで
正 また複数のブロックをまたいで
2013.03.11
1刷 275
【HTML】ソース1行目		 2刷 未
誤 
<ul class="sample chlid">
正 
<ul class="sample child">
2013.03.11
1刷 276-277
各CSSソースコード内（5か所）		 4刷 未
誤 .chlid :
正 .child :
備
考		 childのスペルミス訂正
2014.03.06
1刷 326
索引、3段目		 2刷 未
誤 positiionレイアウト
正 positionレイアウト
備
考		 tの後ろの「i」を1つ削除します。
2013.05.13

感想・レビュー

T2T3 さん

2017-09-23

この本でゼロからHTMLとCSSを学んだが、非常にわかりやすくてよかった。レスポンシブデザインまで書いていてくれて非常に勉強になった。まあ、CSSは慣れるまでは思い通りにいかず非常にイライラしたが、それはこの本のせいじゃなくてCSSを覚えるなら誰もが通る道なのだろう。

マラカス さん

2016-12-04

言葉遣いが固くて読むのが苦痛でした。ただ内容は悪くないし、初心者が読めるものとしては詳しい方だと思う。

Yoshiro Ohashi さん

2015-07-14

html css jsと一通りまとまっていて読みやすい。

関連情報

​