ウェブ表現論：ウェブ標準用語辞典

現在位置：桑原政則オンラインのトップ、サイトマップ＞ウェブ表現論のページ＞ウェブ標準用語辞典

「ウェブ表現論」の中の「ウェブ標準（XHTML+CSS）用語辞典」です。

ウェブ表現論のページ

●記数英

●あい　う　え　お　 ●か　き　く　けこ ●さ　し　す　せ　そ　

●た　ち　つ　て　と ●なにぬ　ね　の　 ●は　ひ　ふ　へ　ほ

●ま　み　む　め　も　 ●やゆ　よ　 ●らり　る　れ　ろ　 ●わ

スタイルシートの道具箱初心者向けサンプル

【注】参考文献、サイトは「ウェブライティングのページ」に記してあります。特に、益子貴寛『Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト』（秀和システム、2005年）を参考にしました。

●記数英

@charset

キャラセットは　abc.css の第1行に記述する。文字化け回避のためです。
@charset "shift_jis";

a href

a＝anchor。碇　href＝船名。hyper reference

address

→footer

border

""は非推奨。

br 任意の改行

CSS

CSS（Cascading Style Sheets）は、HTMLの表示方法を指定するスタイルシート言語の代表です。cascadeとは、階段状の岩に水が流れ落ちている滝のことです。

CSS仕様書

CSS1(英) CSS1(日)
CSS2(英) CSS2(日)

CSSハック

XHTMLソースのh1要素などのフォントサイズ、マージン、パディングの初期設定は、ブラウザによって異なります。回り込みによる段組の設定が段落ちしてしまったりするのは、ブラウザのデフォルトCSSのためです。このような問題を回避するために、次のような対策を講じておきます。

1）最初にすべてのデフォルトCSSの設定を無効にしておきます。

* {
		margin: 0; 
		padding: 0; 
	}


	h1, h2, h3, h4, h5, h6, p, address {
		font-size: 100%;
		font-weight: normal; 
		font-style: normal; 
	}

このようにブラウザのもつバグや特有の解釈を利用して、特定のブラウザのトラブルを回避するための対応策をCSSハックといいます。CSSハックは他に回避手段がない暫定措置、最終手段として用います。

2）バージョン4世代のブラウザはCSSハックでは解決できない問題が多く、アプリケーションを強制終了してしまうこともあるので、外部CSSを読み込ませないようにします。IE4とNN4に外部CSSを読み込ませないようにするには次のように記述します。

@import “styles.css”

しかしこれでもNN4の初期バージョンではブラウザがフリーズすることもあるので、回避策としてmedia属性の値を「all」あるいは「screen, tv」としておきます。

3）バージョン5世代のブラウザ対策としては、IE5.0、IE5.5、MacIE5.X用のバグ修正専用CSSを用意しておきます。

4）バージョン6世代対策としては、IE用とそれ以外に分けられます。次のように指定すると、IE6.0、 IE5.0、MacIE5.xだけにCSSが適用される。「*html」を使うので、スターハックとよばれる。スターハックの他に、「アンダースコアハック」「ボックスモデルハック」があります。

#contents p { 
		font-size: 1em; 
} 


*html #contents p { 
		font-size: 90%;  
}

5）また、IE6.0の配置に関する問題を解決するには、次のように問題のあるボックスごとに「width:100%」あるいは「height: 1%」を適用します。幅に「100%」、高さに「1%」を指定しても、実際の内容の高さに合わせて表示するので実害はありません。。

*htmlセレクタ { 
		height：1%； 
}

6） IE6.0以外のブラウザにだけ適用するには次のような要素をセレクタの先頭に指定する。

CSS-only Filters SummaryさまざまなCSSハック

CSSのメリットとデメリット　

CSSを使う利点には次のようなものがあります。

すべてのページデザインを一挙に変更でき、メンテナンス作業が激減する。（筆者桑原は数百ページの背景色を定期的に一括変更するのに活用している。）
ウェブアクセシビリティが高くなる。
SEO効果があがる。
画像の座標指定、行間、字間の調節などデザイン自由度が高い。（「CSS Zen Garden」で具体例が発表されている。
携帯電話や印刷用に字体、サイズを変えるなどさまざまなメディアタイプに対して、XHTMLファイルが1つで済み、一元対応ができる。

利点ずくしのCSSであるが、現時点では次のような問題点があり、慣れるまでは努力と時間が必要です。

XHTMLとCSSの2元管理が必要となる。
HTMLをウェブ標準（XHTMLとCSS）に全面移行するには、時間がかかる。
古いブラウザへのバグ対策が必要である。
ブラウザごとに発生する問題があり、対策が必要である。
特殊な裏技を使う必要がある。

特にHTMLをウェブ標準（XHTMLとCSS）に全面移行するには、時間がかかります。筆者の「桑原政則オンライン」でも数百タイトルのページを、フォント要素、色要素をCSSに移行したりするなどの1ページずつの作業があるので、、全面改定までは2，3年は要することになります。ただ一度対策を講じると問題が発生しにくいコードを書くようになるので、問題が発生してもすぐ対処できるようになります。また数百頁の背景などを一挙に変更できるのは大きな魅力です。将来的にCSSはスタンダードになるので、移行の準備は早いほどよろしいようです。無料のCSS作成ツールは　Vectorなどで紹介されています。

CSSの歴史

CSS（Cascading Style Sheets）は、XHTMLの表示方法を指定するスタイルシート言語の代表です。cascadeとは、階段状の岩に水が流れ落ちている滝のことです。CSSの歴史は意外に古く、草案はすでに1994年には公開されています。1996年にはCSS1が、1998年にはCSS2が公開されています。しかしインターネットの爆発的な普及にともなうブラウザ間の競争で、ブラウザ各社は市場占有率を求めて、CSSを無視してHTMLの視覚表現を独自拡張していきました。

CSSを実用的に使うことのできるブラウザが登場したのは、2000年頃になってからでした。これに伴いウェブ標準（XHTMLとCSS）を前提とするSEOやウェブアクセシビリティが浸透し始めました。こうして2003年頃からCSSは広く普及するようになりました。現今ではブログがCSSの浸透に拍車をかけています。

CSS関連仕様史
西暦	CSSのできごと
1994年	CSS草案が公開される
1996年	CSS1がW3C勧告として公開される
1998年	CSS2がW3C勧告として公開される
2000年	CSS3の草案が公開される

div要素を少なく

XHTMLの最適化のためにはdiv要素やspan要素をなるべく少なくします。たとえば、次の場合div要素でul要素をラップする必要はありません。

<div id="nav">
<ul>
<li><a href="...">項目1</a></li>
<li><a href="...">項目2</a></li>
<li><a href="...">項目3</a></li>
</ul>
</div>

上の場合、div要素を省き、ul要素に直接idをつけたほうがシンプルです。

<ul id="nav">
<li><a href="...">項目1</a></li>
<li><a href="...">項目2</a></li>
<li><a href="...">項目3</a></li>
</ul>

DOCTYPE宣言

