2009年4月25日土曜日
チェックツール 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でも提供しています。
チェックのあとで、さらに各種ブラウザで表示の確認をします。
- Another HTML-Lint gateway HTML文書の文法をチェック、採点
- XHTML Markup Validator XHTML文書の検証。W3C
- CSS Validation Service CSSの検証。W3C
色、背景色
- 一般色名リスト サンプル。CSSリファレンス
- WEBカラーリファレンス
- 色彩のページ
ウェブ標準では色は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のできごと |
---|---|
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などで紹介されていま す。