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ではコメントは、
<!-- コメント -->
のようにおこなうので混同しないように注意してください。

空白文字