本付録は、メインシリーズであるWordPressのテーマ作成に役立ちそうな情報を補足していくパートだ。
前回は、そもそもCSS設計とは何ぞやという内容の解説と、ごく簡単ではあるがCSSの基本を復習した。
まだ具体例が出てきておらず、いまいちイメージが湧かないと思う。
が、せめてなぜCSS設計というものをするのか、という部分だけでも理解しておいてもらえればOKだ。
以下がその記事だ。
さて、今回も下準備が続く。
今回は二つのトピック、リセットCSSと英単語の結合方式について書いていこう。
前者はまだCSSの話だが、後者は一般的なプログラミングの話と思ってもらっていいだろう。
どちらも必要な内容なので、実際にCSSを書く前には理解しておきたい。
なお、本付録は以下の本を参考にしている。
気になる方は、実際に本屋で中身を見てみたり、買ってみたりしよう。
リセットCSS
リセットCSSとは、ベースとなるスタイルを整理するために使うものの一つ。
ベースなのになぜリセットCSSと呼ぶかには、理由がある。
そもそも、CSSを用意しなくともある程度見た目が変わる部分がある。
例えば、h1タグを使うと文字が大きく、太字になる部分。
これはCSSを作らなくても、ブラウザ側でスタイリングしてくれているものだ。
厳密には、ブラウザ側でもCSSが用意されており、それが適用されている。
ところが、ブラウザによって元々設定されているスタイルは異なる部分がある。
それを気にせず書いてしまうと、自分が検証したブラウザでは上手く表示されるが、他のブラウザでは表示が崩れる、といった事態を招いてしまう。
こんなことを防ぐために、その設定をリセットする、という意味でのリセットCSSだ。
で、このリセットCSSについて、大きく二つの手法がある。
ハードリセットと、ノーマライズだ。
ハードリセット
ハードリセットはその名の通り、様々な設定を取り除くものだ。
例えば、各要素の余白を0にしたり、箇条書きの点を無くしたり、などなど。
ブラウザのデフォルトを一切無くし、完全に作り上げる場合にはこれが適しているだろう。
ノーマライズ
ノーマライズはハードリセットの後に新しく出てきた手法で、ブラウザによって異なる部分をうまく無くしつつ、その中で使えるものは残すという考え方で作られている。
ハードリセットと似てはいるが、完全に全て消えるわけではないのが異なる点だろうか。
リセットCSSを使う際の注意点
さて、今書いたようにリセットCSSには2種類ある。
これは必ず自分で組まなければいけないわけではなく、すでにやってくれるCSSが色々と公開されている。
実際にはそのどれを使うかという選択をし、必要であれば追加のベースとなる設定を行うことになるだろう。
このとき、重要な注意点があるのでそれを見ていこう。
開発コスト
まず一つ目、使うべきリセットCSSを間違うと、開発のコストが上がってしまう。
例えば、ブラウザに依らず一定のページを表示したいとしよう。
この時にノーマライズのリセットCSSを使うと、そこで残されている設定を打ち消す記述が必要になり、書く量が増えてしまうことがある。
具体的には、各タグに設定されているpaddingが残っていた場合、それを毎回消さなければいけない、という感じだ。
このあたりは難しい話で、中には常にノーマライズ系を使った方がいい、という意見もあるらしい。
そのため、それぞれの特徴を理解し、これから組みたい内容によってどちらを使うかしっかり考えておこう。
ちなみに、本シリーズでは特に断りがない限り、ハードリセット系を使うことにする。
具体的には、css-wipeというものがすでに公開されており、それを使わせてもらう。
その理由は、冒頭で紹介した参考書で使われていたから。
本来はこんな理由ではいけないのだが、今回は参考書の内容で具体例も解説することを想定しているので、それに合わせるためにこれを使う。
なお、参考書の内容が進むとノーマライズ系のものを使ったパターンも例として出てくるので、その時はどうするか改めて明記しよう。
二つの切り替え
ハードリセットとノーマライズは、設定している内容が異なる。
で、それらのいずれかを適用した状態が前提となり、実際にCSSを組んでいくことになる。
ということは、それを途中で切り替えたらどうなるか、想像に難しくないだろう。
例えば元々ノーマライズ系を使用していて、そこからハードリセット系に切り替えたとする。
すると、ノーマライズでは確保されていた各余白が、ハードリセットで全て消えてしまう。
つまり、文字通りページが崩壊してしまう。
もちろん、逆でも同じことが起こる可能性は非常に高いし、余白以外にも大きな影響が出てしまうだろう。
そのため、どちらにするかは考えて決めて欲しいが、それで書いたらそれ以降変えることはできないと思ってもらっていい。
英単語の結合方式
ここから後半、話はがらっと変わる。
通常のプログラミングにおいても、複数の英単語を組み合わせて名前をつける機会が多い。
例えば、何かを判定してその結果を真偽値で返す関数。
よく、それ自身が何かを判定する場合はisFooとか、何かを持っているか判定する場合はhasBarとかいう名前をつけると思う。
これらは、二つの単語を組み合わせているだろう。
ここでは、その組み合わせの時にどう書くか、という話をしよう。
例えば、メインタイトルを表す変数などの名前。
これには、大雑把に以下4種類くらいやり方があると思う。
main-title
ハイフンで単語を繋ぎ、それぞれの先頭は小文字main_title
アンダースコアで単語を繋ぎ、それぞれの先頭は小文字mainTitle
そのまま単語を繋ぎ、1単語目だけ先頭は小文字、2単語目以降の先頭は大文字MainTitle
そのまま単語を繋ぎ、それぞれの先頭は大文字
実は、このそれぞれの書き方に名前がついていることはご存じだろうか。
上から順に、ハイフンケース(ケバブケース)、スネークケース、ローワーキャメルケース(キャメルケース)、アッパーキャメルケース(パスカルケース)だ。
ちょっと具体例を書いてみると、私の場合Javaでは変数名や関数名はローワーキャメルケースを使い、クラス名はアッパーキャメルケースを使うことが多い、という感じ。
また、過去書いていたHTMLやCSS等の解説では、クラス名はハイフンケースを使っていた。
WordPress関数だと、これまで見たものは大体スネークケースだ。
今後、具体的なCSS設計手法の中でそれぞれの命名規則も解説する。
その時に、これらの用語を使って解説するので覚えておいて欲しい、というだけだ。
もちろん上にも書いた通りCSS設計に限らず一般的な話なので、知っておけば他の機会でも役立つ時はあるだろう。
おわりに
今回は、引き続き下準備としてリセットCSSと英単語の結合方式について解説した。
特に重要なのはリセットCSSで、そもそもCSSを書き始める前にこれを考える必要がある。
今組みたい内容を考えて、どちらのタイプを使うかをしっかり決めていこう。
さて、次回からようやく本題のCSS設計の話に入る。
まずは、このCSS設計で目指す4つのゴールと、それを達成するための基本的な8つの考え方をご紹介しよう。
具体的な手法はまだ出てこないが、前回書いた通りそれぞれの手法で共通する考え方はある。
その、大元の部分なので非常に重要なパートだ。
具体例も交えるので、それぞれが何を言っているかしっかり確認しながら進めていこう。
2021/3/12追記
次回の内容、CSS設計の4つのゴールと8つの考え方…の7つ目までを解説した。
大ボリュームの内容だが、ここが今後解説する具体的な設計手法の土台となる。
とりあえずはそれぞれの雰囲気を掴んでもらって、実際の手法でより定着させていこう。
コメント