タグ(html,css)辞典

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

2009-08-30T11:27:00.000+09:00

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;
}

リストマークの種類

2009-08-30T11:25:00.000+09:00

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);  
}

横スクロール

2009-08-30T11:00:00.001+09:00

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

要素とは

2009-08-30T10:59:00.001+09:00

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

要素＝開始タグ＋要素内容＋終了タグ
XHTML文書は全体がhtml要素からなっています。html要素のなかにhead要素、body要素があり、さらにそれらの中にさまざまな要素が入れ子になっています。

メディアの指定

2009-08-30T10:54:00.002+09:00

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” />

ボタン

2009-08-30T10:52:00.001+09:00

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

ボックスと線種

2009-08-30T10:50:00.001+09:00

要素は、マージン、ボーダー、パディング、コンテンツ領域の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	枠線の立体凸効果

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

2009-08-30T10:46:00.000+09:00

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













 ブロックレベル要素                    要素            英語            要素名            
           <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	任意の範囲

フォント

2009-08-30T10:34:00.002+09:00

フォント要素は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では文字サイズが固定されるので、使用しないようにします。

表示モード

2009-08-30T10:33:00.000+09:00

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

IE6 などのモダンブラウザには互換モードと標準モードの2種の表示モードが搭載されています。DOCTYPE宣言の内容によってモードを自動切り替えするようになっています。後方互換モードとも呼ばれる互換モードはある程度間違った記述をしてもカバーして表示するが、正しいXHTMLやCSSを独自解釈し標準とは異なる表示をしてしまうという欠点があります。ブラウザの後方互換性や制作者側の技術的な都合、上司・責任者の理解不足などにより時期尚早と判断される場合には、過渡的措置として、互換モードが採用されます。現状では、「XHTML 1.0 Transitional」を採用するのが一般的です。互換モードでは、「_blank」やフレームなどは許容されます。
標準仕様準拠モードともよばれる標準モードは、まちがったXHTMLやCSSを記述すると記述を無視してしまうが、標準仕様の通りに記すと指示通りに表示します。具体的には、文書構造と視覚表現を厳密に分離し、非推奨の要素、属性を使用しないのが、標準モードです。書式が厳格であればあるほど、ブラウザなどはデータ処理を安定的におこないます。
標準モードでは、下のようにURLを含んだDOCTYPE宣言をします。ただXHTML文書では、のようにXML宣言を配置することが推奨されているが、困ったことにIE6では、XML宣言などのような何らかのテキストがDOCTYPE宣言の前にあると、互換モードとして処理されてしまうことがあるので、現時点ではXML宣言はしない方がよろしいです。

“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宣言を含む。

テキスト、行間、文字間

2009-08-30T10:31:00.000+09:00

文章量が多い場合には行間を変えるだけで、可読性を高めることができます。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行目のインデント

セレクタの個別性の点数

2009-08-30T10:20:00.002+09:00

子孫セレクタには個別性（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点

サンプル

2009-08-30T09:58:00.002+09:00

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

2段組

サンプル

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

2009-08-30T09:56:00.003+09:00

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

/* Main Contents

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

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

/* 

dd{

	margin-bottom:15px;

	line-height:125%;

	}

	*/

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

/* link要素:下2行を自分の各htmlページの





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

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

dd{

	margin-bottom:15px;	

	line-height:130%;	/* 行間は125%でもよい */

	}

なお、XHTMLではコメントは、
＜！-- コメント　--＞
のようにおこなうので混同しないように注意してください。

空白文字

2009-08-30T09:14:00.001+09:00

ボーダーを設定する。
背景色を設定する。
リンク文字の下線を非表示にする。
リストマークを非表示にする。
マウスオーバーで色を変える。
ボタン全域をリンク領域にする。

【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;
}

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

2009-06-16T17:33:00.000+09:00

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

CSSバグ辞典

2009-06-16T17:31:00.002+09:00

『CSSバグ辞典スレッド』の要約。@@リンク切れ下ほど新しいです。

適用メディアの指定

2009-06-16T17:31:00.001+09:00

→メディアの指定