XML宣言の文字コード指定はすべてUTF-8です。必要に応じて差し替えます。
<?xml version="1.0" encoding="Shift_JIS"?>
<?xml version="1.0" encoding="EUC-JP" ?>
<?xml version="1.0" encoding="ISO-2022-JP" ?>

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML Basic
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.1
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

em要素　＜CSS

em要素は、斜体で表示されてしまいます。斜体は日本語では読みにくいです。斜体を避け、赤の太字で表示したい場合は次のように指定します。なおstrong要素は「より強調」で通常は太字で表示されます。emphasis＝強調
em { color: #ff0000; font-weight: bold; font-style: normal; }

font-family

font-family： Verdana Arial "ヒラギノ角ゴ Pro W3" "Osaka" "ＭＳＰゴシック " "san-serif" 。"ＭＳＰゴシック"　　ＭＳＰは全角で

footer

イタリックで表示されてしまう場合は、normalに直します。
font-style: normal

<h1>

hはheading（見出し）のことです、header（ヘッダ）ではありません。<h1><h2><hn>は文字サイズ調整のタグではありません。

height

height:1% とするとIEでは直ることが多い。

HTML仕様書

HTML 4.01 Specification(英語)
HTML4.01仕様書(和訳)

hover→ リンク部分の色

idセレクタ、classセレクタ

CSSでは原則としてidを使い、他のものと役割が共通する場合にだけ、例外的にclassを使うという発想が大切です。idを個人とするならば、classは集団といえます。基本的にid、classには、「form#request」というふうにformなどの要素タイプを前接し、「#request」のようにオープンにしないのが原則です。

idやclassのネーミングは、「header」「contents」「subcontents」「footer」のように意味を基準にするのがよろしいです。「red」「left」といった見た目を基準にすると、あとで「red」部をグリーンに、「left」部を中央に変更したりすることが生じた場合混乱を招きます。

見本
id	意味
div#container	全体を囲むdiv要素
div#header	ヘッダー
div#globalnav	メニュー
div#search	検索部分
div#visual	画像部分
div#wrapper	マルチカラムのデザイン調整用空ボックス
div#main	主要部分
div#sub	サイドバー
div#footer	フッター

Internet Explorer

Internet Explorer 6 における CSS の拡張Microsoft

IPアドレスの変更

[コントロールパネル]―[ネットワーク]―[ローカルエリア接続]―[…]―[TCP/IP]―[…]

link要素

【例】
<link href="stylesheet/subpg.css" rel="stylesheet" media="screen" />
<link href="stylesheet/subpg.css" rel="stylesheet" media="screen" />

media

下のように記述します。
media="screen, projection, tv"

metaname description

半角カンマを使用
<meta name="Description" content="ウェブライティング,日本の地域,東南アジア,辞事典,総合情報についての桑原政則の空中図書館です。" />

metaname keywords　（「電子メール編」のページの場合）

半角カンマを使用
<meta name="Keywords" content="ウェブライティング,文章術,電子メール,作文,ウェブ標準（XHTML+CSS）,桑原政則,Masanori Kuwabara" />

MS-IME

MS-IMEを使いこなす

print.css

リンク文字のアンダーラインをなしに、フォント色を黒にする。
a { color: black; text-decoration: none; }

SEO　　検索エンジン最適化　Search Engine Optimization

「アクセスアップ術」。検索ランキングで上位を目指すテクニックのことですが、結局は内容の高いバリアフリーのホームページが上位に来るようになっています。バリアフリーとは、まずはウェブ標準（XHTMLとCSS）仕様のことです。 SEOの基本は「いかに訪問者にためになりわかりやすいウェブをつくるか」ということです。

検索キーワードチェックツール検索キーワードの順位チェックや、検索エンジンの一括検索
SEMリサーチ SESとはSearch Enigine Strategiesのこと

Web→ ウェブ

W3C

W3Cの仕様書等の文書の日本語訳集

XHTM仕様書

XHTML 1.0: The Extensible HyperText Markup Language(英語)
XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語(和訳)

XHTML 1.1 - Module-based XHTML(英語)
XHTML 1.1 - モジュールベースXHTML(和訳)

Extensible Markup Language (XML) 1.0(英語)
拡張可能マークアップ言語 (Extensible Markup Language) 1.0(和訳)

XHTMLの誕生とメリット

HTMLは、SGML（Standard Generalized Markup Language）を基盤言語として生まれました。しかしSGMLは一部陳腐化しはじめ、近年にいたりXML（Extensible Markup Language）として生まれ変わりました。XMLは、自由に新しい言語を規定できるので、ビジネスにおける標準的な文書形式として浸透しつつあります。このXMLを基盤言語とするのがXHTML（Extensible HyperText Markup Language）です。

XHTMLでは、データに必要な要素をDTD（文書型定義）として自由に定義することができるなどの多くの利点があります。 XHTMLは、「終了タグが省略不可」、「オーバーラップ不可」といった整形式（well-formed）で記述をするので、処理系の負荷が軽減され、データ処理が高速化され、ブラウザの動作が安定します。またDOMの利用によるデータベースとの連結や、XSLTによる文書変換が可能となるなどデータの再利用性、情報の共有化が高まるといったメリットがあります。さらに名前空間の利用により、MathMlやSVGなどのXMLアプ

XML

XML用語事典

XML仕様書

Extensible Markup Language (XML) 1.0(英語)
拡張可能マークアップ言語 (Extensible Markup Language) 1.0(和訳)

●あ　い　 う　 え　 お　

●記数英 ●か ●さ ●た ●な ●は ●ま ●や ●ら ●わ

アクセスアップ

商用サイトでは、アクセスとは来客と同じことで、売り上げと直結しています。個人サイトではやる気と直結しています。

アクセスアップの方法は、初訪問者をふやすこと、リピーター（再訪問者、常連客）をふやすことです。初訪問者をふやすには、検索エンジンで上位をめざすことと、外部からのリンクをふやすことです。リピーターをふやすには、内容の質を高め、読みやすくしたりすることです。

アンカー

【例】

<a href="http://www.aoikuma.com/">桑原政則オンライン</a>

い

色、背景色

ウェブ標準では色はCSS側が担当します。色の指定の仕方は各種ありますが、RGB各色の値を2桁ずつの16進数で示すのが一般的です。16進数では、256×256×256＝1677万色のカラーを表示することができます。ウェブセーフカラーでは、RGBの各色は「00」「33」「66」「99」「cc」「ff」のいずれかとなり、216色で構成されます。XHTMLでは16進数のローマ字は小文字で表記することになっています。

#contents { 
		background: #ffffff; 
		color: #333333;
}

ディスプレイ上で背景を白で文字色を黒にした場合、明度差が極端になり目にも悪影響をおよぼすので、文字色は黒に近いグレー「#333333」などがよろしいようです。逆に文字色が黒である場合には、背景は少し暗くします。CSSの仕様では、前景色を指定したときは背景色も指定することになっています。なお文字色は「color」であって、「font-color」ではありません。背景色はマージン（ボーダーの外側余白）には適用されないことにも注意してください。

