スタイルシート(CSS)のコマンドリファレンス

スタイルシート(CSS)のコマンドリファレンスを解説しています。よく使う外部スタイルシート(CSS)によるホームページのデザインや表示方法について説明しています。

W3Cに合格したCSSの画像

スタイルシートのコマンドは無数にありますのでここではとうてい解説できません。私は外部スタイルシートでホームページ全体のデザインを指定しています。全てを外部スタイルシートだけで指定するのは無理があります。

ある一箇所だけにスタイルを適用したいことがよくあります。この場合は 外部スタイルシート楽天 ではなくて、個々のページでスタイルシートを指定してやります。このようなコマンドは忘れ易いのでこのページでよく使うものだけ解説したいと思います。私の備忘録といえると思います。

ページ毎にスタイルシートを指定する書き方

ページ毎にスタイルシートを指定する場合の書き方は、ヘッドタグ内に次のように書きます。外部スタイルシートで指定する場合は原則的にはこれは不要です。

<style type="text/css">
<!--
body{background: white; color: black;}
DIV{border: 1px solid black;}
-->
</style>

<!-- と --> はスタイルシート未対応のブラウザ用にコメントアウトしたものです。

タグにスタイルシートで直接指定する書き方

個々にスタイルシートを指定する場合の書き方は、例えば次のようにタグにスタイルを直接指定します。

<div style="text-align: center; line-height: 1.5em">HTMLコマンド</div>

よく使うCSSコマンドリファレンス

テキスト文字の位置揃え(text-align)

text-align: left 　左揃え
text-align: center 　中央揃え
text-align: right 　右揃え
text-align: justfy 　両端揃えの4種類があります。

行の高さ(改行の幅)の指定(line-height)

現在のフォントサイズに対する倍率か、他の単位の数値で指定します。「pt」は文字の大きさを表すポイント、「em」は文字「M」の大きさを基準とした文字の大きさを表しています。

line-height: normal
line-height: 16pt
line-height: 130%
line-height: 1.5em

回り込みの解除(clear)

clear: both

画像等に文字等を回り込ませて配置する場合に、これを解除する場合にスタイルシートでは、例えば次のようにします。HRタグでなくてもBRタグでもDIVタグでも可能です。

<hr style="clear: both;">

枠の外側の余白(マージン)の指定(margin)

margin: 10px 5px 　上下マージン10px　左右マージン5px
margin-top 1px 　上マージン1px
margin-right 5px 　右マージン5px
margin-bottom 0.5em 　下マージン0.5em
margin-left 25% 　左マージン25%

margin だけの時で1つの指定では上下左右の全て、2つの指定では上下と左右、3つの指定では上と左右と下、4つの指定では上、右、下、左に適用されます。「px」は画面表示の最小単位(ピクセル)を基準とした大きさを表しています。

ブロックレベル要素のセンタリング margin: auto について

margin: auto 　はブロックレベル要素をセンタリングすることができるようですが、表に適用した場合、IEではうまく働きません。margin-right とmargin-left の両方にauto を指定してもIE7ではうまくいきませんでした。

CENTER タグは問題なくセンタリングできるようです。しかし、CENTER タグはHTML4.01では非推奨なので、できれば使いたくありません。そこで私は完全なセンタリングではありませんが、次のように左側マージンだけを指定したこともありました。

margin-left: 30%

横幅に応じて左マージンの指定でほぼセンタリングできます。これならIE7、Firefox3、Opera9 でも問題ありませんでした。

ブロックレベル要素のセンタリング方法

結局、完全にブロックレベル要素をセンタリングするには、次のようにブロックレベル要素に対して2段構えでスタイルシートを適用する必要があります。

この例で margin-left:auto; margin-right:auto は、表に対してIE以外でセンタリングの指定をします。IEではバグを利用してtext-align:center を指定します。これで全てのブラウザでセンタリングされますが、IEのバグで表の中身までセンタリングされるので、text-align:justifyで元に戻します。

<div class="cent_txt">
<table class="cent_blk">
表の中身
</table>
</div>

この cent_txt と cent_blk のクラスは次のようになっています。

.cent_txt {text-align:center;} /* textのセンタリング+IEのバグ利用 */
.cent_blk {margin-left:auto;margin-right:auto;text-align:justify;} /* IE以外のセンタリング+IEのバグ利用の対策 */

他の方法でセンタリングする(HTML4.0では非推奨)

CSSではありませんが、画像や表のセンタリングは次の方法でうまくセンタリングできます。

<div align="center">画像や表等何でもよい</div>

枠の内側の余白(パディング)の指定(padding)

padding: 0px 2px
padding-top: 1px
padding-right: 5px
padding-bottom: 1em
padding-left: 10%

これもマージンの時と同じように padding の指定数によって適用範囲が変わります。

アンカー位置をずらすのにpaddingを使う

何も無いところにアンカーを設定して、そのアンカー位置より少し上にずれた位置に表示の先頭を指定してやりたいことがあります。その時 position:relative top:-300px と指定すると、Firefox ではうまくいっても、IEではうまく表示してくれません。そこで、 padding-top:300px とやるとIEでもうまく表示してくれます。

<div style="font-size:1pt">
<a name="menu" id="menu" style="padding-top:300px">.</a>
</div>

枠線(ボーダー)の指定をまとめて行なう(border)

border: 1px solid grey
border-top: 1px dotted red
border-right: 5px dashed #000000
border-bottom: 2px #777777
border-left: 3px

線の太さ(border-width)、線種(border-style)、色(border-color)のうち必要なものだけこの順番に指定します。　

後でCSSの内容を変更させない設定(!important)

CSSでホームページのデザインを指定するのは大変便利なのですが、ホームページにある広告が時に異常なコードを出力して、これがページのデザインを乱すことがあります。このように後で指定したコードが優先されてホームページのデザインを乱されたくない場合は、次のように指定します。

background-color:#dddddd !important

つまりCSSで指定した後に半角スペースを空けて「!important」と記述します。

途中改行させない(white-space)

white-space: nowrap

リンクの途中で改行させない時に有効です。このページのメニューにも使っていました。