cssのクラス名が重複した時についてのメモ - アラサーからのプログラマー生活

こんばんは、堀井です。

現場でC言語を触る生活が半年ほど過ぎましたが、こうプログラムを書いたりしているとどうしても出てくる「個人でも何か作りたいな～～」と言う欲望。

これに従うためには欲望の通りに動くしかないですよね。

と言うことでちょっとやってみようかと思って考えるのですが「自分は何がやりたいか？」と言うこと。

結果的にタイトル通りのことを考えるようになりましたので、さっそく行ってみましょ！

そもそも何がしたい？
cssで早速躓いた
より詳しいプロパティ指定が勝つ
クラス名の重複に関してのまとめ
最後に

そもそも何がしたい？

物が作れる楽しさを知ることで、

そこから見つけていく予定だから、

なんでもいいから簡単に作れるやつを教えてくれ！！！

と言う気持ちで胸がいっぱい。

実際今ならC言語の重要さは何となくわかりますし、C言語ではなくいきなりRailsみたいなフレームワークを学びだしたとしても自分の理解の進度は遅かったんじゃないかなー*1と思います。

でも何でも作れるとは言え餅は餅屋です。

私はweb系のちょっとしたアプリケーション風サイト（PWA：Progressive Web Apps）を作ってみたいなと思っているのですが、そこでC言語をあえて選択する理由はないですよね。

そこで上記noteを参考に見てみると、目標を達成するための学習ルートとしては

html5.2, css3
Javascript
JQuery
BootStrap
Ruby
Rails

･･･でしょうか？

よーし、まずはhtmlからだ！！

とりあえず復習だ！！

cssで早速躓いた

はい。

タイトルの通りです。

例えばこんなコードを書きました。

index.html

<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <title>ホームページ</title>
  </head>

  <body>
    <h1>テスト</h1>
    <ol class="hoge">
      <li>その１</li>
      <li>その２</li>
      <li>その３</li>
    </ol>
    <p>test</p>
    <ul class="hoge">
      <li>その１</li>
      <li>その２</li>
      <li>その３</li>
    </ul>
  </body>
</html>

※今記事内でhtmlコードは全て上記のものをそのまま流用するため、以降は省略します。

common.css

@charset "UTF-8";

body {
  background-color: #c0ffee;
}

f:id:hollage0214:20190521002431p:plain

こう表示されます。

この時点でhogeクラスは何も装飾されていませんね。

ちなみにc0ffeeはただの茶目っ気です。

さて、今回の記事の内容ですが、

本来してはいけないクラス名の重複をしたらどうなるか？

もし同様のクラス名を付けてしまった場合、cssの指定はどのようにすればよいか？

と考えて少し弄ってみた結果です。

普通に指定してみる

@charset "UTF-8";

.hoge {
  color: red;
}

f:id:hollage0214:20190521002348p:plain

hogeを冠するol, ulともに修飾されましたね。

olのみ指定してみる

@charset "UTF-8";

body {
  background-color: #c0ffee;
}

ol.hoge {
  color: red;
}

f:id:hollage0214:20190521002806p:plain

予想通りですね？

ではcssの宣言が重複したら？果たしてどうなるでしょうか。

重複宣言してみる

@charset "UTF-8";

body {
  background-color: #c0ffee;
}

ol.hoge {
  color: red;
}

ol.hoge {
  color: blue;
}

f:id:hollage0214:20190523220207p:plain

後ろに書かれたblueの指定が勝ちました。

プログラムと同じように上から実行されていく感じでしょうね。

これも何となく分かるかな、と思います。

より詳しいプロパティ指定が勝つ

それでは下記のように書くとどうなるでしょうか？

@charset "UTF-8";

body {
  background-color: #c0ffee;
}

ol.hoge {
  color: red;
}

.hoge {
  color: blue;
}

うーん、先ほどと同じく.hogeが勝って青になる？

答えはこちら。

f:id:hollage0214:20190523220651p:plain

より詳しいプロパティを指定してある方が勝つんですね！！

クラス名の重複に関してのまとめ

そもそも目的を別としたクラス名は重複しないようにしないといけないのは大前提のようです。

ただ親を人質に取られるなどがあり、やむを得ず重複させなければならない場合は下記のように指定しましょう。

@charset "UTF-8";

body {
  background-color: #c0ffee;
}

ol.hoge {
  color: red;
}

ul.hoge {
  color: blue;
}

もし被せるなら .hoge ではなく、タグ名.クラス名の表記にしなければなりませんね。

最後に

Sass、Scssがめちゃくちゃ気になりますね。

Sass（Syntactically Awesome StyleSheet）

Rubyの導入が必要と言うことですが、書き方がカッコよくて好きなのでその内導入したいですね。

それではまた次回。

*1:得手不得手など極端に個人差があると思います。人によっては逆の方がいいまで。