定義リストdlの応用例

2009-06-16T17:28:00.000+09:00

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

dl定義リストの応用例

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

中央揃え

2009-06-16T17:27:00.000+09:00

[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%;
}

段組レイアウト

2009-06-16T17:25:00.002+09:00

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

脱テーブル化

2009-06-16T17:25:00.001+09:00

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

正しいマークアップ

2009-06-16T17:23:00.000+09:00

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

・富士通ウェブ・アクセシビリティ指針
・情報バリアフリーガイドライン神奈川県
・アクセシブルなホームページを目指して島根県

タイトル

2009-06-16T17:21:00.000+09:00

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

ページ内リンク

2009-06-16T17:20:00.000+09:00

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

プロパティ　＜CSS

2009-06-16T17:19:00.000+09:00

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

ブログはSEO効果が高い

2009-06-16T17:18:00.000+09:00

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

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

フレームは使わない

2009-06-16T17:16:00.000+09:00

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

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

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

2009-06-16T17:15:00.000+09:00

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

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

ブラウザ対策

2009-06-16T17:13:00.000+09:00

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

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

2009-06-16T17:11:00.000+09:00

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

バリデータ

2009-06-16T17:10:00.000+09:00

→チェックツール

パディング

2009-06-16T17:09:00.000+09:00

→ボックスと線種

バグの回避

2009-06-16T17:08:00.000+09:00

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

背景色

2009-06-16T17:03:00.000+09:00

→色

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

2009-06-16T17:00:00.000+09:00

ソースの検証は、これまであまり重視されてきませんでした。発注者側も制作者側も見栄えをを重視してきたからです。
しかし、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に入っています。注力していないページが脚光を浴びているというような思わぬ発見もあります。

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

2009-06-16T16:58:00.002+09:00

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

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

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

text-align: center;

線種

2009-06-16T16:58:00.001+09:00

→ボックスと線種

セレクタとプロパティ

2009-06-16T16:52:00.001+09:00

セレクタとは、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セレクタやクラスセレクタを無意味に増やさないこつです。

セレクタ（selector）の書式

2009-06-16T16:48:00.000+09:00

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

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

dd {
line-height: 130%;
}

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

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

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

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

セレクタ

2009-06-16T16:46:00.000+09:00

→idセレクタ

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

2009-06-16T16:44:00.001+09:00

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

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

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

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

スタイルの指定

2009-06-16T16:42:00.001+09:00

文字を含むボックスへのスタイル指定は、主として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
}

スタイルシートリンク集

2009-06-16T16:41:00.000+09:00

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

使用禁止文字

2009-06-16T16:40:00.000+09:00

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

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

子孫セレクタの活用

2009-06-16T16:35:00.002+09:00

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>

色彩

2009-06-16T16:34:00.000+09:00

→色

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

2009-06-16T16:28:00.000+09:00

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

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

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

2009-06-16T16:24:00.000+09:00

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

サーバー　server

2009-06-16T16:22:00.000+09:00

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

問題のあるサイト

2009-06-16T16:21:00.000+09:00

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

文字色

2009-06-16T16:20:00.000+09:00

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

文字コード

2009-06-16T16:19:00.001+09:00

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

@charset “Shift_JIS”;

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

文字間隔

2009-06-16T16:18:00.000+09:00

→テキスト

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

回り込み

2009-06-16T16:15:00.002+09:00

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に含まれることになっています。

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

2009-06-16T16:14:00.000+09:00

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

マージン

2009-06-16T16:13:00.001+09:00

→ボックスと線種

マークアップ mark-up

2009-06-16T16:11:00.000+09:00

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

更新履歴

2009-06-16T16:10:00.000+09:00

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

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

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

2009-06-16T16:08:00.001+09:00

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

クローラーの回避　html

2009-06-16T16:07:00.000+09:00

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

2009-06-16T16:05:00.000+09:00

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

/* 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;

行間

2009-06-16T16:03:00.000+09:00

→テキスト

空要素

2009-06-16T16:01:00.000+09:00

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

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

カラー

2009-06-16T15:59:00.000+09:00

→色

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

2009-06-16T15:58:00.000+09:00

/* 親ボックスからはみ出すバグを回避 */
.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}
/* ここまで */

