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