背景のプロパティ
背景の要素	意味	備考
background	一括指定
background-color	背景色
background-image	背景画像
background-repeat	背景画像の並び方	repeat no-repeat repeat-x repeat-y
background-position	背景画像の表示意位置
background-attachment	背景画像の固定位置

印刷用の設定

CSSでは、ブラウザスタイルを初期化し、固定幅やフロートを解除し、印刷に不要な内容を非表示化し、モノクロ印刷用の設定をしたりすることが可能です。「桑原政則オンライン」のかつての例を掲げます。プリントの状態は、プリントプレビューで確認可能です。

@charset “shift_jis”;
body {
		margin-left: 1cm;
		color: #000000;
		background: #ffffff;
		line-height: 1.8;
		font-size: 10pt;
		font-family: “ＭＳ明朝”,serif;
	}


a { 
		color: black; 
		text-decoration: none; 
	}


.banner { 
		display: none； 
	}


h1 { 
font-size: 16pt ； 
	}
		
h2 { 
font-size: 14pt ; 
	}
		
h3 { 
font-size: 12pt;
	 }
	
h4 { 
font-size: 11pt;
	 }

インライン要素→ ブロックレベル要素とインライン要素

う

ウェブアクセシビリティ →ウェブアクセシビリティ編

情報閲覧性

ウェブオーサリングソフト　　web authoring soft

dreamweaverやホームページビルダーのようなホームページ作成ソフトのこと。

ウェブサイト:ウェブ標準のイベント

アックゼロヨン・アワード2006 ウェブサイトのアクセシビリティまでをも評価対象としたアワード。兵庫県　島根県　浜松市　中部大学など。

ウェブ標準の日　

　 2006年7月第1回開催。音声データあり

ウェブサイト:問題のあるウェブサイト一覧

Web標準普及プロジェクト：未解決の問題一覧

ウェブ標準の作業の流れ

従来のHTMLの編集はホームページビルダーなどのオーサリングツールだけで事足れりでしたが、ウェブ標準ではXHTML文書とCSSに対する2種の対策が必要となります。

XHTML側においては次のような作業の流れになります。

テキスト原稿を、<h1>、<p>や<img>などの要素でマークアップし、リンク指定もおこなう。
<div>要素などで内容を区画整理し、グループ化する。また<id>属性や<class>による下位区分の作業をおこなう。このマークアップ作業はCSS作成時にも、さらに並行しておこなうことになる。
XHTML文書が完成したら構文チェックをおこなう。

XHTMLソースで構文ミスがあると、正しいCSSを指定しても正常表示されないケースが多いので、XHTMLソースを適切に記述、構造化することが、シンプルなCSS制作への道です。このあと、CSS側では、次のような作業をおこないます。

構造のスタイルを示すマークアップ作業とCSS特有のマークアップ作業をおこなう。
構文チェックをおこなう。
各種ブラウザで表示の確認をする。この作業のためには、「ボックスモデル」「回り込み」「CSSハック」を正しく理解しておく必要がある。

オーサリングツールウィキペディア

ウェブ標準

ウェブスタンダードって何？どうして使うべきなんだろう？
"What are web standards and why should I use them?"The Web Standards Projectの和訳

ウェブ標準化

Web標準化Tips：Mozilla Web標準普及プロジェクト

「ウェブライティング」（トップページのボックス欄）のXHTML+CSS

見出しに濃い色を、段落に同系の薄い色を設定して、一体感を出しました。

【XHTML】

<div id="webwriting">
<h2 class="columntitle">▼<a href="webwritingpg.html">ウェブ
ライティング</a>： <a href="emailpg.htm">電子メール編</a></h2>
<dl class="column2">
<dt>定義語 </dt>
<dd>定義の説明</dd>
</dl></div>

【CSS】
/* webwriting
------------------------------------------*/
h2.columntitle {
background: #006600;
color: #DFDFDF;
margin: 0px;
padding: 10px;
}

h2.columntitle a:link{
color: #ffffff;
}

h2.columntitle a:visited{
color: #ffffff;
}

h2.columntitle a:hover{
color: #ff6600;
}

h2.columntitle a:active{
color: #ff6600;
}

dl.column2 {
background: #AAFFAA;
margin: 0px;
padding: 10px;
}

p.column2 {
background-color:#99ff66;
margin:0px;
padding: 10px;
font-weight: normal;
}

え

エンコーディングの修正

dreamweaverの場合
[修正メニュー]―[ページプロパティ]―[タイトル]―[エンコーディング]―[Shift-JIS]―[リロードボタン]

お

オーサリングツール

ソースコードを編集するのではなく、ワープロソフトのようにビジュアルに編集するツールのことです。たとえばDreamweaverはウェブオーサリングツールです。

オーサリングツールウィキペディア

●か　き　 く　 け こ

●記数英 ●あ ●さ ●た ●な ●は ●ま ●や ●ら ●わ

画像

画像に枠が表示されるのは、リンクがあるという意味。

画像枠をはみ出す：The Holly Hack

/* 親ボックスからはみ出すバグを回避 */
.boxin:after {
content:".";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}

.boxin {
display: inline-table;
}

/* Mac版 IEではこの設定は無視されるのでWin版 IEのみ適用 \*/
* html .boxin {height: 1%;}
.boxin {display:block}
/* ここまで */-->

カラー→ 色

空要素

空要素でも「br /」（ビー、アール、スペース、スラッシュ）というふうにタグを「/」でマークアップする。おもな空要素には次のようなものがある。

br, col, hr, img, input, link, meta, param

き

疑似クラス、疑似要素

リンク部分を指定する疑似クラスという特別な書式が次のように用意されています。疑似クラスにより、要素の状態別に独自の色などのスタイルを指定することができます。link→ visited→ hover→ activeの順序で記述します。

疑似クラス
疑似クラス	状態	表示例
a:link	未訪問	color: #000099 text-decoration: underline
a:visited	訪問済み	color: 990000 text-decoration: underline
a:hover	マウスオーバー	color: ff0000 text-decoration: none
a:active	選択中（離すまで）	color: ff0000 text-decoration: none

特定の部分にのみ疑似クラスを適用させるには、クラス名などを前接します。

特定部分の疑似クラス

menu a:link {color: #000099}
menu a:visited {color: 990000}
menu a:hover {color: ff0000}
menu a:active {color: ff0000}

特定部分の疑似クラス
疑似クラス	状態	表示例
menu a:link	未訪問	color: #000099
menu a:visited	訪問済み	color: 990000
menu a:hover	マウスオーバー	color: ff0000
menu a:active	選択中	color: ff0000

この他に下のような疑似要素もあります。

疑似要素
疑似要素	適用先
:first-letter	1文字目
:first-line	1行目
:before	要素の前
:after	要素の後

行間→テキスト

く

空白文字

空白文字は、XHTMLでは下の4種のみに限定されます。HTMLでは7つが使えました。

空白文字
要素名	表示記号
スペース
タブ
ラインフィード
キャリッジリターン

「くまっ典」（トップページ）のXHTML+CSS

見出し部分に背景色をつけました。右上を角丸（かどまる）にし、キャッチーでやわらかいイメージにしました。本文の部分は見出し部と同一の色で二重線で囲む。

/* kumatten
------------------------------------------------*/
#frame1{
background-color: #FFCC00;
background-image: url(../image/frame-top-right.jpg);
background-repeat: no-repeat;
background-position: right top;
padding: 20px;
}

