ホームページの作成
[戻る] [MENU] [次へ]

（７）スタイルシートについて

 前置き

今時、スタイルシートを知らない人はいないと思います。
初めてホームページを作成する人でも、スタイルシートがどんなものであるかぐらいは判っていると思います。
私が初めてホームページを作成した頃は、スタイルシートに対応していないブラウザも考慮しなければならなかったと思いますが、今はスタイルシートを使わないでホームページを作成している人は皆無ではないかと思います。
これからホームページを作成しようと思っておられる方は、スタイルシートの知識は絶対に持つ必要があります。

私がスタイルシートの勉強を始めた頃に、どんなサイトから教わったかを改めて調べてみました。
私が教えていただいたのは、角健太郎（すみけんたろう）さんと言う1974年2月生まれの(現在は36歳）の方です。
私などよりは遥かに若い方なのですが、その人が公開されていた HTML版『スタイルシートWebデザイン』です。
数年前（当時）に書籍で発行（1998年頃）していたものが絶版になったので、サイト上で無料で公開していたものでした。
書いてある内容は古くはなりましたが、根本的な事は現在でもりっぱに通用しますし、私が今見ても教えられる事は多くありました。
尚、サイトは現存しておりますが、以下の記載がありました。

すみけんは、2004年より鬱病に罹患しており、就業が不可能であり、貧窮にあえいでおります。
asahi-net.or.jpの維持がキツいです。
もし助けてくださる奇特な方がいたら、PayPalでDONATEしてくださると嬉しいです。
300円設定になっています。(2009年10月13日)

日本のインターネットのを引っ張ってこられた方が、精神の病を患って長期の療養を続けられているのは気の毒としか言いようがありません。
志のある方は、少しでも助けてあげていただきたいと思います。
すばらしいサイトが次々に消えていくのを見ていると悲しくなります。


 スタイルシートとは

本来は、私がスタイルシート（CSS　カスケーディング・スタイルシート）とはなんだかんだと言う必要はありません。
前述のようなサイトにリンクを張って、スタイルシートについてはそちらをご覧くださいと記載する方が下手な文章を読んでいただくより増しです。

私以外の解説サイトでも、結局は先駆者が書かれた内容に新しい内容を少々追加しているだけです。
ひどいサイトだと、丸写しをしただけなのに、自分が書いたように装っています。
そんなサイトは、どこかで必ずボロを出していますから、見分けるのは容易です。

ただ、すばらしいサイトでも突然閉鎖される事があります。
仕事が忙しかったり、病気などによるよる場合もあると思います。
そんな場合のために要点だけを抜粋させていただきます。
前述の解説サイトでは「怪しいテクニック」（どうかと思われるやり方）として説明されております。
以下抜粋

怪しいテクニック

そのような誤解の中で，マークアップを流用して見栄えを調整する「テクニック」が数多く生み出されました。もっとも，誤解ではなく，スタイル表現を支配したいと苦心した結果なのかも知れません。しかし，どちらにせよそれらがHTMLマークアップを混乱させているのです。

以下に，代表的な“テクニック”とその問題点を紹介します。

特定のソフトウェアの表示結果に依存（マークアップの無意味化）
  • マージンをとるために，引用したわけでもないのにBLOCKQUOTE要素を用いる
  • 文字を大きくするために，見出しでなくても見出し要素（H1〜H6要素）を用いる
  • 見出しを作成するために，見出し要素を用いずに，FONT要素を用いる
  • 大きな改行を得るために無意味にBR要素を挿入する

この“テクニック”に従っていると，HTMLマークアップの本来の目的である「見出しの明示」などが全うできません。「見出しとして指定されているのが見出しだ」という単純なはずのルールが守られていないのならば，文書の読み手はどのようにして見出しを探せばよいのでしょう？

また，このように書かれたHTML文書では，スタイルシートで見栄えを調整しようにも，文書構成が書かれていないために調整しようがありません。本末転倒とはこのことでではないでしょうか？

拡張マークアップの多用（一般性の崩壊）
  • 「文字列を点滅させる」――BLINK
  • 「文字列を中央寄せ表示する」――CENTER
  • 「画面を分割して複数のHTML文書を同時に表示する」――FRAME
  • 「HTML文書上に独立したパネルを作成する」――LAYER
  • 「文字をスクロール表示する」――MARQUEE

これらの要素を利用すれば，そのWWWブラウザを利用している人たちには美しい効果として解釈されるでしょう。しかし，それ以外のWWWブラウザを利用している人はどうなるのでしょう？　この方法では，一部の人にしか効果をアピールできません。

  • 【注】 独自拡張が後にW3Cに採用されるケースもあります。例えば，FONT・CENTER・TABLEは元々はNetscape社の独自拡張要素でしたが，HTML3.2で採用されました。FRAMEはHTML4.0で採用されました。
全てを画像として表現

一般に，影付き文字や会社のロゴマークのような特殊な装飾つきの文字は，テキストではなく画像としてHTML文書に入れ込みます。これが極端にこうじたのか，文章全体を画像にして公開しているケースに遭遇することがあります。つまり，独自のDTPソフトウェアなどを用いて整形した結果のスクリーンショットでHTML文書を構成するのです。

たしかに，これならばソフトウェアに依存せずに，表示を完全に支配できます。しかし，次のような欠点があります。

  • データサイズが増大し，転送に時間がかかる
  • 文書内のテキストを検索するなどの文字処理が不可能
  • 画像を表示できない人には，まったく情報が伝えられない（文字情報のみを表示するWWWブラウザや眼の見えない人のための音声読み上げ式WWWブラウザなどにとっては致命的）
全てをTABLEとして表現

TABLEの本来の意味は「表」ですが，表のコマ（CELL）の位置を「文字の位置」として利用し，細かなレイアウトを実現した文書も存在します。中でも，上下左右のマージンや，語句同士の位置関係を調整する効果を狙ったものが多く見られます。

この“テクニック”の最大の難点は，「指定が難しい」ことです。複雑なレイアウトを実現しようとすればするほど，HTML文書のソースは複雑になります。すると，専用ソフトウェア（高機能のWYSIWYGのHTMLエディタなど）を用いなければ思ったとおりの効果を得るのは難しいといえます。

もうひとつ難点があるとすれば，処理に必要な時間です。複雑なレイアウトのTABLEを調整するには，当然それなりの処理時間が必要です。結果として文書の表示にかかる時間が増大するでしょう。これはコンピュータの処理速度に依存する問題ですが，読者をイライラさせる可能性が高いことは間違いありません。

  • 【注】 TABLEはHTML3.2から正式採用されているものの，対応していないWWWブラウザもいまだ活躍しているという事実もお伝えしておきます。


セレクタの種類

基本セレクタ

*（アスタリスク）

すべての要素にスタイルを適用させます。

* {line-height:120%;}

要素名

指定した要素名の要素にスタイルを適用させます。

p {text-indent:1em;}

IDセレクタ

要素名#名前

その要素の中で、指定したid属性の名前（識別子）を持つものにスタイルを適用させます。名前は識別子なので固有のものにします。

img#sitelogo {border:double orange 4px;}

クラスセレクタ

要素名.クラス名

その要素の中で、指定したクラス属性の値を持つものにスタイルを適用させます。

span.words {text-style:italic;}

属性関連セレクタ

要素名[属性名]

その要素の中で、指定した属性が指定されている要素にスタイルを適用させます。

textarea[readonly] {color:white;background-color:black}

要素名[属性名="属性値"]

その要素の中で、指定した属性が指定した値に設定されている要素にスタイルを適用させます。

a[target="_self"] {cursor:move;}

<a href="index_css.php" target="_self">

要素名[属性名~="属性値"]

その要素の中で、属性値が半角スペースで区切られたリストになっていて、その中に指定した属性値がある要素にスタイルを適用させます。

a[rel~="help copyright"] {font-weight:bold;}

<a href="about.php" rel="help copyright">

要素名[属性名|="属性値"]

その要素の中で、属性値が”-”（ハイフン）で区切られたリストになっていて、その中に指定した属性値がある要素にスタイルを適用させます。

span[lang|="en"] {font-family:Verdana,Chicago,sans-serif;font-weight:bold;padding:0.5em;}

英語のチャットではBTWはby the wayの略で「ところで」という意味。LOLはlaugh out loudやlots of laughなどの略で（笑）の意味で幅広く使われます。

リンク関連擬似クラス

要素名:link

a要素の未訪問リンクにスタイルを適用させます。

要素名:visited

a要素の訪問済みリンクにスタイルを適用させます。

要素名:hover

a要素のリンクの上にカーソルがある時（非アクティブ状態）にスタイルを適用させます。

要素名:active

a要素のリンクがアクティブな状態の時にスタイルを適用させます。

記述例と注意

hover擬似クラスを指定する場合は、link擬似クラスとvisited擬似クラスの後、active擬似クラスの前に記述します。

a:link    {color:blue;}
a:visited {color:maroon;}
a:hover   {color:fuchsia;}
a:active  {color:green;}

IE5.5ではhover擬似クラスはhref属性が指定されているa要素でないと適用されません。CSSの仕様に忠実なレンダリングをするUAならそんなことはないため、上記の様に指定すると <a name="hoge">hoge</a> というアンカー上にカーソルがある場合もCSSが適用されます。これは上記の様に指定した後に a[name]:hover で通常のスタイルを指定することで回避できます。

その他の擬似クラス

要素名:focus

その要素がユーザーによってフォーカス（選択）された状態の時にスタイルを適用させます。例えば、フォームのテキストエリアなどの入力フィールドに入力が可能な状態の時など。

textarea:focus {color:black;background-color:ivory;}

要素名:lang(言語コード)

その要素の中で、lang属性の値が指定した言語コードに設定されているものにスタイルを適用させます。主な言語コード（２文字の主コード）には、ja (日本語)、en（英語）、fr (フランス語)、de (ドイツ語)、it (イタリア語)、 nl (オランダ語)、el (ギリシア語)、es (スペイン語)、pt (ポルトガル語)、ar (アラビア語)、he (ヘブライ語)、ru (ロシア語)、zh (中国語)、ko（韓国語）、hi (ヒンディー語)、la (ラテン語)、sa (サンスクリット語)などがあります。

em:lang(en) {color:blue;background-color:transparent;font:italic bold 100% serif;padding:0 .5em;}
em:lang(ja) {color:blue;background-color:transparent;font:bold normal 100% serif;}

リンクにスタイルを適用させます。リンクにstyleを適用させます。

要素名:first-child

その要素が、ある要素の中で最初に出現する子要素である場合にスタイルを適用させます。

p:first-child {font-weight:bold;}

その要素が、ある要素の中で最初に出現する子要素である場合にスタイルを適用させます。

擬似要素

要素名:first-line

指定したブロックレベル要素の１行目の文字列にスタイルを適用させます。

p:first-line {font-weight:bold;}

指定したブロックレベル要素の１行目の文字列
にスタイルを適用させます。

要素名:first-letter

指定したブロックレベル要素の先頭の１文字にスタイルを適用させます。

p:first-letter {font-size:150%;font-weight:bold;}

指定したブロックレベル要素の先頭の１文字にスタイルを適用させます。

要素名:before

contentプロパティと共に使用して、その要素の直前に生成追加される内容にスタイルを適用させます。

p:before {content:url('cursor.gif');}

contentプロパティと共に使用して、その要素の直前に生成追加される内容にスタイルを適用させます。

要素名:after

contentプロパティと共に使用して、その要素の直後に生成追加される内容にスタイルを適用させます。

p:after {content:"………続く？";}

contentプロパティと共に使用して、その要素の直後に生成追加される内容にスタイルを適用させます。

[戻る] [MENU] [次へ]