よく使用するスタイルシート(CSS)の書式

よく使用するスタイルシートの書式をまとめておきます。

はじめに

よく使用するスタイルシートの書式をまとめます。
・セレクタの書式(要素の親子関係)
・余白の書式(margin, padding)

セレクタの書式(要素の親子関係)

すべての子要素に有効となる指定方法です。
 指定方法: <親の要素名> <子の要素名>
<CSSの例>

pre.csstest11 span.csstest12 {
	color: #00ff00;
}

<HTMLの例>

<pre class="csstest11">
	<span>
今日は<span class="csstest12">よい天気です。</span>
	</span>
</pre>

<表示例>

	
今日はよい天気です。
	

親の直下の子孫のみ有効となる指定方法です。別の要素を挟むと対象になりません。
 指定方法: <親の要素名> > <子の要素名>
まずは、CSSが有効なケースの記述になります。
<CSSの例(CSS有効)>

pre.csstest21 > span.csstest22 {
	color: #00ff00;
}

<HTMLの例(CSS有効)>

<pre class="csstest21">
今日は<span class="csstest22">よい天気です。</span>
</pre>

<表示例(CSS有効)>

今日はよい天気です。

次に、CSSが無効のケースになります。
<CSSの例(CSS無効)>

pre.csstest21 > span.csstest22 {
	color: #00ff00;
}

<HTMLの例(CSS無効)> ※class指定なしのspan要素が挟まっています。

<pre class="csstest21">
	<span>
今日は<span class="csstest22">よい天気です。</span>
	</span>
</pre>

<表示例(CSS無効)>

	
今日はよい天気です。
	


余白の書式(margin, padding)

「margin」および「padding」で使用する余白の指定方法をまとめます。
・値1個:上下左右
・値2個:上下,左右
・値3個:上,左右,下  ※「間が左右」で覚えるよよいかも
・値4個:上,右,下,左 ※「時計回り」で覚えるとよいかも

おわりに

よく使用するスタイルシートの書式をまとめました。

関連記事(目次)

  1. インターネットで情報発信!

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)