#frame2 {
border: 4px double #FFCC00;
line-height: 150%;
padding: 10px;
}

#frame0 {
width: 100%;
}

#frame1 p {
margin: 0px;

クローラーの回避 html

け

検索キーワードチェックツール

検索キーワードの順位チェックや、検索エンジンの一括検索

検証

XHTML、CSSともに完成段階で、うっかりミスなどの確認のためにも構文の検証をおこないます。XHTMLソースで構文のミスがあると、正しいCSSを指定しても正常表示されないケースが多いです。XHTMLソースを適切に記述することが、シンプルなCSS制作への道です。CSSの検証サービスは、W3Cでも提供しています。チェックのあとで、さらに各種ブラウザで表示の確認をします。

Another HTML-Lint gateway HTML文書の文法をチェック、採点
XHTML Markup Validator XHTML文書の検証。W3C
CSS Validation Service CSSの検証。W3C

こ

更新履歴

追加や更新がおこなわれたのがどこかわかるように更新履歴をトップページの目立つ場所に表示します。RSSを配信することもおこなわれています。RSSはブログでよく利用されているもので、更新履歴を公開するための専用データです。

（「桑原政則オンライン」では、毎日更新ですので、下段に「履歴」をおいています。重要なことがらは「★お知らせ」で上段に通知しています。）

CSSではコメントは、「/* あいうえお */」のようにおこないます。タイトル、メモ、注意事項、伝言に活用できる他に、実験的に指定を一時無効にしたいときに役立ちます。コメントは入れ子にできません、つまりコメントの中にコメント入れることはできません。「/」と「*」はキーボードのテンキーでは隣り合っており、シフトキーを使う必要もないので、重宝します。複数人がかかわる場合には、コメントの書き方を統一しておく必要があります。下に用例を示します。

1） 2行目を点線にしてコメントの内容を目立ちやすくする。

/* Main Contents
 ----------------------------------------------------*/

2）指定を1時実験的に無効にするときに活用する。

/* 
dd{
	margin-bottom:15px;
	line-height:125%;
	}
	*/

3）他人への指示、連絡に活用する。

/* link要素:下2行を自分の各htmlページの<title>の下の行に貼り付けて下さい。
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” />

	 ------------------------------------------------- */

4）次のようにある行にのみコメントする。

dd{
	margin-bottom:15px;	
	line-height:130%;	/* 行間は125%でもよい */
	}

なお、XHTMLではコメントは、<!- あいうえお -> のようにおこなうので混同しないように注意してください。

●さ　し　 す　 せ　 そ

●記数英 ●あ ●か ●た ●な ●は ●ま ●や ●ら ●わ

サーバー　　server

提供者、学校、会社、機関など。＝プロバイダー

サイト製作のワークフロー

1　設計：ページのイメージ図。画面（リキッドかフローズンか。サイズは800pxかその他か）。コンテンツは2列か3列か。
2　構造化：HTMLのバージョン、種類。マークアップ。
3　デザイン：CSSによるレイアウト
4　追加修正：テキスト文。ロゴ。ヘッダー、フッターの中身。グローバルナビ（主要メニュー）。サイトカラー。タイトル
5　更新。更新。更新：自分のサイトは生鮮三品のようなものです。会社経営と同じでもぐらたたきを継続する必要があります。田んぼと同じで雑草取りを欠かしてはなりません。常時手を加えて新鮮に保つ。

　サンプル：CSS Zen Garden：CSS デザインの美（下段に検証ツール）

2段組

サンプル

Data Tables and Cascading Style Sheets Galleryテーブル版のZen Gardenのようなサイト

し

視覚表現に関する要素は使わない

たとえ、XHTML 1.0 Strictで認められていても視覚表現に関する要素、属性は使わない方がよろしいです。XHTML 2.0草案（2005年）では、下の要素、属性はすべて廃止されています。

<b>、<i>、<big>、<small>、<tt> 
table要素の<width>、<border>、<frame>、<rules>、<cellspacing>、
<cellpadding>の各属性
th、td要素の<align>、<valign>の各属性

色彩→ 色

子孫セレクタの活用

XHTMLを最適化するには、無駄なid要素やclass要素を少なくします。そのためにはこれらのセレクタの代わりに子孫セレクタでの代替を考えます。たとえば、下のようにdiv要素でul要素をラップする必要はありません。li要素にスタイルを適用する場合、classセレクタを利用すると下のようにli要素ひとつひとつにclass属性をつけることになり面倒です。

   li.items { display: inline; ... }
 
              : 		
              :
<ul id=”nav”>  
<li class=”items”><a href=”...”>項目1</a></li> 
<li class=”items”><a href=”...”>項目2</a></li> 
<li class=”items”><a href=”...”>項目3</a></li> 
</ul>

しかし子孫セレクタを使えばXHTML側での追加作業は必要ありません。そのためには、主要パーツの方にidづけしておきます。

ul#nav li { display: inline; ... }
 		: 	
     	:
 <ul id=”nav”> 
<li><a href=”...”>項目1</a></li> 
<li><a href=”...”>項目2</a></li> 
<li><a href=”...”>項目3</a></li> 
</ul>

使用禁止文字

機種依存文字を使うとマッキントッシュなどの他の機種では、文字化けになってしまいます。以下は使用禁止文字です。

半角カタカナ。
Ⅰ、Ⅱなどのローマ数字。
①、②などのマルつき数字。
㌔、㎞などの単位文字。

す

スタイルシートリンク集

スタイルシートリンク集Yahoo!

スタイルの指定

文字を含むボックスへのスタイル指定は、主としてp要素に対しておこなうのがCSSデザインの基本的な考え方です。あるいは他の利用方法がない場合にp要素を利用します。CSSではフォントサイズ、行間、字間はもちろんマージン、パディングも変更できます。

div#contents p{ 
		line-height: 150%;
		letter-spacing: 0.2em;
		margin: 0.2em;
		padding: 0.3em
}

特定のdivの票素にではなく、全体のp要素に指定をおこなう場合は次のように指定します。

p{
		line-height: 150%;
		letter-spacing: 0.2em;
		margin: 0.2em;
		padding: 0.3em
}

せ

絶対配置によるレイアウト、positionプロパティ

positionプロパティを使えば、XHTML文書の順序に関係なく、最下段の要素を最上段にもってくるといったように、どこにでも特定のdiv要素を配置できます。

div#notice {
		position: absolute; 
		width: 90px; 
		height: 20px;
		left: 770px; 
		top: 10px; 
}

注意すべきは、絶対配置は他のボックスとは、いわば別のレイヤー（階層）に属し、後続のボックスには影響を与えないので、絶対配置のボックスのテキスト量が肥大化した場合、後続のボックスと重なってしまうことがあることです。このような場合にはheightプロパティの値を変更するになります。

