[CSS] CSSの書き方

CSSの構成

CSSは以下のような構成になっています。

<セレクタ> { <プロパティ> : <値>; }
要素説明
<セレクタ>このCSSを反映させる先を指定します。
例えば、タグ名やクラス名、ID名を指定します。
複数指定して階層指定することもできます。
<プロパティ>CSSスタイルの種類を指定します。
指定できるもののほんの一例として、color、font、borderなどあります。
<値>プロパティに設定する値を指定します。
指定できる内容はプロパティによって異なります。

1つのセレクタ内に複数のCSSを指定することもできます

HTMLタグに直接CSSを書く場合は、「style」属性にてCSSを記述してください。
サンプルは、「[CSS] CSSを定義する場所」をご覧ください。

CSSの書き方サンプル

CSSのいろいろなサンプルです。

例)全てのpタグ内の文字の色を赤色にする

全てのpタグのみスタイルが適用されます。

○ <p>あいうえお</p> ○ <p class="hoge">あいうえお</p> ○ <p id="hoge">あいうえお</p> × <div>あいうえお</div> × <div class="hoge">あいうえお</div> × <div id="hoge">あいうえお</div>

例)class「hoge」が指定されたタグ内の背景色を黄色にする。

「class="hoge"」が指定されたタグのみにスタイルが適用されます。

× <p>あいうえお</p> ○ <p class="hoge">あいうえお</p> × <p id="hoge">あいうえお</p> × <div>あいうえお</div> ○ <div class="hoge">あいうえお</div> × <div id="hoge">あいうえお</div>

例)id「hoge」が指定されたタグに枠線を付ける。

「id="hoge"」が指定されたタグのみにスタイルが適用されます。

× <p>あいうえお</p> × <p class="hoge">あいうえお</p> ○ <p id="hoge">あいうえお</p> × <div>あいうえお</div> × <div class="hoge">あいうえお</div> ○ <div id="hoge">あいうえお</div>

例)全てのタグ内の文字サイズを10pxにする。

pタグであろうとdivタグであろうと関係なく、全てのタグにスタイルが適用されます。

○ <p>あいうえお</p> ○ <p class="hoge">あいうえお</p> ○ <p id="hoge">あいうえお</p> ○ <div>あいうえお</div> ○ <div class="hoge">あいうえお</div> ○ <div id="hoge">あいうえお</div>

例)navタグ配下のulタグのマージンを10pxにする

以下のようなnavタグ配下にあるulタグにのみスタイルが適用されます。

<nav>   <ul>     <li>いぬ</li>     <li>ねこ</li>   </ul> </nav>

以下のようなnavタグ配下以外の場合は適用されません。

<div>   <ul>     <li>いぬ</li>     <li>ねこ</li>   </ul> </div>

例)sectionタグ配下の「clsss="hoge"」が指定されたタグの文字色を青にする。

以下のようにsectionタグ配下にあるhogeクラスが指定されたタグにのみスタイルが適用されます。

<section>   <p>これは適用されません。</p>   <p class="hoge">これは適用されます。</p>   <div class="hoge">これは適用されます。</div> </section>

例)sectionタグ配下の「clsss="hoge"」が指定されたpタグのみ文字色を青にする。

以下のようなsectionタグ配下にあるhogeクラスが指定されたpタグにのみスタイルが適用されます。

<section>   <p>これは適用されません。</p>   <p class="hoge">これは適用されます。</p>   <div class="hoge">これは適用されません。</div> </section>

CSS

Posted by tora