| | | |
2004年 8月 3日 火曜日
GoLive CS for Mac OS Xでは CSSへの対応が最も充実しているOpera のレンダリングエンジンを搭載し、機能を大幅に強化したCSS エディタによるビジュアルオーサリングを実現しています。
CSS(シー・シーエス:Cascading Style Sheets)は、アクセシビリティに欠かせない不可欠なW3C標準仕様です。
アクセシビリティなWebページに欠かせないCSSですが、CSSの知識だけでなくHTMLの知識も必要なために少し敷居が高い上、ブラウザによる表示の違い、Windows版 IEのボケた仕様(バグ)のため、苦労することが多いです。CSSはパズルを組み合わせていくような感覚に似ているなっというのが、ここ最近の思いです。
GoLive CS for Mac OS Xでは CSSへの対応が最も充実しているOpera のレンダリングエンジンを搭載し、機能を大幅に強化したCSS エディタによるビジュアルオーサリングを実現しています。
ブラウザでの確認の前にライブレンタリング機能を使っていけば、ブラウザを立ち上げることなくGoLive CSだけで確認することもできます。
CSSを使用しない従来のWebページでは、HTMLの中に文字の大きさや色、背景色、画像の位置など見た目に関する内容を記述していました。
そのために、HTMLの中にはfontタグが何度も出てきたり、画像も思ったところに位置づけられず、苦心のすえテーブルを使ってデザインをしてきました。
<h3><font color="#ff0000" size="+2">見出し3です</font></h3>
従来のWebページで、見出し3(h3タグ)を表している例です。色やフォントの大きさなど見た目に関する内容がHTML内に書かれています。
そこでCSSを使って、見た目の要素はCSS側で指定することにより、HTMLは文書のみを記述できるようになりました。
分離することにより、ユーザ側は、ブラウザで自分自身が作成したCSSファイルを指定できるようになりました。
Webページを作成する側も、メンテナンス性が向上しました。
下に、先ほどの見出し3の例をHTMLとCSSに分離した例を記しておきます。
<h3>見出し3です</h3>
h3 { color=#ff0000;font-size:120%}
このように、h3というタグをCSSで示した場合は「タグセレクタ」と呼びます。CSSには大別すると、この「タグセレクタ」の他に「IDセレクタ」「クラスセレクタ」があります。残りの2つのセレクタについては、後に記述します。
CSSが便利な点として、各Webページから、CSSが記述されたファイルへリンクすることができる点です。これを「外部スタイルシート」と呼びます。先ほどのようにWebページ内に書かれた場合は「内部スタイルシート」と呼びます。
外部スタイルシートでは、Webサイト共通な内容を記述し、内部スタイルシートではWebページ独自のCSSを記述するなど区別するといいと思います。
別ファイルにすることにより、さらに表現に関する点のメンテナンス性が向上することになります。また、CSSファイルが最初に読み込まれることによって、次のWebページを読み込むときに、CSSがブラウザのキャッシュに残っているためとHTML部のファイル容量が小さいために、高速に表示されるようになります。では、具体例を下に記してみます。
テキストに影を落とすことがCSSでできます。MacのブラウザではSafariで有効になります。
ただしCSS 2.1ではドロップシャドウは使えないようです。
上の例ではh1タグをCSSで修飾しています。つまりタグセレクタってことですね。GoLive CSのCSSエディタの「CSS定義」ではドロップシャドウを設定できないため、ソースコードエディタに切り替えて入力します。
テーブルにCSSで枠線をつけます。普通にtdタグの上下左右に枠線をつけると重なってしまいます。そこで、下方向へのびる表の場合は、tableタグで上左右に枠線を引き、tdタグで下線を引くようにします。
本来はborder-collapse: collapseとすれば枠線が上記方法を使わずに表示できるのですが、Internet Explorer for Mac OS Xでは枠線が離れてしまいます。
tableタグをCSSで指定しています。
テーブルの項目(td)タグをCSSで指定しています。このようにタグセレクタを使う場合は、HTMLの知識が少し必要になります。
:hover疑似クラスとdisplay:blockを使って、マウスが枠内に位置づけられた時に背景色を変更してみました。
※CSSなどはこちらのサンプルページを参照して下さい。
フォントとフォントサイズの組み合わせの検証用ページを作成してみました。Windows環境にしかないMS Pゴシック(その後、新しいMs-Officeに標準添付されました)、WindowsとMacの両方にインストールされているMS 明朝、MacにしかインストールされていないOsakaフォントで、フォントサイズをmediumと100%を用意した結果は、まったく見え方が異なりました。
Adobe サポートデータベース 背景画像を固定させる方法
Copyright © 1998-2006 OUTDOORMAC All Rights Reserved.