positionプロパティの値は、abosolute（絶対配置）の他に、relative（相対配置）、fixed（固定配置）、static（通常配置）があります。fixed（固定配置）はボックスに適用すると、ページをスクロールした場合でも移動することなくウィンドウに固定したままとなります。ナビゲーションや画像を固定したい場合に有効です。static（通常配置）はデフォルト設定で元に戻したいときに指定します。

セレクタ→idセレクタ

セレクタ（selector）の書式

セレクタ（selector）とは「選別するもの」という意味です。セレクタは、下のように書き方を統一しておきます。たとえプロパティが1個の場合でもあとでふえることを考えて、複数行で記述しておきます。

セレクタ{  
		プロパティ： 値;  	
}

dd {  
		line-height:130%;
}

プロパティが2個以上にわたる場合は、以下のように記述します。

body { 
		background: #ffffff;
 margin-top: 0;
	     margin-bottom: 0; 
		letter-spacing: 0.2em;
	   line-height: 150%; 	
}

以下のルールを作っておけば、見やすくなり、ミスする確率も少なくなります

宣言部分（プロパティ、値）にはインデントをいれる。
最後の宣言のうしろにもセミコロンを付ける。
閉じかっこはインデントしない。

セレクタとプロパティ

セレクタとは、div#footer などのようにスタイルを適用する「場所」をいい、pやh1などの要素名のセレクタ、idセレクタ、クラスセレクタなどがあります。idセレクタは、XHTMLに「 <div id=”footer”> 」と記述した場合、CSS側には次のように記します。「#」でidセレクタであることを示します。ウェブ標準では、XHTMLとCSSの両ファイルに記述をおこなうので混同しないようにします。

div#footer { 

      font-size: 75%; 

      }

上で、font-sizeのように文字サイズ、色、余白など要素（div#footer）がもつ表現の特性をプロパティといいます。プロパティはCSS2で130個ほどあります。75%の部分を「値」といいます。

セレクタとプロパティ

なお前述のごとく、「*#footer」のように「*」（ユニバーサルセレクタ）で要素を限定しない場合は、「#footer」というふうに「*」が省略可能となります。クラスセレクタにおいては、XHTMLに「 <div class=”nav”> 」と記述した場合、CSSには次のように指定します。「.」でクラスセレクタであることを示します。

div.nav { 

      font-size: 75%;

      }

なお、「*.aaa」のように「*」（ユニバーサルセレクタ）で要素を限定しない場合は、「.aaa」というふうに「*」が省略可能です。

子孫セレクタは、「Aセレクタの中のBセレクタ」を指定するときに使います。セレクタは半角スペースで区切り、「#p .nav ul li」などといくつでも指定できます。ここでは半角スペースが「の中の」を示す。従って上は、「p」の中の「.nav」の中の「ul」の中の「li」ということになります。

子孫セレクタを使いこなすことが、idセレクタやクラスセレクタを無意味に増やさないこつです。

セレクタの個別性の点数

子孫セレクタには個別性（specificity）がおのずと高くなるというメリットがあります。たとえば「li.items」は11ポイントですが、「ul#globalnav li」となると102ポイントになります。個別性が高いとスタイルがバッティングした場合でも優先的に適用されることで、作業時の混乱を防ぐことができます。

セレクタの個別性の点数
セレクタ	XHTML	CSS	点数
id	<div id=“”>	# { … }	100点
class	<div class=“”>	.{ … }	10点
要素（h1, p, など）	<h1=“”>	h1 { … }	1点
*	<html=“”>	* { … }	0点

線種→ボックスと線種

センタリング（中央寄せ）

ページ全体のセンタリングをする機能はCSSにはなく、混乱を招いています。当座はセンタリングは左右マージンの値を「auto」にし、幅を指定します。「margin: auto 」にした場合は、「上右下左」がautoになり、左右、垂直が中央寄せになります。

div#container { 
		width: 760px; 
		margin-left: auto; 
		margin-right: auto;

}

上はブロックレベルの場合ですが、インライン要素（ボックスの中のテキスト文）の場合には、以下のように指定します。

text-align: center;

そ

ソースの検証でSEOの向上を

ソースの検証は、これまであまり重視されてきませんでした。発注者側も制作者側も見栄えをを重視してきたからです。しかし、XHTMLでは、ソースにミスがあると意図通りに表示されないことが多く、この問題をさけるためにはソースの検証が必要となっています。XHTMLの検証には、W3Cの「Markup Validator」を利用します。「This Page Is Valid XHTML 1.0 Strict！」と表示されれば合格です。CSSの検証はW3Cの「CSS Validation Service」を利用します。

「検索キーワードチェックツール」も効果的です。「ウェブライティング」をサーチすると、「桑原政則オンライン」内の「ウェブライティング」はGoogleで11位、MSNで3位となっています。しかしYahoo!には見あたりません。何らかの対策を立てるべきことがわかります。「岩手県コラム」では「桑原政則オンライン」の「岩手県を歩く」はGoogleで110万件中トップ10に入っています。注力していないページが脚光を浴びているというな思わぬ発見もあります。

●た　ち　 つ　 て　 と

●記数英 ●あ ●か ●さ ●な ●は ●ま ●や ●ら ●わ

タイトル

「岩手県のページ＜桑原政則の空中図書館」のように変更しました。以前は「桑原政則：空中図書館＞岩手県のページ」で複数のファイルを開くと混同を招きがちでした。（2006年9月）

正しいマークアップ

正しいマークアップには複数解が存在することがある。というのはCSSはデザインの問題であり、主観が入り、1意に決めることができない場合が多いからである。たとえばリストに見出しをつける方法などがそうである。したがってチーム内でのコンフリクトを未然に防止するためにも、マークアップルールを決めておいたほうがよい。企業や自治体が標準のアクセシビリティ基準をもとに、独自のガイドラインを策定するのは、このためである。

脱テーブル化

テーブルを利用せずにCSSレイアウトを活用すること

段組レイアウト

→マルチカラムレイアウト

ち

中央揃え

[XHTML]
<div class="box1">
<div class="box2">
あああ
</div>
</div>

[CSS]
.box1 {
text-align: center;
}
.box2 {
width: 500px;
text-align: left;
}

ボックスの中央揃えです。ここでは left: 15% で中央に配置されます。
【XHTML】
<div class="column1">
<p> </p>
</div>

【CSS】
.column1 {
padding: 8px;
width: 500px;
line-height: 150%;
margin-right: auto;
margin-left: auto;
position: absolute;
left: 15%;
}

チェックツール validator

チェッカー、バリデータ（validator）とも。

Another HTML-lint gateway
HTML文書の文法をチェックし、採点します。最も多くのウェブデザイナーが利用しています。（『Web Designing』2006年10月）
Another HTML-lint gateway

Web Developer Toolbar
Mozilla Firefox用です。デスクトップに保存したダウンロード済みのファイルをFirefoxのウィンドウ内にドラッグしてください。
Web Developerのダウンロードと説明
 Web Developer アップデート時の不具合への対処方法

W3C Markup Validation Service　（XHTML）
W3C Markup Validation Service(英)

W3C CSS 検証サービス
CSSチェックツール
W3C CSS 検証サービス要ダウンロード

