【逆転の発想!?】便利で汎用性のあるCSSの書き方・使い方！

だんだんと増えていくCSSの重複

私は最初の頃CSSを書く際、divなどの要素にユニークなclassなどを付与して「この要素のCSSはこう！」というCSSの書き方をしていました。

それ自体は間違ってないと思いますし今も大抵は同じ考え方で書いているのですが、例えば以下の様なhtmlの場合、

<div class="sample">
  <p>テスト</p>
  <img src="img/pic01.jpg" alt="写真01">
</div>

※わかりやすくする為にwidthなど色々と省略しています。

「<p>テスト</p>」と「pic01.jpg」の間に1文字分の間隔を開けたい場合、CSSファイルには以下のように記述していました。

.sample p {
  margin-bottom: 1em;
}

もちろんこれで正解なんですが、こういう書き方をしていくとコンテンツが増えていくにつれてだんだん「重複する記述」が増えていきます。

どういう事かと言うと、他の要素にも「margin-bottom」を「1em」かけたい場合、同じCSSファイル内に「margin-bottom: 1em;」を複数記述する事になるという事です。

コンテンツの量や記述量、デザインなどによって違いはありますし、1つのCSSファイルの中で全く重複させないなんて事はまずムリですが「可能な限り重複は避ける事」は出来ます。

ファイルの肥大化はページの表示速度を落としますし、煩雑になったコードはコーディングの際にミスの原因にもなります。なので普段からどうやったら効率的にコーディング出来るか意識しながら書いていく事は非常に大切です。

次項で「私はどう書いているか」を説明します。

逆転の発想でCSSは一気に便利になる

前項で書いた「この要素のCSSはこう！」というイメージをお持ちかどうかはさておき、これを逆に考えて「このCSSをかけたい要素にclassを付与するぞー！」と考えます。

過去記事のどこかにも書いた記憶がありますが、要するに「ユニークな名前のclass名を作ってプロパティなどを書く」 → 「その効果を使いたい要素にをclassを付与する」という事です。

この説明だとよくわからないかもしれないので、以下をご覧ください。

前項と同じく以下のようなhtmlの場合、

<div class="sample">
  <p>テスト</p>
  <img src="img/pic01.jpg" alt="写真01">
</div>

CSSファイルに以下の記述をしておけば、

.mb1e {margin-bottom: 1em;}

先程のhtmlは以下のように「class=”mb1e”」を追加するだけで「margin-bottom: 1em;」がかかります。

<div class="sample">
  <p class="mb1e">テスト</p>　←「class="mb1e"」を付与
  <img src="img/pic01.jpg" alt="写真01">
</div>

こうする事で「他の要素でもmargin-bottom:1em;を使いたい時」はその要素に「class=”mb1e”」を付与すればOKになります。

よく使うCSSをまとめて書いておく

前項の場合、使いまわせるのは「.mb1e」の「margin-bottom: 1em;」だけです。

なのでよく使うCSSの記述は以下のようにまとめて書いておきます。

/* ◆ padding ◇ ------------------------------*/
.pt0 {padding-top     : 0;}
.pt20 {padding-top    : 20px;}
.pt40 {padding-top    : 40px;}
.pt5p {padding-top    : 5%;}
.pt10p {padding-top   : 10%;}
.pt1e {padding-top    : 2em;}
.pt2e {padding-top    : 2em;}
.pb0 {padding-bottom  : 0;}
.pb05e{padding-bottom : 0.5em;}
.pl1e {padding-left   : 1em;}
.pl2e {padding-left   : 2em;}

/* ◆ margin ◇ ------------------------------*/
.mt0 {margin-top       : 0;}
.mt1e {margin-top      : 1em;}
.mt2e {margin-top      : 2em;}
.mt3e {margin-top      : 3em;}
.mb0 {margin-bottom    : 0;}
.mb05e {margin-bottom  : 0.5em;}
.mb1e {margin-bottom   : 1em;}
.mb2e {margin-bottom   : 2em;}
.mb3e {margin-bottom   : 3em;}
.mb4e {margin-bottom   : 4em;}
.mb5e {margin-bottom   : 5em;}
.mb10 {margin-bottom   : 10px;}
.mb20 {margin-bottom   : 20px;}
.mb40 {margin-bottom   : 40px;}
.mb50 {margin-bottom   : 50px;}
.mb60 {margin-bottom   : 60px;}
.mb80 {margin-bottom   : 80px;}
.mb5p {margin-bottom   : 5%;}
.mb10p {margin-bottom  : 10%;}

