2009年8月30日日曜日

リンク部分の色、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;
}

リストマークの種類

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

横スクロール

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

要素とは

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



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

メディアの指定

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

ボタン

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

ボックスと線種

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

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

下にウェブ標準で使用される基本要素であるブロックレベル要素とインライン要素を示します。要素の種類そのものはそれほど多くないです。見出しは、 煩を厭って掲載しなかったが、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 整形済みテキスト
インライン要素
要素 英語 要素名
<a> anchor リンク
<imag> image 画像
<em> emphasis 強調
<strong> strong より強い強調
<br /> break 任意の改行
<span> span 任意の範囲

 

フォント

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

表示モード

表示モード:互換モード(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宣言を含む。

テキスト、行間、文字間

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

セレクタの個別性の点数

子孫セレクタには個別性 (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 Zen Garden:CSS デザインの美 (下段に検証ツール)

2段組
  1. My Legacy
  2. simple
  3. Ault
  4. Nature
  5. simple, white, and green

サンプル

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

コメント

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年6月16日火曜日

ナビゲーション

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

【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への書き出し

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

CSSバグ辞典

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

適用メディアの指定

→メディアの指定

定義リストdlの応用例

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

dl定義リストの応用例

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

中央揃え

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

段組レイアウト

マルチカラムレイアウト

脱テーブル化

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

正しいマークアップ

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

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

タイトル

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

ページ内リンク

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

プロパティ <CSS

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

ブログはSEO効果が高い

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

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

フレームは使わない

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

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

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

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

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

ブラウザ対策

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

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

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

バリデータ

→チェックツール

パディング

→ボックスと線種

バグの回避

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

背景色

ソースの検証で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に入っています。注力していないページが脚光を浴びているというような思わぬ発見もあります。

センタリング(中央寄せ)

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

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

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

text-align: center;

線種

→ボックスと線種

セレクタとプロパティ

セレクタとは、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)の書式

セレクタ(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. 閉じかっこはインデントしない。

セレクタ

idセレクタ

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

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

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

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

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

スタイルの指定

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

スタイルシートリンク集

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

使用禁止文字

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

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

子孫セレクタの活用

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>

色彩

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

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

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

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

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

サーバー server

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

問題のあるサイト

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

文字色

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

文字コード

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

@charset “Shift_JIS”;

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

文字間隔

→テキスト

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

回り込み

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

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

マージン

→ボックスと線種

マークアップ mark-up

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

更新履歴

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

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

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

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

クローラーの回避 html

<meta name="robots" content="noindex, nofollow" />

「くまっ典」(トップページ)の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;

行間

→テキスト

空要素

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

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

カラー

画像 枠をはみ出す: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}
/* ここまで */

画像

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

ロボット検索回避

<meta name="robots" content="noindex,nofollow">
* noindex - 検索データベースへの登録を禁止
* nofollow - このページに含まれるリンクをたどることを禁止

ロボット

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

レンダリング

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

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

リピーター repeater

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

オーサリングツール

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

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

エンコーディングの修正

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

「ウェブライティング」(トップページのボックス欄)の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;
}

ウェブ標準化

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

ウェブ標準

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

ウェブ標準の作業の流れ

従来の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ハック」を正しく理解しておく必要がある。

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

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

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

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

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

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

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

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

ウェブアクセシビリティ

情報閲覧性。

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

インライン要素

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

印刷用の設定

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

@charset “shift_jis”;
body {
margin-left: 1cm;
color: #000000;
background: #ffffff;
line-height: 1.8;
font-size: 10pt;
font-family: “MS明朝”,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;
}

アンカー

【例】

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

アクセスアップ

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

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

XML仕様書

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

XML

XML用語事典

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

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

W3C

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

Web

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

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

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

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

print.css

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

MS-IME

MS-IMEを使いこなす

metaname keywords (「電子メール編」のページの場合)

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

metaname description

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

media

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

link要素

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

IPアドレスの変更

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

Internet Explorer

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

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フッター

hover

→リンク部分の色

HTML仕様書

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

height

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

<h1>

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

footer

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

font-style: normal

em要素 <CSS

em要素は、斜体で表示されてしまいます。斜体は日本語では読みにくいです。
斜体を避け、赤の太字で表示したい場合は次のように指定します。
なおstrong要素は「より強調」で通常は太字で表示されます。

emphasis=強調
em { color: #ff0000; font-weight: bold; font-style: normal; }

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">

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>

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仕様書

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

br

任意の改行。

address

footer

border

""は非推奨。

a href

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

CSS

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

2009年4月25日土曜日

表の改行の禁止

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

th,td {
    white-space: nowrap;
}

チェックツール 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サイトが高齢者、障害者にとっても読みやすいかを診断するツール。富士通

間隔

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

検証

XHTML、CSSともに完成段階で、うっかりミスなどの確認のためにも構文の検証をおこないます。
XHTMLソースで構文のミスがあると、正しいCSS を指定しても正常表示されないケースが多いです。
XHTMLソースを適切に記述することが、シンプルなCSS制作への道です。

CSSの検証サービスは、 W3Cでも提供しています。
チェックのあとで、さらに各種ブラウザで表示の確認をします。

色、背景色

ウェブ標準では色は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 背景画像の固定位置

font-family

font-family: Verdana Arial "ヒラギノ角ゴ Pro W3" "Osaka" "MS Pゴシック " "san-serif" 。"MS Pゴシック"  MS Pは全角で

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の草案が公開される

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などで紹介されていま す。

@charset  キャラセット

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