WebInspector（ウェブインスペクター）
WebInspector（ウェブインスペクター）：無償ダウンロード
作成したWebサイトが高齢者、障害者にとっても読みやすいかを診断するツール。富士通

つ

*

て

テーブル

定義リストdlの応用例

定義リストdl（definition list）は応用範囲が広く、テーブルの使用を避けるためにも使われます。dt（definition term）やdd（definition description）は重複仕様できます。

dl定義リストの応用例

ナビゲーションメニュー
サイトマップ
Q&A
お問い合わせフォーム
商品リスト（dtに画像を配置する）
新着情報
対談（dtに発言者を配置する）
タイムテーブル
会社沿革（年表）
会社案内
役員紹介

テキスト、行間、文字間

文章量が多い場合には行間を変えるだけで、可読性を高めることができます。125%、150%、場合によっては200%にします。標準（デフォルト）は「line-height: 100%」です。

また文字間隔を広げると、ゆとりのある印象をあたえることができます。0.2em、0.3em、場合によっては0.5emにします。標準（デフォルト）は「letter-spacing: 0em;」です。このように行間、文字間を自在に変更できるところにもCSSの大きな魅力があります。

テキストのプロパティ
テキスト	意味	備考
line-height	行間	「line-height」とは行間のこと
text-align	行揃え
vertical-align	縦位置
text-decoration	下線、上線、取消線
white-space	空白、改行、タブ
letter-spacing	文字間隔
text-indent	1行目のインデント

適用メディアの指定→メディアの指定

と

●な　に ぬ　 ね　 の

●記数英 ●あ ●か ●さ ●た ●な ●は ●ま ●や ●ら ●わ

CSSバグ辞典

『CSSバグ辞典スレッド』の要約。下ほど新しいです。

内部CSSの外部CSSへの書き出し

[htmlファイル]―[書き出し]―[CSSスタイル]。このあと内部スタイルシート削除。

ボーダーを設定する。
背景色を設定する。
リンク文字の下線を非表示にする。
リストマークを非表示にする。
マウスオーバーで色を変える。
ボタン全域をリンク領域にする。
【XHTML】
<div id="navi">
<ul>
<li><a href="indexall.html"> 総索引</a></li>
<li><a href="webwritingpg.html"> ウェブライティング</a></li>
<li><a href="index-life.htm"> くらし・仕事</a></li>
<li><a href="index_country.htm"> 地域（日・世）</a></li>
<li><a href="kumaten.html"> くまっ典</a></li>
<li> <a href="pctermpg.html"> IT辞事典</a></li>
<li><a href="wspg.htm"> 桑原政則</a></li>
<li><a href="kohowtuousepg.html"> ヘルプ・使い方</a></li>
</ul>
</div>

【CSS】
#navi {
float: left;
width: 235px;
margin-top: 77px;
}
#navi a {
text-decoration: none;
background: #f6f6f6;
border-top: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
border-left: 5px solid #d0d0d0;
display: block;
width: 95%;
}
#navi li {
padding-top: 1px;
padding-bottom: 1px;
font-size: 16px;
line-height: 150%;
font-weight: bold;
margin-bottom: 1px;
}
#navi a:hover {
background: #C8C8FF;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 5px solid #ff0000;
}
#navi ul {
margin-left: 0px;
padding-left: 0px;
list-style: none;
}

に

*

ぬ

*

ね

*

の

*

●は　ひ　 ふ　 へ　 ほ

●記数英 ●あ ●か ●さ ●た ●な ●ま ●や ●ら ●わ

背景色→ 色

バグの回避

HTML,CSSバグ＆回避法リストkeynavi.net

パディング→ ボックスと線種

バリデータ→ チェックツール

パンくずリスト＝パンくずナビ＝トピックパス

パンくずリストは訪問者の道しるべで、迷子から救うことにもなります。また内部リンクの数がふえるので、検索ランキングアップのもとにもなります。
【例】現在位置：桑原政則オンラインのトップ＞ウェブライティングのページ

ひ

表示モード：互換モード（Transitional）と標準モード（Strict）

IE6などのモダンブラウザには互換モードと標準モードの2種の表示モードが搭載されています。DOCTYPE宣言の内容によってモードを自動切り替えするようになっています。後方互換モードとも呼ばれる互換モードはある程度間違った記述をしてもカバーして表示するが、正しいXHTMLやCSSを独自解釈し標準とは異なる表示をしてしまうという欠点があります。ブラウザの後方互換性や制作者側の技術的な都合、上司・責任者の理解不足などにより時期尚早と判断される場合には、過渡的措置として、互換モードが採用されます。現状では、「XHTML 1.0 Transitional」を採用するのが一般的です。互換モードでは、「_blank」やフレームなどは許容されます。

標準仕様準拠モードともよばれる標準モードは、まちがったXHTMLやCSSを記述すると記述を無視してしまうが、標準仕様の通りに記すと指示通りに表示します。具体的には、文書構造と視覚表現を厳密に分離し、非推奨の要素、属性を使用しないのが、標準モードです。書式が厳格であればあるほど、ブラウザなどはデータ処理を安定的におこないます。

標準モードでは、下のようにURLを含んだDOCTYPE宣言をします。ただXHTML文書では、<?xml version=”1.0” encoding=”shift_jis”?>のようにXML宣言を配置することが推奨されているが、困ったことにIE6では、XML宣言などのような何らかのテキストがDOCTYPE宣言の前にあると、互換モードとして処理されてしまうことがあるので、現時点ではXML宣言はしない方がよろしいです。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

DOCTYPE宣言と表示モードとの関係
DOCTYPE宣言	URL	IE6	その他のブラウザ
なし	なし	互換モード	互換モード

HTML4.01 Transitional	URLなし	互換モード	互換モード
HTML4.01 Transitional	URLあり	標準モード	標準モード

HTML4.01 Strict	URLなし	標準モード	標準モード
HTML4.01 Strict	URLあり	標準モード	標準モード

XHTML1.0 Transitional	URLなし	標準モード	互換モード
XHTML1.0 Transitional	URLあり	互換モード	標準モード

XHTML1.0 Strict	URLなし	標準モード	標準モード
XHTML1.0 Strict	URLあり	互換モード	標準モード

XHTML1.1		（省略）

【注】XHTMLのURLありには、<?xml version=”1.0” encoding=”shift_jis”?>のXML宣言を含む。

表の改行の禁止

表組みにおいて文字の折り返しを禁止する場合は、nowrapを指定します。 wrapとは「包む」ことです。

 th,td { 
		white-space: nowrap;
 }

ふ

フォント

フォント要素はCSS側で用います。XHTML側では用いません。XHTML側で用いると、DOCTYPE宣言がstrictの場合は文法違反となります。テーブル要素やフォント要素をCSSが担当することにより、XHTMLは大幅にスリム化されます。

ただ、テーブル要素やフォント要素の排除は、既存のHTMLサイトをウェブ標準に直す際に生じるやっかいな問題で、わたしのサイトのウェブ標準化が進まない原因となっています。