/* ◆ color ◇ ------------------------------*/
.white {color    : white;}
.black {color    : black;}
.gray {color     : gray;}
.aaa {color      : #aaa;}
.ccc {color      : #ccc;}
.red {color      : red;}
.pink {color     : pink;}
.d-pink {color   : deeppink;}
.blue {color     : #0000CC;}
.orange {color   : #ff6600;}
.green {color    : #02c102;}

上記はちょっと書きすぎかもしれませんが、こういった内容を「general.css」や「common.css」などといった基幹ファイルに記述しておくと、大抵の場合どのページでもリンクされてると思うので便利です。

カラーコードとかも上記のようによく使う色を指定しておけばとてもわかりやすいです。テキストの色を変える時など非常に便利ですね☆

次は「こういった問題も解消出来るよ」というお話です。

よく目にするブログの「連続改行」について

よくブログなどで記事を読みやすくする為に「連続改行」をしている方を見かけますが、こういった「デザインの為の連続改行は非推奨」となっています。

例を挙げると以下のようなパターンです。

<div class="main">
  <p>その時彼は言った・・・</p>
  <br>
  <br>
  <br>
  <p>「なんじゃこりゃぁぁぁーーっ！！」</p>
  <br>
  <br>
  <p>そしてふと、我に返る・・・</p>
</div>

上記はデザインの為の連続改行なので「NG」です。

ちなみに上記を通常のCSSで無理矢理装飾しようとすると、私の場合以下のような記述をすると思います。

.main p:first-child {
  margin-bottom: 3em;
}

.main p:nth-child(2) {
  margin-bottom: 2em;
}


とか、

.main p:first-child {
  margin-bottom: 3em;
}

.main p::nth-child(even) {
  margin-bottom: 2em;
}

などなど。。

非常に面倒くさい上に、これだともし他にも「main」というdivがあった場合pタグを使いにくくなってしまい「不便極まりない」ですね。

ですが、前項のclassを付与すれば簡単に連続改行の問題を解決できる上に、htmlのソースもすっきり綺麗になります。

classを付与するやり方で書いた場合、htmlのソースは以下のようになります。

<div class="main">
  <p class="mb3e">その時彼は言った・・・</p>
  <p class="mb2e">「なんじゃこりゃぁぁぁーーっ！！」</p>
  <p>そしてふと、我に返る・・・</p>
</div>

大分すっきりしましたね☆

こういった感じで「ちょっとこの部分だけCSSをかけたい」という場合にも「連続改行せずに」非常に便利なCSSの使い方が出来ます。

CSSのインライン記述について

ここまでの内容をみると、「タグに直接styleを記述すればいーじゃん」と思う方もいるかもしれませんが、結論から言うと個人的に全くおすすめしません。

タグに直接styleを記述するのはhtmlのソースの可読性を下げますし、執筆時点では「AMPエラー」となります。

ページの表示速度を上げる為にhead内に<style>～</style>でクリティカルCSSを記述するのは良い事ですが、以下のようにタグに直接ずらずらと記述するのは避けた方が良いです。

※以下は極端な例です。

<div class="main">
  <p style="font-size:160%; color: #ccc; font-weight: bold; line-height: 1.7; padding-left: 5px; margin-bottom: 3em;">その時彼は言った・・・</p>
  <p style="font-size:160%; color: #c00; font-weight: bold; line-height: 1.7; padding-left: 5px; margin-bottom: 2em;">「なんじゃこりゃぁぁぁーーっ！！」</p>
  <p>そしてふと、我に返る・・・</p>
</div>

たまに上記のように記述されている方を見かけますが、非常にソースの可読性が悪いですね。

後々styleを変更する際にもセミコロンを忘れてしまったり記述を間違ってしまったり、メンテナンスにも悪影響を及ぼします。

また、CSSの優先順位は「インライン（タグに直接styleを記述）」が最も優先される（importantは除く）ので、外部のCSSからstyleをかける事が困難になります。

この場合で言うとタグに直接styleを記述するのではなく、タグにclassを付与してCSSファイルの方で管理する方が良いです。

次項では「CSSの優先順位」について少しだけ書いておきます。

CSSの優先順位について

CSSの優先順位は「記述する場所」の他、「点数」でも優先順位が決まります。

詳細な説明は割愛しますが、点数はセレクタ等を増やす事で加点されます。

以下が簡単な例です。

p {
  color: #ccc;
}

↑よりも↓の方が点数は高い。

.main p {
  color: #ccc;
}

↑よりも↓の方が点数は高い。

div.main p {
  color: #ccc;
}

ちょっと乱暴な言い方をすると、CSSが競合して効かない場合は「セレクタを増やせば効きますよ～」というお話です。（かなり乱暴な説明です）

他にも、CSSはファイルの上から順番に読み込まれていくので、同じ記述をした場合上書きされます。

例えば以下のようなhtmlがあったとします。

<div class="wrap">
  <div class="main">
    <p>サンプルテキスト</p>
  </div>
</div>

上記に対してstyle.cssに以下の記述をした場合、colorは「#c00」になります。

.main p {
  color: #ccc;
}

.main p {
  color: #c00;
}

ちなみに以下のような場合も、colorは「#c00」になります。

.main p {
  color: #ccc;
}

.wrap p {
  color: #c00;
}

ちょっと本記事の内容から脱線しすぎちゃいましたね。

上記は書くまでもない程基本的な事かもしれませんが、これからCSSを始めるという方や、まだ始めたばかりの方などは頭の隅に入れておくと後々便利ですよ☆

ちなみに私はメディアクエリを使った時に初めて気付きました（笑）

まとめ

今回は「ちょっと発想を変えるだけで便利で汎用的に使えるCSSの書き方・使い方」の紹介でした。

コーディングは本当に人それぞれ決まったパターンやルールなどがあると思いますので、本記事の内容が全員に当てはまるかと言うとそうではないと思います。

ただ、私が今までやってきて「これは便利だなぁ～」と感じてやっている事なので、実践するしないは別として頭の隅に入れておくと良いと思います。

冒頭でも書きましたが、私は学校へ行ったり本で勉強したり誰かの所に教わりに行ったりなど全くしていないので、本記事の内容が絶対正しいとも言い切れませんし、世間一般的に使われている当然の内容なのかもわかりません。

もし「こうした方が良い」とか「それは違うよ～」といった事がありましたら、そっと教えてくださいm(＿ ＿)m