CSSをまとめて指定する方法 - 33歳主婦プログラマーを目指す

本日の教材動画はこちら

まとめて指定→同じ設定にしたいということ。同じ設定をするためだけに、何行も同じこと書くのは無駄だよね？ならまとめて書いちゃおう！という考え方です。CSSをまとめて指定する方法は下記の2つがあります。

HTMLでclassを指定した後、CSSファイル側でカンマを使ってclassの記述をまとめる方法。具体的な書き方は下記となる。

まとめ方は上記の通り、「.class,」でまとめる。最後のclass行はカンマ不要。まとめたい内容を｛　｝内に書いた後は、通常通りの記述をする。こうすることで一部の設定を同じにしつつ、各クラスの個別指定も可能となる。

HTMLファイルに追記をしてまとめる方法もあります。こちらはまずHTML側でclassを複数指定し、CSS側では通常通りの記述をします。具体的な書き方は下記の通りです。

複数classを指定したい場合、class="△△△　〇〇〇" という風に、スペースでclassを区切って書けば複数指定したことになります。

CSS側では通常通りに記載。今回の場合、「base」というclassを共有設定項目にしたいため、統一したい内容をbaseクラスに記載、個別設定を各クラスに記載していく。

出来上がったページが上記となる。

まとめて指定する方法は違えど、どちらも出来上がりのページは同じ見た目になりました。そのため自分が管理しやすい方法で記述をまとめればいいんじゃないのかな？と思います！

あと調べたところ、セレクタをカンマで区切る際の改行はあってもなくてもいいみたいです。（.〇〇〇,.△△△ の記載でもOK）ただまあここは改行したほうが何と何がまとまってるかわかりやすいかなと思いました。

他にも色々と細かくまとめれるようなのですが、今の私には少し難しかったので今回は飛ばしておきます！今後必要になるかもなので参照サイトだけ貼って本日はおしまい。