[CSS] CSSの書き方

CSSの構成

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

＜セレクタ＞ { ＜プロパティ＞ : ＜値＞; }

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

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

.hoge{
  color:red;
  background-color:yellow;
  font-size:10px;
}

.hoge{

color:red;

background-color:yellow;

font-size:10px;

}

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

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

p{color:red;}

1	p{color:red;}

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

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

.hoge{background-color:yellow;}

1	.hoge{background-color:yellow;}

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

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

#hoge{border:1px solid black;}

1	#hoge{border:1px solid black;}

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

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

*{font-size:10px}

1	*{font-size: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{margin:10px;}

1	nav ul{margin:10px;}

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

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

section .hoge{color:blue;}

1	section .hoge{color:blue;}

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

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

section p.hoge{color:blue;}

1	section p.hoge{color:blue;}

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

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