フォント
フォント	意味	備考
color	文字色	font-colorでないことに注意
font	一括指定
font-family	フォントの種類
font-size	フォントサイズ	%、emの相対単位で記す
font-style	イタリック
font-variant	スモールキャップ
font-weight	太さ

フォントサイズは、ユーザビリティを考慮して、相対単位の「%」「em」で指定します。値が「0」のときは単位をつけなくてもよろしいです。「pt」「px」は、IEでは文字サイズが固定されるので、使用しないようにします。

ブラウザ対策

Position Is Everything IEなどのブラウザで発生する問題と解決法

ブラウザの種類とCSSの解釈

ブラウザにはレンダリングエンジンが搭載されています。レンダリングとはデータを可視化することです。IE系、SleipnirにはMSHTMLエンジンが、Firefox、Mozilla、Netsacape系にはGeckoエンジンが、またOperaにはPrestoエンジンが搭載されています。その他のブラウザもあります。現状ではIE系とGecko系への対策を主として講ずればよしとします。

HTMLレンダリングエンジンウィキペディア

フレームは使わない　

フレームは、アクセシビリティやSEOの観点からも望ましくないです。将来的には使えなくなります。「フレームは百害あって一利なし」といわれており、次のような欠点があります。

ナビゲーションを失ったページが表示されてしまう。
URLでフレームの中身を指定できない。
キーワード対策がしにくい。
フレームセットのページに情報がない。

ブロックレベル要素とインライン要素

下にウェブ標準で使用される基本要素であるブロックレベル要素とインライン要素を示します。要素の種類そのものはそれほど多くないです。見出しは、煩を厭って掲載しなかったが、<h6>まであります。h1は1ページに1つだけ指定します。ページ中では見出しレベルは <h1>→<h2>→<h3> へというふうに順を追っていくことが原則です。表からわかるように、元の英名を知れば要素名は自然に理解できます。


         ブロックレベル要素
        
          要素
          英語
          要素名
          
        
          <h1>
          heading 1
          見出し1
          
        
          <h2>
          heading 2
          見出し2
          
        
          <h3>
          heading 3
          見出し3
          
        
          <p>
          paragraph
          段落
          
        
          <ul>
          unordered list
          箇条書きリスト
          
        
          <ol>
          ordered list
          番号リスト
          
        
          <dl>
          definition list
          定義リスト
          
        
          <address>
          address
          問い合わせ先
          
        
          <div>
          division
          グループ化
          
        
          <pre>
          preformatted
          整形済みテキスト

ブロックレベル要素
要素	英語	要素名
<h1>	heading 1	見出し1
<h2>	heading 2	見出し2
<h3>	heading 3	見出し3
<p>	paragraph	段落
<ul>	unordered list	箇条書きリスト
<ol>	ordered list	番号リスト
<dl>	definition list	定義リスト
<address>	address	問い合わせ先
<div>	division	グループ化
<pre>	preformatted	整形済みテキスト

インライン要素
要素	英語	要素名
<a>	anchor	リンク
<imag>	image	画像
<em>	emphasis	強調
<strong>	strong	より強い強調
<br />	break	任意の改行
<span>	span	任意の範囲

ブログはSEO効果が高い

ブログが検索サイトの上位を占めるようになってきています。社長の近況報告などのプライベートブログ、販促などのプローモーションブログ、キャンペーンブログなどのビジネスブログが増殖中です。ブログのSEO上のメリットは、次のようです。

1ページ1トピックで更新頻度が高い。
コメント、トラックバック機能でキーワードの出現率が高くなり、被リンク数が多くなり、その結果リンクポピュラリティが高くなる。

プロパティ　＜CSS

プロパティ一覧CSSリファレンス

へ

ページ内リンク

上（「この下」とのコメントを）、<a href="aiueo">
下、<a name ="aiueo">

ほ

ボックスと線種

要素は、マージン、ボーダー、パディング、コンテンツ領域の4つの部分からなります。注意すべきは、widthとはコンテンツ領域の幅のことであって、マージン、ボーダー、パディングは含まれないことです。このwidthの定義は誤解を生み、値の算出を複雑にしています。背景（壁紙）はマージンには適用されません、ボーダーには適用されます。

marginやpaddingには、異なった数値を指定することができます。4つ指定した場合は、時計回りとなります。

margin paddingへの数値の指定
指定の数値	上	右	下	左
margin, padding: 10px	10px	10px	10px	10px
margin, padding: 10px 20px	10px	20px	10px	20px
margin, padding: 10px 20px 30px	10px	20px	30px	20px
margin, padding: 10px 20px 30px 40px	10px	20px	30px	40px

一般にbody要素、h要素、p要素のマージンはブラウザのデフォルト値が設定されています。ボーダーでは色、太さ、線種を指定します。デフォルト値では線種が「none」となっているので、線を表示するには次のように線種を指定することになります。

線種の指定
線種のプロパティ	意味
solid	実線
double	二重線
dotted	点線
dushed	破線
inset	立体凹効果
outset	立体凸効果
groove	枠線の立体凹効果
ridge	枠線の立体凸効果

ボタン

ボタンはリンクを示すので、下線を消す。

●ま　み　 む　 め　 も

●記数英 ●あ ●か ●さ ●た ●な ●は ●や ●ら ●わ

マークアップ mark-up

タグ付け。ソースコードにタグを手打ちすること。

マージン→ ボックスと線種

マルチカラムレイアウト　multi-column layout

マルティカラムレイアウトは、段組みレイアウト、多段組みともよばれます。CSS特有の技法floatプロパティを使っておこないます。この作業の際にはdiv要素でつくったボックスに背景色と文字色を指定しておくと、ボックスが視覚化できるので混乱を招くことがありません。暫定的に指定した背景色は完成後に削除します。 Dreamweaver 8のようなオーサーリングツールにはこのような機能（ビジュアルエイド）がそなえられています。段組みは2段組み、3段組みが主流です。4段組み以上の場合は、ボックスに下位ボックスを組み込んでおこないます。

回り込み

HTMLでは、画像をテキストの左側に回り込ませたい場合、「align=”left”」を使ったり、画像とテキストの間隔はhspace（左右の余白）、vspace（上下の余白）で指定したりしました。しかしXHTMLではこれらはすべて非推奨属性であるので、「float」「margin」を使いCSSのimg要素に対して定義をおこないます。

img{
		float: left;
		margin-right: 30px;
		margin-bottom: 20px;
	}

floatプロパティを使ったあとで回り込みを解除するには、clearプロパティを用います。XHTML側で、次のように記述します。「あいうえお」行から回り込みが解除されます。

<p class=”clearfloat”>あいうえお</p>

対して、CSS側では次のように指定します。

p.clearfloat { 
		clear: left; 
}

なお、画像ではなくテキストを回り込みの対象とするとclearプロパティでは解除できません。

HTML要素のalign属性、hspace属性、vspace属性は、凝ったデザインになるほどファイルサイズが肥大化していきます。CSSを用いれば、デザインはすべてCSSで管理できるので、XHTMLソースはシンプルになります。

