CSS(スタイルシート)の書き方

  • CSS
  • 現在地

HTMLなどの構造を表すマークアップ文書に、見栄えを適用するために必要なスタイルシートですが、その中でも、一般的に使用されているCSSの書き方について記述しておきます。

CSSの記述場所

CSSを適用させるために記述できる場所は、HTML文書内の <head> 内、タグごとの style 属性に直接、外部のCSSファイルと3つの場所があります。

<head> 内に記述する場合

  • <head>
    • <style type="text/css"> ここに記述 </style>
  • </head>

HTMLのタグの style 属性に直接記述するインラインスタイルシート

この方法では、文法で説明するセレクタを省いて記述されます。(直接記述するためそのタグにしか適用されないので。)

<p style="ここにCSSを記述"> 文章 </style>

外部のCSSファイルに記述

外部に拡張子.css を持つファイルを用意して、そこに文法通りの記述をするだけです。

外部のCSSファイルは読み込む必要がありますので、外部CSSの読み込み方をご覧ください。

三種類の方法がありますが、サイト全体のデザインを一つでまかなえる外部CSSファイルを利用するのが一番効率がいいです。

ただ、そのページにしか適用させないつもりなら他の二つの方法を利用しましょう。外部CSSファイルのサイズも小さく済みますし。

文法

CSSでの文法は以下のようになり、この文法でひたすら記述することになります。

  • セレクタ {プロパティ: 値}
セレクタ
スタイルを適用する対象。{}内に記述されたスタイルが適用されることになります。
プロパティ
属性。適用するスタイル。プロパティと値を一つのまとまりとしてセミコロン(;)で区切られることで、いくつでも記述できます。

例えば、p 要素に背景色(青)と文字色(白)のスタイルを適用したい場合は、以下のようになります。

  • p {background-color: #00F; color: #FFF}

基本はこれだけなのですが、セレクタの対象をパターンマッチのように指定することができ、これを利用してCSSの記述を減らすことも可能です。

なお、HTMLのタグ内でインラインスタイルシートとして利用する場合は、style="" のセミコロンの中にCSSを記述することになります。

セレクタの指定方法

混乱しやすいので、属性という記述はHTMLでのもので、CSSの属性はプロパティということにします。

要素型セレクタ : 要素名
指定した要素名を適用対象にします。
全称セレクタ : *
全要素を対象にします。
id セレクタ : #id名
HTML上にて、指定した id 名を持つ要素を適用対象にします。id 名の前にナンバー記号(#)を置いて記述。
class セレクタ : .class名
HTML上にて、指定した class 名を持つ要素を適用対象にします。class 名の前にドット(.)を置いて記述。

記号によるパターン指定

ここでのセレクタという文字は、上記の全称セレクタ以外のセレクタを指します。

, : セレクタ,セレクタ
複数のセレクタを適用対象にする場合に使用します。
> : 親セレクタ > 子セレクタ
親となるセレクタ内の直接のセレクタのみを適用対象にします。
半角空白 : 親セレクタ 子セレクタ
親セレクタ内にある子セレクタを適用対象にします。間に別の要素があっても適用されることになります。
[] : セレクタ名[属性名]
指定した属性を持つセレクタを対象にします。属性名以外に併せて値も記述することで、その値も条件に加える事も出来ます。

例えば、p 要素で lang 属性の値が英語(en)の場合のみに適用させたい場合、セレクタは p[lang="en"] となります。

まとめて属性セレクタと呼ばれるこの記述方法では、属性値を指定するイコール(=)の前に記号を置くことで、条件に補足を付けることができます。
  • パイプライン(|)を置いた場合、値の文字が属性値の先頭にあれば一致したことになります。
    上の例で言えば、値が "en" の他に "en-us" でも一致します。
  • チルダ(~)を置いた場合、値の文字が他の属性値と一緒に半角で区切られて指定されている場合でも、一致したことになります。
+ : セレクタ + セレクタ
左側のセレクタの後に右側のセレクタがある場合に適用対象にします。なお、スタイルが適用されるのは右側のスタイルのみです。

擬似クラスなどいろいろ省いていますが、だいたいこんな感じになります。

後書き

今回は、何度もセレクタを追記していたせいで肥大化したCSSファイルを小さくできないかと思い、リファレンスを参考にCSSの書き方を記述してみました。

おかげで、属性セレクタなんてものを思い出しました。(使用するかどうかは別ですが。)

セレクタのパターンを指定することで、CSSファイルを小さくできるかもしれませんが、あちこち動作に不合理が生じる可能性があるので、既存のCSSを組み替える場合は一つ一つ確認しながらやっていきましょう。

スポンサードリンク

inserted by FC2 system