画像

2009-06-16T15:57:00.000+09:00

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

ロボット検索回避

2009-06-16T15:56:00.000+09:00

ロボット

2009-06-16T15:55:00.000+09:00

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

レンダリング

2009-06-16T15:54:00.002+09:00

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

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

リピーター　repeater

2009-06-16T15:53:00.000+09:00

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

オーサリングツール

2009-06-16T15:36:00.002+09:00

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

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

エンコーディングの修正

2009-06-16T15:36:00.001+09:00

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

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

2009-06-16T15:33:00.001+09:00

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

【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;
}

ウェブ標準化

2009-06-16T15:31:00.001+09:00

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

ウェブ標準

2009-06-16T15:30:00.000+09:00

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

ウェブ標準の作業の流れ

2009-06-16T15:27:00.004+09:00

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

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

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

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

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

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

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

2009-06-16T15:26:00.000+09:00

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

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

2009-06-16T15:22:00.003+09:00

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

ウェブ標準の日2006年7月第1回開催。音声データあり

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

2009-06-16T15:21:00.001+09:00

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

ウェブアクセシビリティ

2009-06-16T15:20:00.001+09:00

情報閲覧性。

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

インライン要素

2009-06-16T15:18:00.001+09:00

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

印刷用の設定

2009-06-16T15:17:00.000+09:00

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;
}

アンカー

2009-06-16T15:16:00.000+09:00

【例】

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

アクセスアップ

2009-06-16T15:11:00.000+09:00

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

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

XML仕様書

2009-06-16T15:09:00.000+09:00

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

XML

2009-06-16T15:08:00.000+09:00

XML用語事典

XHTMLの誕生とメリット

2009-06-16T15:07:00.000+09:00

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アプ@@文章が途切れてます

XHTM仕様書

2009-06-16T15:04:00.001+09:00

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(和訳)

W3C

2009-06-16T15:03:00.000+09:00

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

Web

2009-06-16T15:02:00.001+09:00

→ウェブ@@こんな項目は無い

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

2009-06-16T15:01:00.001+09:00

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

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

print.css

2009-06-16T15:00:00.001+09:00

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

MS-IME

2009-06-16T14:59:00.001+09:00

MS-IMEを使いこなす

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

2009-06-16T14:58:00.001+09:00

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

metaname description

2009-06-16T14:57:00.001+09:00

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

media

2009-06-16T14:56:00.001+09:00

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

link要素

2009-06-16T14:55:00.002+09:00

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

IPアドレスの変更

2009-06-16T14:54:00.001+09:00

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

タグ(html,css)辞典

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

リストマークの種類

横スクロール

要素とは

メディアの指定

ボタン

ボックスと線種

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

フォント

表示モード

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

テキスト、行間、文字間

セレクタの個別性の点数

サンプル

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

サンプル

コメント

空白文字

ナビゲーション

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

CSSバグ辞典

適用メディアの指定

定義リストdlの応用例

中央揃え

段組レイアウト

脱テーブル化

正しいマークアップ

タイトル

ページ内リンク

プロパティ ＜CSS

ブログはSEO効果が高い

フレームは使わない

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

ブラウザ対策

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

バリデータ

パディング

バグの回避

背景色

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

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

線種

セレクタとプロパティ

セレクタ（selector）の書式

セレクタ

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

スタイルの指定

スタイルシートリンク集

使用禁止文字

子孫セレクタの活用

色彩

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

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

サーバー server

問題のあるサイト

文字色

文字コード

文字間隔

回り込み

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

マージン

マークアップ mark-up

更新履歴

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

クローラーの回避 html

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

行間

空要素

カラー

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

画像

ロボット検索回避

ロボット

レンダリング

リピーター repeater

オーサリングツール

エンコーディングの修正

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

ウェブ標準化

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

プロパティ　＜CSS

サーバー　server

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

クローラーの回避　html

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

リピーター　repeater

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

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

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