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

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

著

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

購入はこちら

企業・教育機関での一括購入

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

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

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

※本電子書籍は同名出版物を底本とし作成しました。記載内容は印刷出版当時のものです。
※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。
※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。
※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。

（翔泳社）

目次の登録はありません。

付属データはこちら

お問い合わせ

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

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

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

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

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

感想・レビュー

T2T3 さん

2017-09-23

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

マラカス さん

2016-12-04

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

Yoshiro Ohashi さん

2015-07-14

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

関連情報