最終更新日: 2001年07月14日

現在工事中ですが、ほぼすべてのプロパティを掲載してあります。今後、すべてのプロパティの使用例を作成する予定です

スタイルシート・リファレンス

Ｗ３Ｃの勧告を基準にしていますが、Ｗ３Ｃの勧告を完全に実現するブラウザーが私の手元には無いので、最も近いと思われるＩＥ４.０について説明しています。

ネスケはＷ３Ｃの勧告を無視した独自仕様なので手のうちようがありません。

１：スタイルシートの書き方

１.１：style="..." ‥‥‥‥ インライン

タグのオプションとしてスタイルを記述します。

書き方:

例:
<p style="font:12pt 'ＭＳ ゴシック'; text-indent:2ex;">

属性群を囲むのは、" でも ' でかまいませんが、一般的には、" を使います。

複数の属性を記述することができます。その場合には、; で区切ってください。

引数を複数書くことのできる属性がありますが、その場合には、半角スペースで区切ってください。

引数に半角スペースを含む場合は、外側を " で囲んだときは ' で、' で囲んだときは " で、引数を囲んでください。

margin:などのように４つの方向を一度にしてできる物がありますが、この引数の指定には注意が必要です。

引数が１つの場合margin: 10px 上=10px 右=10px 下=10px 左=10px
[上下右左]
引数が２つの場合margin: 10px 20px 上=10px 右=20px 下=10px 左=20px
[上下] [右左]
引数が３つの場合margin: 10px 20px 30px 上=10px 右=20px 下=30px 左=20px
[上] [右左] [下]
引数が４つの場合margin: 10px 20px 30px 40px上=10px 右=20px 下=30px 左=40px
[上] [右] [下] [左]

のようになります。このような属性(BOX properties)には、margin:, padding:, border-width:, border-color: があります。なお、下記の属性一覧中で引数に{1,4}と書かれている物はほとんどがこれです。

この書き方は、最も手軽に使える方法なのですが、ソースがぐちゃぐちゃになってしまいますし、統一性をとりにくいので、あまりおすすめしません。

通常プログラマーの世界では、こういったコーディング法をハードコーディングといいます。ハードコーディングは、作っているときにはいいのですが、いざ修正ということになったときにとても大変なので、極力避けるべきだと思います。

１.２ <style></style> ‥‥ タグ

ヘッダー内にスタイルタグを置き、その中にスタイルを記します。Java Spcriptの書き方ににていますが、コメントマーク<!-- -->で囲む必要がありません。(なんでJavaScriptはコメントで囲むんでしょうね?)

タグ名にスタイルを設定すると、その名前のタグ内の設定をすべて変更することができます。また、タグ名を、, (カンマ) で区切って複数書くことにより、一度に複数のタグのスタイルを設定できます。

書き方:

タグ名, タグ名, ・・・ {
  属性: 引数 引数・・・;
    ・
    ・
}

タグ名.クラス名 {
  属性: 引数 引数・・・;
    ・
    ・
}

a:link { ・・・ } 未アクセスリンク
a:visited { ・・・ } アクセス済みリンク
a:active { ・・・ } クリックしたリンク
例:

<style>
    /*=== body全体を設定 ===============*/
    body { background-color: #FFFFFF; }

    /*=== 複数のタグを一度に定義 =======*/
    h1, h1, h3 {
        font: bold 24pt ＭＳ Ｐゴシック;
        background-color:#0099FF;
        padding: 4px;
        color: #FFFFFF;
    }

    /*=== 未アクセスリンク =============*/
    a:link { color: BLUE }

    /*=== アクセス済みリンク ===========*/
    a:visited { color: PURPLE }

    /*=== クリックしたリンク ===========*/
    a:active { color: GREEN; }

    /*=== 2段目の ul ===================*/
    ul ul { list-style: circle outside }
    
    /*=== クラス名の定義 ===============*/
    li.square { list-style: square }

    /*=== リンクのクラス名の定義 =======*/
    a.external:visited { color: blue }

</style>

クラス名を定義し、そのタグで右記のように指定することによって、同じタグで複数のスタイルを使用することができます。上記のインラインはあまりおすすめしないと申し上げたのは、この機能があるためです。

この機能を使用して定義して行けば、途中で変更をしたくなったときに、同種のものをいっせいに変更することができるからです。

例:

<head>
  <style>
    p.msg { font:12pt 'ＭＳ ゴシック'; text-indent:2ex; }
  </style>
</head>

<body>
  <p class=msg>ＭＳ ゴシックで表示します。
</body>

リンクには、３種類の状態があり、それぞれを定義できます。

リンクのクラスを定義するときには、

a.classname:link

のようにします。

例:

a:link { color: BLUE } 未アクセスリンク
a:visited { color: PURPLE } アクセス済みリンク
a:active { color: GREEN; } クリックしたリンク

１.３ .CSS ‥‥‥‥‥‥‥ スタイル・シート

上記の<style>タグを使って書く場合、複数ファイルに渡っているようなページの場合には、各ページに書いてやらなければなりません。となると、統一性を保とうとなると、ものすごく大変なことになってしまいます。

そこで、スタイルタグの中身をテキストファイルにしておいて、複数のhtmlファイルで共用しようというのがこのやり方です。

書き方は、2種類あります。

1: <link>タグを使用:

<head>
    <title>title</title>
    <link REL=STYLESHEET type="text/css"
        href="my.css" title="my">
</head>

2: <style>タグ中に記述:

<head>
    <title>title</title>
    <style type="text/css">
        @import url(basic.css);
    </style>
</head>

おまけ　ネスケとIEの両方に対応:

お馬鹿なネスケに対応するために、ＩＥ用のスタイルシートとネスケ用のスタイルシートを別々のファイルに記述し、JavaScriptでブラウザーを判定して読み込むファイルを切り替えています。

<head>
    <title>Kiya's Home Page</title>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">

    <script type="text/javascript"><!-- 
        if ( navigator.appName != "Netscape" )
            document.write( '<link REL=STYLESHEET type="text/css" href="../basicIE.css" title="basic">');
        else
            document.write( '<link REL=STYLESHEET type="text/css" href="../basicNN.css" title="basic">');
    //-->
    </script>

    <style><!--
        p.maroon {
            color:#800000;
        }
    --></style>
</head>

注意:Netscape Navigator 4.0 では、スタイルシート中の URL が、スタイルシートを読み込んでいるhtmlファイルからの相対になっています。したがって、スタイルシート中に記述する URL はすべて絶対で書かなければなりませんので、ほとんど使えないと思います。そのおかげで、ＩＥでもスタイルシートの使用を制限せざるを得なくなってしまいました。何でこんな馬鹿な仕様にしたのかは知りませんが、ま、その程度の人たちが作ったものだと思ってあきらめるしかないようです。

２：属性一覧

一般
position:※ 絶対、相対座標 absolute : relative
top:※ 上端の座標 <length>
left:※ 左端の座標 <length>
width: 幅 <length> | <percentage> | auto
height: 高さ <length> | auto
color: 色 <color>

フォント
font: フォント [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
font-style: スタイル normal | italic | oblique
font-variant: normal | small-caps
font-weight: 太さ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size: サイズ <absolute-size> | <relative-size> | <length> | <percentage>
font-family: フォント名 [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]

背景
background: 背景 <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
background-color: 色 <color> | transparent
background-image: 画像 <url> | none
background-repeat: 画像のくり返し方法 repeat | repeat-x | repeat-y | no-repeat
background-attachment: 画像のスクロール scroll | fixed
background-position: 画像の位置 [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

テキスト
word-spacing: 単語の間隔 normal | <length>
letter-spacing: 文字の間隔 normal | <length>
text-decoration: 文字の装飾 none | [ underline || overline || line-through || blink ]
vertical-align: 垂直位置 baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
text-transform: 大文字/小文字の変換 capitalize | uppercase | lowercase | none
text-align: 水平位置 left | right | center | justify
text-indent: 字下げ <length> | <percentage>
line-height: 行の高さ normal | <number> | <length> | <percentage>

余白
margin: 外側の余白 上 右 下 左の順 [ <length> | <percentage> | auto ]{1,4}
margin-top: 外側の上余白 <length> | <percentage> | auto
margin-left: 外側の左余白 <length> | <percentage> | auto
margin-bottom: 外側の下余白 <length> | <percentage> | auto
margin-right: 外側の右余白 <length> | <percentage> | auto
padding: 内側の余白 上 右 下 左の順 [ <length> | <percentage> ]{1,4}
padding-top: 内側の上余白 <length> | <percentage>
padding-right: 内側の左余白 <length> | <percentage>
padding-bottom: 内側の下余白 <length> | <percentage>
padding-left: 内側の右余白 <length> | <percentage>

枠線
border: 枠線 <border-width> || <border-style> || <color>
border-top: 上枠線 <border-top-width> || <border-style> || <color>
border-right: 右枠線 <border-right-width> || <border-style> || <color>
border-bottom: 下枠線 <border-bottom-width> || <border-style> || <color>
border-left: 左枠線 <border-left-width> || <border-style> || <color>
border-width: 枠線の太さ 上 右 下 左の順[thin | medium | thick | <length>]{1,4}
border-top-width: 上枠線の太さ thin | medium | thick | <length>
border-right-width: 右枠線の太さ thin | medium | thick | <length>
border-bottom-width: 下枠線の太さ thin | medium | thick | <length>
border-left-width: 左枠線の太さ thin | medium | thick | <length>
border-color: 枠線の色 上 右 下 左の順 <color>{1,4}
border-style: 枠線のスタイル none | dotted | dashed | solid | double | groove | ridge | inset | outset

リストスタイル
list-style: <keyword> || <position> || <url>
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
list-style-image: <url> | none
list-style-position: inside | outside

その他
float: left | right | none
clear: none | left | right | both
display: block | inline | list-item | none
white-space: normal | pre | nowrap

※REC-CSS1-961217 にはのっていない、アトリビュート

３：略号

アトリビュートの引数のうち、<>でくくっられたものは略号です。 以下の表を参考にしてください。

<url> アドレス
url( )ファイル名url( images/back.gif )
<length> 長さ指定
mmミリメートル 123mm
cmセンチメートル4cm
pxピクセル 12px
ptポイント 10pt 1pt = 1/72 in
inインチ 7in 1in = 2.54cm
pcパイカ 2pc 1pc = 12pt
emフォントの高さ1.5em
exフォントの幅 0.5ex
<percent> 割りあい
%パーセント "100%"

<color> 色指定
#rgb #00F 青 0 〜 F
#rrggbb #FF0000 赤 00 〜 FF
rgb(r,g,b) rgb(0,255,0) 緑 0 〜 255
rgb(r%,g%,b%) rgb("100%","100%",0%) 黄 0.0% 〜 100.0%
BLACK 黒 #000000
BLUE 青 #0000FF
RED 赤 #FF0000
FUCHSIA ピンク #FF00FF
LIME 黄緑 #00FF00
AQUA 水色 #00FFFF
YELLOW 黄色 #FFFF00
WHITE 白 #FFFFFF
SILVER 銀色 #C0C0C0
NAVY 濃い青 #000080
MAROON 茶色 #800000
PURPLE 紫 #800080
GREEN 緑 #008000
TEAL 暗い水色 #008080
OLIVE オリーブ #808000
GRAY 灰色 #808080

<famiry-name> フォント名
Arial 7M3MCZ mda あいう 東京都西多摩郡
Helvetica 7M3MCZ mda あいう 東京都西多摩郡
Century 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
Courier 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
Comic Sans MS 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
Garamond 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
Impact 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
Times New Roman7M3MCZ mda あいう 東京都西多摩郡 ※Windows
verdana 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
FixedSys 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
ＭＳ ゴシック 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
ＭＳ 明朝 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
ＭＳ Ｐゴシック7M3MCZ mda あいう 東京都西多摩郡 ※Windows
ＭＳ Ｐ明朝 7M3MCZ mda あいう 東京都西多摩郡 ※Windows
<generic-famiry> フォントグループ名
serif 7M3MCZ mda あいう 東京都西多摩郡
sans-serif 7M3MCZ mda あいう 東京都西多摩郡
cursive 7M3MCZ mda あいう 東京都西多摩郡
fantasy 7M3MCZ mda あいう 東京都西多摩郡
monospace 7M3MCZ mda あいう 東京都西多摩郡

<border-style> 枠線種名
none なし
ABCDEFABCDEF
dotted 点線
ABCDEFABCDEF
dashed 破線
ABCDEFABCDEF
solid 実線
ABCDEFABCDEF
double ニ重線
ABCDEFABCDEF
groove 溝
ABCDEFABCDEF
ridge 尾根
ABCDEFABCDEF
inset くぼみ
ABCDEFABCDEF
outset 浮き彫り
ABCDEFABCDEF

<list-style-type> リストスタイル
disc
  • 7M3MCZ
  • 7M3MDA
circle
  • 7M3MCZ
  • 7M3MDA
square
  • 7M3MCZ
  • 7M3MDA
decimal
  • 7M3MCZ
  • 7M3MDA
lower-roman
  • 7M3MCZ
  • 7M3MDA
upper-roman
  • 7M3MCZ
  • 7M3MDA
lower-alpha
  • 7M3MCZ
  • 7M3MDA
upper-alpha
  • 7M3MCZ
  • 7M3MDA
none
  • 7M3MCZ
  • 7M3MDA

AutoCampのページへ 間違い、ウソ、わかりにくい所など、お気づきの点がございましたら、kiya@asahi.email.ne.jp までE-Mailをいただければと思います。 Homeへ