このようにCSSのデザインの作業は、情報の表示順序を決めるリニアライズ（線形化）から始まり、情報をfloatプロパティで並べ替えたりして段組みをおこない、そのあと見栄えを整えていくことになります。段組みプロパティは、現行のCSS2には用意されておらず、CSS3に含まれることになっています。

み

*

む

*

め

メディアの指定

CSSの適用対象メディアを設定するためのメディア属性には9種類ありますが、ブラウザで認識されるのは現状では「screen」「print」「all」程度です。下で「連続」とは全体を一つの連続体として出力するメディアのことです。

適用メディア
メディア属性	メディア	出力メディア
screen	パソコン画面	連続
tty	テキスト端末	連続
tv	テレビ	連続。ページ
projection	プロジェクタ	ページ
handheld	携帯用機器	連続。ページ
print	プリンタ	ページ
braille	点字出力	連続
aural	音声出力	連続
all	すべてのメディア	…

XHTMLにはtitle行の下に次のように記述します。

<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />

も

文字間隔→テキスト

広めにする。デフォルトは0emsです。
letter-spacing:0.2ems

文字コード

文字コードはCSSファイルの第1行に記述しておきます。この文字コードセットは、XHTMLファイルには影響をおよぼしません。

@charset “Shift_JIS”;

「utf-8」の場合は「@charset “utf-8”;」となります。

文字実体参照 character entity references

文字実体参照は5種が使えます。なお、属性値内の最初と最後の空白文字は無視されます。文字実体参照は文字を直接記述するのではなく、文字コードを記述します。

文字参照
要素名	文字参照	表示記号
<	<	less than
>	>	greater than
&	&	ampersand
"	&quat;	quotation
'	'	apostrophe

文字色

文字色は「color」であって、「font-color」ではない

問題のあるサイト

Web標準普及プロジェクト：未解決の問題一覧問題のあるウェブサイト一覧

●や　ゆ　 よ　

●記数英 ●あ ●か ●さ ●た ●な ●は ●ま ●ら ●わ

*

ゆ

*

よ

要素とは

要素とは、下で、開始タグ（<h1>）から終了タグ（</h1>）を含む領域のことです。「<h1>あいうえお</h1>」がh1要素となります。

要素＝開始タグ＋要素内容＋終了タグ

XHTML文書は全体がhtml要素からなっています。html要素のなかにhead要素、body要素があり、さらにそれらの中にさまざまな要素が入れ子になっています。

横スクロール

横スクロールは、操作が面倒なので、いやがられます。画面設定を変更して、異なる環境での表示状況のチェックが必要です。

●ら　り　 る　 れ　 ろ

●記数英 ●あ ●か ●さ ●た ●な ●は ●ま ●や ●わ

*

り

リストマークの種類

CSSデザインではナビゲーションの定義にリスト要素を使うのがふつうです。リスト化するとユーザビリティがあがります。list-style-typeの値には次のようなものがあります。

リストの種類
リストの値	意味
none	マーカーなし
disc	黒丸（標準）
circle	白丸
square	四角
decimal	アラビア数字
lower-alpha	小文字アルファベット
upper-alpha	大文字アルファベット

list-style-imageを使えば、自分で用意した画像をマーカーにすることができます。その場合は「url（画像ファイルパス）」を指定することになります。

#menu li { 
		list-style-image: url(marker1.gif);  
}

リピーター　　repeater

再訪問者、常連客。ホームページのサポーターで、アクセス数を伸ばしてくれる大事な方々です。

リンク部分の色、hover、ダイナミック疑似クラス

a要素に以下の順序で指定します。 hoverは、エアクッションで浮き上がるホバークラフトでおなじみです。正式には「ハバ」と発音します。

リンク部分の色

a:link	{ color: blue; }	通常時のリンク色
a:visited	{ color: purple; }	訪問済みのリンク色
a:hover	{ color : yellow; }	クリックした瞬間のリンク色
a:active	{ color: red; }	マウスを乗せたときのリンク色

hoverとactiveを同内容にするには次のように指定します。

a:hover, a:active {

      border-bottom: 1px solid #ff0000;

      color: #ff0000;

      background: transparent;
}

る

*

れ

レンダリング

HTMLなどの記述用言語で書かれたデータを可視化することで、そのためのプログラムをレンダリングエンジンといいます。

HTMLレンダリングエンジンウィキペディア

ろ

ロボット

＝検索エンジンロボット、クローラー、スパイダー

ロボット検索回避

noindex - 検索データベースへの登録を禁止

nofollow - このページに含まれるリンクをたどることを禁止

●わ　

●記数英 ●あ ●か ●さ ●た ●な ●は ●ま ●や ●ら

ウェブ表現論：ウェブ標準用語辞典

●記数英

@charset

a href

address

border

br 任意の改行

CSS

CSS仕様書

CSSハック

CSSのメリットとデメリット

CSSの歴史

div要素を少なく

DOCTYPE宣言

em要素 ＜CSS

font-family

footer

<h1>

height

HTML仕様書

hover→ リンク部分の色

idセレクタ、classセレクタ

Internet Explorer

IPアドレスの変更

link要素

media

metaname description

metaname keywords （「電子メール編」のページの場合）

MS-IME

print.css

SEO 検索エンジン最適化 Search Engine Optimization

Web→ ウェブ

W3C

XHTM仕様書

XHTMLの誕生とメリット

XML

XML仕様書

●あ い う え お

アクセスアップ

アンカー

い

色、背景色

印刷用の設定

インライン要素→ ブロックレベル要素とインライン要素

う

ウェブアクセシビリティ →ウェブアクセシビリティ編

ウェブオーサリングソフト web authoring soft

ウェブサイト:ウェブ標準のイベント

ウェブサイト:問題のあるウェブサイト一覧

ウェブ標準の作業の流れ

ウェブ標準

ウェブ標準化

「ウェブライティング」（トップページのボックス欄）のXHTML+CSS

え

エンコーディングの修正

お

オーサリングツール

●か き く け こ

画像

画像 枠をはみ出す：The Holly Hack

カラー→ 色

空要素

き

疑似クラス、疑似要素

特定部分の疑似クラス

行間→テキスト

く

空白文字

「くまっ典」（トップページ）のXHTML+CSS

クローラーの回避 html

け

検索キーワードチェックツール

検証

こ

更新履歴

コメント

●さ し す せ そ

サーバー server

サイト製作のワークフロー

サンプル ：CSS Zen Garden：CSS デザインの美 （下段に検証ツール）

CSSのメリットとデメリット　

em要素　＜CSS

metaname keywords　（「電子メール編」のページの場合）

SEO　　検索エンジン最適化　Search Engine Optimization

●あ　い　う　え　お　

ウェブオーサリングソフト　　web authoring soft

●か　き　く　けこ

画像枠をはみ出す：The Holly Hack

●さ　し　す　せ　そ

サーバー　　server

　サンプル：CSS Zen Garden：CSS デザインの美（下段に検証ツール）

●た　ち　つ　て　と

●な　にぬ　ね　の

●は　ひ　ふ　へ　ほ

パンくずリスト＝パンくずナビ＝トピックパス

フレームは使わない　

プロパティ　＜CSS