こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

以前、【初めてのHTML/CSS】CSS（スタイルシート）の優先順位を覚えておこう！で基本的なスタイルの指定方法をご紹介しましたが、今回はそれを応用した書き方でできる、かんたん便利なCSSデザインをご紹介します！

かんたん便利なCSS（スタイルシート）の書き方！

似たようなデザインだけど、文字の色だけ変えたい・線の色だけ変えたいなんてことありますよね。下記のようにタイトルの色を変更する方法を例に、一緒にみていきましょう。

↓↓

はじめに、h2タグ、pタグに直接CSSを書いている場合の表示を確認してみましょう。

▼HTML例

<h2>決済方法について</h2>
	<p>ご利用いただけるクレジットカードは、○○/○○です。</p>
<h2>配送・送料について</h2>
	<p>○○運輸にて、全国一律○○○円でお届けします。</p>

▼CSS例

h2 {
	color: #222;/* 文字色の指定 */
	font-size: 18px;/* 文字サイズの指定 */
	border-left: #03a49b solid 6px;/* ボーダー左線の指定 */
	border-bottom: #ababab dotted 2px;/* ボーダー下点線の指定 */
	padding: 4px 10px;
}
p {
	color: #333;/* 文字色の指定 */
	font-size: 15px;/* 文字サイズの指定 */
	margin: 16px 0 18px 8px;
}

↓ソース例を入力すると、このようにh2タグ、pタグは、同じCSSで装飾されて表示されます。

それではやってみよう

上記のソース例をベースに、同じタグに違うCSSで装飾したい場合の書き方をみていきましょう。

（1）divで囲んで名前を付ける！

違うCSSを指定したい範囲をdivで囲み、名前をつけましょう。

ここでは例として、それぞれのdivに下記のようにclass名をつけてみます。
『決済方法について』→「pay_guide」
『配送・送料について』→「delivery_guide」

▼HTML例

<div class="pay_guide">
	<h2>決済方法について</h2>
		<p>ご利用いただけるクレジットカードは、○○/○○です。</p>
</div>
<div class="delivery_guide">
	<h2>配送・送料について</h2>
		<p>○○運輸にて、全国一律○○○円でお届けします。</p>
</div>

（2）タグの前に名前を入力してCSSを書く！

h2タグ、pタグの前に、先ほど付けたclass名を入力してCSSを指定しましょう。

ここでは例として、「delivery_guide」のh2タグに違う左線の色を指定してみます。

▼CSS例

h2 {
	color: #222;/* 文字色の指定 */
	font-size: 18px;/* 文字サイズの指定 */
	border-left: #03a49b solid 6px;/* ボーダー左線の指定 */
	border-bottom: #ababab dotted 2px;/* ボーダー下点線の指定 */
	padding: 4px 10px;
}
p {
	color: #333;/* 文字色の指定 */
	font-size: 15px;/* 文字サイズの指定 */
	margin: 16px 0 18px 8px;
}
.delivery_guide　h2 {
	border-left: #cf135a solid 6px;/* ボーダー左線の指定 */
}

↓「delivery_guide」のh2タグの左線の色を変えることができました！

完了！

いかがでしたでしょうか。
汎用性の高いCSSの書き方がおすすめですが、同じようなデザインだけど、ちょこっと装飾を変えたいときなどにご活用ください。

それではまた！