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

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


形式:
書籍
発売日:
ISBN:
9784798129679
価格:
本体2,380円+税
仕様:
B5変・328ページ
分類:
Web制作

本書籍の他の形式を確認する

  • このエントリーをはてなブックマークに追加

作りながら学ぶ、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を囲むようにもう1つのdiv要素(#contents)で包んだ場合、いくら#footerでclear:both;を指定しても#contentsの枠は潰れて上部に貼りつくような形になってしまいます。
たとえば図11-8のようにfloatしている#left#rightを囲むようにもう1つの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