スタイルシートマニア

ホームページカスタマイズ Tips

CSSの色指定

ＣＳＳで色を指定するには、大きく分けて二つの方法があります。一つは「black」や「white」などのキーワード、もう一つは、#fffなどの数値です。

まず、キーワードによる色の指定ですが、

black(#000000)
gray(#808080)
silver(#c0c0c0)
white(#ffffff)
navy(#000080)
teal(#008080)
aqua(#00ffff)
blue(#0000ff)
olive(#808000)
green(#008000)
lime(#00ff00)
yellow(#ffff00)
maroon(#800000)
purple(#800080)
fuchsia(#ff00ff)
red(#ff0000)

の16種類があります。

次に数値での指定ですが、これはHTMLと同じ方法で#に続いて、RGB各色の値を２桁ずつの16進数で指定します。合計すると約1,677万色の中から一つが選べる計算になります。
しかし、指定できるからといってやたらめったらこれを複雑に使いまくってもＯＳやモニターによって同時に表示できる色数に制限があるので必ずしもみんながみんな同じ色で見えているわけではありません。Webの場合は色に関してかなりあいまいで紙媒体のかたがたの苦労は相当なものでしょう。。。しかし、Webだからと言ってあまえたり、ないがしろにするのはよくありません。
そこで登場するのがWebセーフカラーなるものです。これを全部書いていたら結構あるので別の機会で紹介するかWebセーフカラーで検索してみてください。

または、DreamWeaverでCSSの色指定をすると、Webセーフカラーで指定ができます。後、Illustrator、Photoshopなどで、色を指定するときにWebセーフカラーのみに制限のチェックを入れるとWebセーフカラーのみになります。
そんなこんなでWebセーフカラーが選択できますが、実はこれでも完璧に同じになるわけではありません。しかし、やみくもに色指定をするよりか、はずれは少なくなるので、なるべくWebセーフカラーを使ってサイトを構築することを心がけましょう。

その16進数での指定の仕方ですが、実は最初の方でこっそり使いました！６桁ではなく３桁で指定する方法があります。

それは、#AABBCCなど二つ並べた２桁が同じ値であれば、#ABCと指定しても同じものとして解釈してくれます。これは、Webセーフカラーを指定するときには大変便利なので覚えておきましょう。

後、あまり一般的ではありませんが、RGBで指定する方法もありま

例えば赤でいくと
rgb(255,0,0)

っと指定すると赤になります。

更に、値に%を使った方法もあります。

もう一回赤で行くと、
rgb(100%,0%,0%)と指定ができます。

ＲＧＢとは、コンピューターの赤（Ｒ）緑（Ｇ）青（Ｂ）の３つの色の組み合わせで色を表現する方法で光の三原色と呼ばれています。

コメント(0)

CSSファイルを読み込む

さて実際にCSSをサイト内に取り入れて見ましょう。

方法としては、３つあります。

１．CSSファイルを読み込む

もっとも基本的な方法で、link要素のhref属性の値にCSSファイルのURLを指定して読み込ませます。
このとき、link要素を複数書けば、その数だけCSSファイルを読み込ませることができますが、現在の作成方法はHTML側からの指定するCSSファイルは一つにしておくというのが主流です。
これはHTML側で「読み込み用.css」を読み込ませてその中から@import命令で各CSSファイルを読み込むという方法です。
これを発見したときは、目から鱗でした（笑）

記述例

２．head要素内にstyle要素を入れてCSSを記述

これは、titleタグなどを記述する場所と同じところに記述する方法です。
Yahoo!なんかはこれを使って、つらつらと。。。長々と。。。沢山書いてHTML内に全てのスタイルを書いています。
ある意味すごいです（笑）
一度Yahoo!に行ってソースを見て見るのも良いかもしれません。
IEなら右クリックでソースを表示を選択するとソースを見ることができます。
その他ブラウザでも表示からソースの表示を選択するとソースを見ることができます。
IEの場合、ソースを表示するソフトがメモ帳になるので、charsetがeucの場合文字化けして表示されますのでご注意を！

なお、この方法をとる場合は、type=”text/css”を指定する必要があります。
それに、コメントタグ <!– –> で囲うと本当のコメントとして処理される可能性があります。

記述例

@import”import.css”;

</head>
３．タグの中に直接記述

XHTMLで使えるほとんどのタグにはstyle属性を指定して、その値を直接記述することができます。
また、;（セミコロン）で区切れば、複数のスタイルを指定することができます。
ただし、タグに直接スタイルを記述するということはHTML内にレイアウトをするという記述が組み込まれてしまうことになる上、CSSを使っている意味が全くなくなるのでこの方法はとりあえず試しに変えてみるなどの、テストだけで使うことをおすすめします。

記述例
<h1 style=”font-size:18px color:#ff0000″;>見出し</h1>
ちょっと便利なCSS

media属性を指定することにより、CSSの適用対象となる出力先を設定できます。
例えば、パソコン用のscreen、プリント用のprintなどがあって、これを使えばprint用のCSSを別に用意して、読み込ませることが可能になります。
更に、Netscape4.XにCSSを読み込ませないための方法としても使われています。

コメント(0)

入れ子は正しい形で

XHTMLでは、開始タグと終了タグの位置関係が厳密になっています。

例えばこれはOK
<p><code>入れ子は正しい形で</code></p>

次のはNG！
<p><code>入れ子は正しい形で</p></code>

どこがいけないかというと、本来<p>タグと</p>タグの中にあるべき</code>タグが外に出てます。

ちなみに予備知識で、開始タグと終了タグが厳密な方を「nested elements」厳密でない方を「overlapping elements」というそうです。

コメント(0)

タグは必ず２つをセットで

HTMLでは、head、bodyタグなどの要素で開始タグと終了タグの両方、p、l、optionなどの要素で終了タグのみを省略できていましたが、XHTMLではどの要素も開始タグと終了タグを書かないといけなくなっています。

本当に厳しいです。(^^;)

たまに「なんか表示がおかしいねぇ」っと思っていたら重箱の隅をつつくような突っ込みというんでしょうか？一つタグを閉じ忘れていたりしてムカ！っとすることがたまにあります。それぐらい融通きかせろよぉ～！って思いませんか？もしくは、どこがまずいのか言えよ！って？
パソコンって人の揚げ足を取るような突っ込みをしてくるくせに、こっちにはやたらと柔軟性を求めてくるのが妙に腹が立ちます（笑）

コメント(0)

なぜ文書型宣言をするのか？

結論から言うと別にしなくてもいいのです。これをしなかったからって表示がおかしくなるわけでもW3Cに怒られるわけでもありません
まあ、Web制作者としてのマナーみたいなものです。

しかし、W3Cがなぜ強制力のない仕様で発表したのかと考えると制作者が自ら進んで正しい書き方をしてくれるようになることを望んだからではないでしょうか？
商品表示やなんやら平気で偽装されてしまう昨今ですが、Webサイトくらいはちゃんと規則に基づいた方法で作成しましょう。

コメント(0)

CSSのデメリット

何かとすごそうなCSSですが、そんなCSSにもデメリットはあります。
それは、ブラウザの種類やバージョン、OSによるCSS解釈の違いです。
我々WebDesignerは、このCSS解釈の違いにまま悩まされます！

例えば、インターネットエクスプローラー通称IEのバージョン６と７ではマージン（外側の余白）などの解釈がおかしくなったり、OSではWindowsとMacintoshのフォントサイズの解釈などが若干違ったりして完全には同じレイアウトにならなかったりします。同じブラウザソフトを使っているにもかかわらず！

制作中のページをテストサーバに上げてMacintoshでチェックするときなんか本当どきどきします！
そして、レイアウトが変わっていたら本気でぶち切れそうになります！（笑）
でも、これを何とかして言うこと聞かせた時はかなりの快感です！それみたことかと勝ち誇ります！（誰に向かって勝ち誇っているのか！）

その何とか言うことを聞かせる手法がCSSハックなるものです。これについては追々記事に書いていこうと思います。
しかし、そうやってCSSハックを書いていもどうにもならないのがCSS未対応のブラウザです。
これはIEで言えば、IE５からちょこっとづつCSSに対応してきているのですが、文字通りIE４とかなっちゃうとアウトです！
携帯サイトでデザインが全く施されていないようなページを想像していただくと分かりやすいと思います。本当そんな感じです。

実際に見てみたいという方はFirefoxのブラウザで表示からスタイルシートを使用しないを選択してみてください。
その他のブラウザでも、表示からスタイルシートを表示しないがついているものがありますので試してみてください。
まあ、・・・・・・・・・やっぱり変ですね(^^;)

そんな感じでCSSのデメリットなんですが、実際SourceMarineのWebサイトも含め制作させていただいたサイトでも、ほとんどがIE６以上、またはそれに順ずるCSS対応のモダンブラウザなので、さほど心配はいらない事ではあります。

もし、IE５などのアクセスがあったとしたら、僕と同じ同業者が制作者の力量を測っていると思っていただいてほぼ間違いないです

コメント(0)