WEB制作

2016/10/07

ゼロからWordPressでブログを作ってみよう!第三回:CSSの記述方法と種類

3.CSSとは

CSSはHTMLに対して装飾・レイアウトを指定する言語です。
以前はHTML上で幅・高さ・色などを記述していましたが、今のWEB制作ではそのほとんどがCSSの役割になります。

また現在主流のCSS3では、それまでjavascriptが担っていたアニメーションや画像でしか表現できなかった変形などの指定も可能になり、HTML/CSSでの表現の幅が大きく広がりました。

それではCSSの書き方から解説していきます。

CSSはどこに書くの?

CSSはHTMLファイル(拡張子が.htmlのファイル)内に書く方法(内部スタイルシート)と、CSSファイル(拡張子が.cssのファイル)に書いてhtmlファイルに読み込む方法(外部スタイルシート)があります。

内部スタイルシート

HTMLファイル(拡張子が.htmlのファイル)に<style>~</style>タグを書き、その中に直接記述する方法です。

    <style>
      ~スタイル指定の記述~
    </style>
  

ひとつのファイル内にhtmlとcssを記述するので、少ない記述量ならばコードの見通しも良く編集も楽ですが、ホームページを作るとなるとCSSだけでも1000行は軽く超える場合がほとんどなので現実的ではありません。
ただCSSを覚えるにはこちらのほうが見やすいので、CSSの説明では内部記述で進めていきます。

外部スタイルシート

htmlファイルとは別に拡張子が.cssのCSSファイルを用意する方法です。

外部スタイルシートの場合、htmlに反映させるにあたって<head>内でcssの読み込みが必要です。

スタイルシート読み込みの記述例
    <head>
      <link rel="stylesheet" href="./css/style.css">
    </head>
  

linkタグのherf=””でcssファイルの場所を指示しています・・・が、初めて見る方には何のことだかサッパリ分からないと思います。
これを理解するには「絶対パス」「相対パス」というものを理解しなければなりません。

  • 絶対パス・・・「http://」からはじまるURL。住所で例えると県庁所在地から市区町村、番地と詳細を指定すること。
  • 相対パス・・・現在のファイルから見て参照ファイルがどの位置にあるか。住所で例えると「自分の家の隣の家」など相対位置で指定すること。

理解が難しければホームページを作る上では主に「他のホームページにリンクを張るときに絶対パス、ホームページを構成するcssや画像を表示するときは相対パス」と覚えておけば問題ないでしょう。

相対パスを図で見るとこんな感じです。

相対パス

このように相対パスで同じ階層のディレクトリ→ファイルを参照する場合、”./”が同階層のディレクトリ、”css/”がcssという名前のディレクトリ、最後の”style.css”がファイル名になります。
なお”./”は省略可能ですので一般的には「css/style.css」と記述されます。
また同一ディレクトリ内にファイルがある場合はファイル名「style.css」だけでOKです!

あとディレクトリを上って別ディレクトリのファイルを参照する場合、1つ上る毎に「../」を記述します。
ディレクトリを2つ上るならば「../../」となります。

基本的な作り方ならばCSSを深い階層に置くことはないと思いますのでCSSでこういった記述を使うことはないと思いますが、CSSから画像を参照する際などに使用しますので、ついでに覚えておきましょう!

3-2.CSSの指定方法

CSSの指定には、ID・クラスの指定とタグの指定の2通りの方法があります。

ID・クラスを指定する

HTMLのタグ内にidやclassを記述して、それに該当するタグを装飾する方法です。
HTML内では「id=”任意のID”」「class=”任意のクラス”」と記述し、CSSではそれぞれの先頭にidなら「#」、classなら「.」を書いて指定します。

    <style>
      #box{
        border:1px solid #000;
      }
      .blue{
        color: #00f;
      }
      .green{
        color: #0f0;
      }
    </style>
    <div id="box">
      ようこそウィズへ!<br>
      このサイトは、<span class="blue">船橋市にある</span><a class="green" href="">ホームページ制作会社ウィズのサイト</a>になります。
      <p>
        <a href="">WEBサイト制作のお問合せはコチラ!</a>
      </p>
    </div>
    

タグ名を指定する

タグ名を直接記述しスタイルを変更する方法です。

    <style>
      div{
        border:1px solid #000;
      }
      span{
        color: #00f;
      }
      a{
        color: #0f0;
      }
    </style>
    <div>
      ようこそウィズへ!<br>
      このサイトは、<span>船橋市にある</span><a href="">ホームページ制作会社ウィズのサイト</a>になります。
      <p>
        <a href="">WEBサイト制作のお問合せはコチラ!</a>
      </p>
    </div>
    

ただこのままですと同htmlファイル上の全てのspanとaにこのスタイルが影響してしまいます。
例外的に全てのタグに作用するスタイルを書く場合もありますが、通常こういったスタイルを適用させる時はID・クラスを併用して影響範囲を狭くした書き方をします。

    <style>
      #box{
        border:1px solid #000;
      }
      #box span{
        color: #00f;
      }
      #box>a{
        color: #0f0;
      }
    </style>
    <div id="box">
      ようこそウィズへ!<br>
      このサイトは、<span>船橋市にある</span><a href="">ホームページ制作会社ウィズのサイト</a>になります。
      <p>
        <a href="">WEBサイト制作のお問合せはコチラ!</a>
      </p>
    </div>
  

このようにID・クラスとタグを半角スペースで繋ぐことで、ID・クラス内のタグに限定できます。
尚、繋ぐ要素はタグでもID・クラスでもどちらでも使えます。

スタイルの影響範囲

また上記の指定ですと内包するタグ全てにスタイルが適用されますので、ID・クラスの直下のものだけに限定限定したい場合はスペースの代わりに「>」で繋ぎます。
こうすることで上記例の場合「aタグの文字を緑にする」指定が「id=”box”」直下のものだけになって、下のpタグで囲まれたaタグには適用されません。

こうしたCSSの記述によって適用される範囲を「影響範囲」と呼びます。

影響範囲を考えずにCSSを記述すると、意図しない場所で意図しないスタイルが適用されてしまいます。
タグで指定する場合は特に気を付ける必要があり、またクラス名のバッティングも同様の結果になりかねないので気を付けて記述しましょう。

まとめ

以上がcssの書き方の基本でした!
cssのプロパティについては少々長くなるので次の回で解説します。

CSSの書き方まとめ
  • CSSを記述する方法はHTML内に書く「内部スタイルシート」と別のCSSファイルを読み込む「外部スタイルシート」がある
  • CSSファイル読み込みはheadタグ内に記述し、基本的に相対パスで書く。
  • CSSの指定方法は単一のID・クラス指定とタグ指定の他に、複数の要素を繋げて影響範囲を限定する記述方法がある。