【CSSの練習】　CSSの書き方 ｜ ボックスのスタイル ｜ 見出しのスタイル ｜ メニューのスタイル

【CSSの書き方】　１．書き方の基本 ｜ ２．ブロック要素とインライン要素 ｜ ３．セレクタの指定

CSSの書き方

このページでは実際にCSSを書く方法について、簡単におさらいします。

書き方はＯＫ！な方は上記メニューのボックスのスタイル、背景画像のスタイル、メニューのスタイルにて 実際にCSSを反映させる練習ができますので試してみてください。

HTML・CSSの内容についてはリファレンスサイトさんに詳しく書かれています。
【 お勧めサイト→　TAG index 】

CSSの書き方１．書き方の基本

重要

セレクタ { プロパティ ： 値； }

  1. セレクタ

    2. スタイルを適用させたいタグの要素名やID・Class名を書きます。
    タグの要素はHTMLで決められているもの、ID・Classは任意に指定したものを使います。
    また、「セレクタ１，セレクタ２」のようにカンマ（，）で区切って複数指定することで、 ふたつ以上のセレクタに同じCSSを一度に指定することもできます。

    下記「セレクタの指定」でも詳しく説明しています。

  2. プロパティ

    3. どのスタイルを変更するのかという指定を書きます。CSSで決められている単語を指定します。
    プロパティの最後にコロン（：）を書きます。

  3. 値

    4. プロパティに対して、スタイルの内容を書きます。CSSで決められている単語もしくは任意の数値を指定します。
    値の最後にセミコロン（；）を書きます。

更に、｛｝内にプロパティと値を複数書くことによってひとつのセレクタに対して複数のスタイルを指定します。

▲ページTOPへ

CSSの書き方２．ブロック要素とインライン要素

重要

HTMLで使うタグは、ブロック要素とインライン要素に分けられます。
どちらの要素かによって、CSSで指定できるプロパティや反映のされ方が変わってきますので、 きちんと理解する必要があります。

  1. ブロック要素

    2. <div>、<p>、<h1>～<h6>...、<ul>、<ol>、 <li> 等があります。
    ブロック要素でWEBページの内容を分類分けしてレイアウトするのが、CSSレイアウトの特徴です。
    ブロック要素は大きさや余白を自由に設定できます。
    背景色を指定すると、横幅いっぱい、もしくは指定した大きさいっぱいに色が付きます。

    基本的にブロック要素は縦に並びます。
    横並びにデザインする際には、CSSのfloatプロパティやpositionプロパティを 使うか、display：inline；という指定でインライン要素化します。

  2. インライン要素

    3. <a>、<img>、<span>、<strong> 等があります。
    インライン要素は要素内の内容分の大きさで固定されています。
    width(幅)、height(高さ)、padding(内側の余白)は指定できません。ただしmargin(外側の余白)は指定できます。
    背景色を指定すると、要素内の内容部分にだけ色が付きます。

    インライン要素は改行タグ<br />を入れない限り横に並びます。
    display：block；という指定でブロック要素化することができます。

▲ページTOPへ

CSSの書き方３．セレクタの指定

重要

セレクタの指定にはいくつか方法があります。
WEBページの内容が複雑になるほど、セレクタをうまく指定しなければ意図したデザインになりません。

  1. idとclass

    2. id/classは、タグに任意の名前をつける方法です。
    単純にセレクタを「div」と指定すると、WEBページの全ての<div>に対してCSSが反映されてしまいます。
    名前をつけて個別に指定することで、これを解決します。

    idはひとつのWEBページに対して同じ名前がふたつ以上あってはいけません。これはidという属性をリンク先に使用したり、他のプログラム言語の指定に使われることもあるからです。
    CSSでは、名前の頭にシャープ(#)を付けて、「#idの名前」と書いて指定します。
    反対に、classは同じ名前をいくつでも指定することができます。
    CSSでは、名前の頭にドット(．)を付けて、「．classの名前」と書いて指定します。

    主な使い分けとしては、内容を大きく分類分けしたブロックレベル要素にはidを指定し、 たくさん同じ指定をかけるような見出し等にはclassを指定します。

  2. 子孫セレクタ

    3. このセレクタの指定はとても重要で、よく使われます。
    子孫セレクタは、セレクタふたつ以上を半角スペースを空けて書くことによって、「セレクタ１の中のセレクタ２にのみCSSを適用する」 といった指定をすることができます。
    上記で説明したidと組み合わせて使われることが多くあります。

    例えば、サイトのタイトルややメニューが書かれた部分をheaderというidをつけた<div>で囲んである場合、 #header p　と書くことで、<div id="header">の中にある<p>にだけ反映されるようにCSSを指定することができます。
    更にはもっと細かく、#header p a　と書くと、<div id="header">の中にある<p>の中にある<a>にだけ指定することができます。

  3. 隣接セレクタ

    4. こちらは子孫セレクタ程は使われませんが、うまく利用すると無駄なid/classを付けずに済むことがあります。
    隣接セレクタは、セレクタふたつをプラス(+)で区切ることによって、「セレクタ１の直後にあるセレクタ２にのみCSSを適用する」ことができます。

    例えば、見出しの次の一行だけ文字色を変えたいという場合、h2 + p　という指定をすれば、 わざわざ<p>にclassを付けなくても<h2>の次にある<p>にだけCSSが反映されます。
    ただし、この場合HTMLの記述で<h2>の直後のタグが<p>でなければいけません。

  4. 子供セレクタ

    5. こちらはあまり使うことはないかもしれませんが、場合よっては有用です。
    子供セレクタは、ふたつのセレクタを不等号[大](>)で区切ることによって「セレクタ１の直下にあるセレクタ２にのみCSSを適用する」ことができます。

    「直下にある」というのは、例えば<div id="header"><a>ｌｉｎｋ</a></div>となっている場合、
    #header > a　という指定をすれば、このaにはCSSが適用されますが、<div id="header"><p><a>ｌｉｎｋ</a></p></div>となっている場合は 適用されません。

    つまり、セレクタ１の中にあって他のセレクタに囲まれていないセレクタ２に適用させるという方法です。
    大分類のブロックレベル要素が重なっている場合などに使われることがあります。

  5. 擬似クラス・擬似要素

    6. 擬似クラスは、上記セレクタを更に細かく、セレクタの状態別にスタイルを適用させることができます。

    いくつか種類があり、良く使われるものとしては：hoverというカーソルが上にあるときのスタイルです。
    例えば、a:hover　と書くことでリンクされた文字の上部にカーソルがあるときのスタイルを変えることができます。

    その他にも、訪問済みリンクのスタイルを変える擬似クラスや、擬似要素と呼ばれる要素の一部にスタイルを設定する方法等、 様々なセレクタの指定方法があります。
    全てを使うことはないですが、どんな効果のものがあるか覚えておくと、WEBページをデザインする際の幅が広がります。

▲ページTOPへ