今すぐ使えるかんたん ホームページ　HTML&CSS

サポートページ

 

この記事を読むのに必要な時間：およそ 0.5 分

ダウンロード

サンプルファイルダウンロード

（2012年9月19日更新）

本書で解説しているサンプルファイルの最新版をダウンロードできます。ダウンロードしたファイルをダブルクリックして，［ファイルをすべて展開］ボタンをクリックしてください。

続いて表示される画面で［参照］ボタンをクリックし，［デスクトップ］をクリックした後，［OK］ボタンをクリックしてください。

最後に［展開］ボタンをクリックすると，デスクトップ上に「サンプル」というフォルダーが作成されます。

お詫びと訂正（正誤表）

本書掲載の記述に誤りがありました。訂正するとともに，読者の皆様および関係者の方々に深くお詫び申し上げます。

P.27　「すべて小文字で記述する」

誤 ○
<TITLE>ぶらり散歩道</TITLE>
↓
×
<title>ぶらり散歩道</title>
正 ×
<TITLE>ぶらり散歩道</TITLE>
↓
○
<title>ぶらり散歩道</title>

P.152　「プロパティ」「解説」「記述例」

誤 color
正 background-color

P.154　Memo「区切り線の色の指定」

誤 color
正 background-color

P.178　「記述例」

誤 リンク先を表示している場合は「#ffff00」、リンク先に
正 リンクをマウスでクリックしている間は「#ffff00」、リンク先に

P.178　「表示例」

誤 a:active { color: ffff00; }
a:hover { color: ff0000; }
正 a:active { color: ff0000; }
a:hover { color: ff9999; }

P.179　memo「リンクの状態に応じた文字列の色の指定」

誤 （1）a:active
　リンク先に訪問済みであることを示す状態です。
正 （1）a:active
　リンクをマウスでクリック中であることを示す状態です。

P.179～180，およびP.242～252　「サンプル」

サンプル中では，a:active擬似クラスの指定場所がa:visited疑似クラスの次行になっていますが，実際には，擬似クラスの記述の末尾にて行う必要があります。

誤 a:link { color: #336633; }
a:visited { color: #9999bb; }
a:active { color: #ff0000; }
a:hover { color: #ff9999; }
a:focus { color: #0000ff; }
正 a:link { color: #336633; }
a:visited { color: #9999bb; }
a:hover { color: #ff9999; }
a:focus { color: #0000ff; }
a:active { color: #ff0000; }

なお、リンクの疑似クラスを組み合わせる場合には，次のような順序で記述する必要があります。

  • link擬似クラス、visited擬似クラス
  • hover擬似クラス、focus擬似クラス
  • active擬似クラス

P.212　「値の数によって指示する位置が変化」

誤 値が4つ　上，下，左，右
正 値が4つ　上，右，下，左

誤 上3em，下2em，左4em，右1emのpadding
正 上3em，右2em，下4em，左1emのpadding

P.225　Stepup「リストを装飾する」

「Stepup」中に，誤ったCSSが掲載されています。正しくは次のとおりです。

正 

@charset "shift_jis";
body{ 
	background-color: #bbddff;
	margin: 25pt;
	font-family: Osaka, "ヒラギノ角ゴ Pro W3","小塚ゴシック Std B","ＭＳ Ｐゴシック",;
}
li { 
	text-align: center;
	border: solid 1px #bbddff;
	background: blue;
	padding: 10px;
	width: 60px;
	list-style-type: none;
	color: #ffffff;
}
a:link { color: #ffcc00; }
a:visited { color: #ffffff; }
#navi li { float: left; }

P.230　「記述例」

誤 p { overflow: scroll: width: 250; height: 150px; }
正 p { overflow: scroll; width: 250; height: 150px; }

P.229　下段画像（手順4）

手順4の画像中で，左から20px，上から100pxの相対位置を矢印で示していますが，実際の矢印の開始位置は，「雷」の文字の左側になります。

P.238　memo「段組の秘訣はfloatプロパティ」

誤 Sec.75を参照してください。
正 Sec.41を参照してください。

P.247　memo「overflowプロパティ」

誤 Sec.77を参照してください。
正 Sec.80を参照してください。

P.249　memo「リンクをまとめて利便性を高める」

誤 Sec.51およびSec.52を参照してください。
正 Sec.52およびSec.53を参照してください。

P.250　int「ブロックレベル要素の高さ」

誤 また、ブロックレベル要素の高さを指定する場合、%でも可能ですが、ピクセル数で指定したほうが、ウィンドウが小さい場合にレイアウトが崩れないというメリットがあります。
正 なお、一般的には個々のブロックレベル要素では高さを指定せず、ページ全体の高さを合わせてスクロールさせます。その場合は、すべてのブロックレベル要素から「heightプロパティ」および「overflowプロパティ」の記述を削除します。