こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
以前、【初めてのHTML/CSS】CSS（スタイルシート）の優先順位を覚えておこう！で基本的なスタイルの指定方法をご紹介しましたが、今回はそれを応用した書き方でできる、かんたん便利なCSSデザインをご紹介します！
かんたん便利なCSS（スタイルシート）の書き方！
似たようなデザインだけど、文字の色だけ変えたい・線の色だけ変えたいなんてことありますよね。下記のようにタイトルの色を変更する方法を例に、一緒にみていきましょう。
決済方法について
ご利用いただけるクレジットカードは、○○/○○です。
配送・送料について
○○運輸にて、全国一律○○○円でお届けします。
↓↓
決済方法について
ご利用いただけるクレジットカードは、○○/○○です。
配送・送料について
○○運輸にて、全国一律○○○円でお届けします。
はじめに、h2タグ、pタグに直接CSSを書いている場合の表示を確認してみましょう。
▼HTML例
|
1 2 3 4 |
<h2>決済方法について</h2> <p>ご利用いただけるクレジットカードは、○○/○○です。</p> <h2>配送・送料について</h2> <p>○○運輸にて、全国一律○○○円でお届けします。</p> |
▼CSS例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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例
|
1 2 3 4 5 6 7 8 |
<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例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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タグの左線の色を変えることができました！
決済方法について
ご利用いただけるクレジットカードは、○○/○○です。
配送・送料について
○○運輸にて、全国一律○○○円でお届けします。
・id名も同じ方法で、CSSを適用することができます。
・リストタグでの指定方法は、「list-style」を指定しても反映しない場合の対処方法もご参考ください。
完了！
いかがでしたでしょうか。
汎用性の高いCSSの書き方がおすすめですが、同じようなデザインだけど、ちょこっと装飾を変えたいときなどにご活用ください。
それではまた！
