| ウェブサイト製作総合支援サイト：たこやき 〜Openソース〜 |
| ←トップページに戻る ←スタイルシート:目次に戻る |
ここでは、スタイルシートで使用する値について説明します。
CSS 2と書かれているものはCSS level2 以降で採用されたものです。
lengthの表記方法は、+または-記号の後に数値を書き最後に単位を指定します。
+-記号は省略可能で、省略時には+となります。
また数値が0の時は単位も省略可能です。
単位は em, ex, px, in, cm, mm, pt, pc が使用でき、それぞれの意味は次のようになっています。
emは要素の高さが基準となります。exは小文字のxの高さが基準となります。
pxは表示に必要な点の数量を直接指定します。
inはinch(24.5mm)、cmはセンチメートル、mmはミリメートルを表しています。
ptはポイントで1pt=1/72inです、pcはパイカで1pc=12ptです。
もっとも普及しているWindowsと言うOSでは画面解像度がソフトの表示に反映されません。
したがって1inと指定しても画面上で1inchになるとは限りませんので、ほとんど無意味な指定方法です。
(私のディスプレイ環境は概ね123ppiですが、100px≒1inで表示されました。)
解像度が反映されるソフトを使っていてなおかつ、印刷目的に使用することを考えた場合にのみ有効な指定方法だと思います。
ディスプレイ上のみを対象にするので有れば、em,ex,pxを使用するのが適切です。
またInternet Explorer は px, in, cm, mm, pt, pcを指定したときに、ユーザーサイドでの文字サイズの変更が効かなくなるので嫌われます。
(Netscap ６以降(Mozilla1.0を含む)やOpera6.01では変更できます。)
パーセンテージの表記方法は最後に% の記号を入れて表記します。+ - の記号については、lengthと同じ扱いです。
基準となる値は属性により違ってきますので、属性値参考資料のパーセント値を見てください。
色の値の表記方法
色の指定方法は#を頭につけた16進数6桁で表す方法(#ffffffと言った書き方)、同3桁で表す方法(#fffと言った書き方)、rgb(0-255, 0-255, 0-255)(rgb(100, 200, 255)と言った書き方)、rgb(0.0-100.0%, 0.0-100.0%, 0-100.0%)と表す方法(rgb(100%, 50%, 25%)と言った書き方)、色の名前で指定する方法の５種類有ります。
16進数6桁の意味は、先頭の2桁が赤色、次の2桁が緑色、最後の2桁が青色の明るさを表しています。また、色の数値は大きくなればなるほど明るくなります。(3桁の場合は1桁づつ赤、緑、青の値となります)
rgb(Num1,Num2,Num3)の表し方は、Num1が赤、Num2が緑、Num3が青の値を表します。(この表記方法は16進数で無く10進数表記です。)
この場合、数値の区切りには,(カンマ)を入れてください。(正規の文法ではカンマで区切る事になっていますが、Internet Explorerのローカルルールでは半角スペースでも区切りとして認識するようです。他のブラウザでは適用されなくなりますので必ずカンマで区切るようにして下さい。)
前述の4種類の表記方法は、光の3原色で表していますので、赤＋緑で黄色、赤＋青で紫(マゼンタ)、緑＋青で水色(シアン)となります。
色の名前で指定する方法は、CSS 及びHTMLの規定書には black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua の16色しかありません。
他の名前はブラウザのローカル・ルールですのでここでは省きますが、知りたい方はAnothr HTML-lintに色見本がありますのでそれで調べて見てください。
16進数とは、0から数えて16個目で桁が上がる数字の数え方の事です。
数字には0〜9までの記号しか割り当てられていないのでその上の数を表すのにa,b,c,d,e,fのアルファベットを使用しています。したがってa=10,b=11,c=12...f=15を表しています。
なぜ、16進数と言う表記方法が用いられるかは、2進数4桁で表す事のできる数値が16個だったからです。コンピューターの理解できる命令文は2進数なのですが、人間が直接それを扱おうとすると桁が多すぎて理解し難い所から考えられた数の数え方だと思います。(この辺りは私の想像です。)
urlの指定方法は、url()のカッコの中に"(ダブルクオート)又は'シングルクオートで囲まれたurlの文字列を入れます。
CSSでは親要素で指定された値が子要素まで及びますが、それを確実にするために用意された設定値です。
以下にCSS2で規定されているメディアの種類を記載しておきます。
CSS2では適用メディアを次のように分類しています。
| メディアの種類 | メディアの分類 | |||
|---|---|---|---|---|
| continuous / paged | visual / aural / tactile | grid / bitmap | interactive / static | |
| aural (音声) | continuous | aural | N/A | both |
| braille (触覚) | continuous | tactile | grid | both |
| emboss (点字印刷) | paged | tactile | grid | both |
| handheld (携帯) | both | visual | both | both |
| print (印刷) | paged | visual | bitmap | static |
| projection (プロジェクター) | paged | visual | bitmap | static |
| screen (画面) | continuous | visual | bitmap | both |
| tty (タイプライター) | continuous | visual | grid | both |
| tv (テレビ) | both | visual, aural | bitmap | both |