ホームページを触っていると、「追加CSS」という欄にコードを貼る場面が出てきます。制作会社から送られてきたものや、検索で見つけたものを、そのまま貼っている方は多いと思います。
困るのは、貼った後です。サイトの見た目が変わりすぎて、どこを戻せばいいか分からなくなります。
CSSは書けるようになる必要はありません。1行を読めるようになるだけで、貼る前に何が起きるか予想できます。今回は、その読み方をお伝えします。
1行を「どこに・何を・どうする」に分けます
こういう1行があるとします。
p { font-size: 16px; }
3つに分けます。
- どこに → p（段落）
- 何を → font-size（文字の大きさ）
- どうする → 16px（16ピクセルにする）
つなげると「段落の文字の大きさを16ピクセルにする」となります。これだけです。まずは基本のCSSを「どこに・何を・どうする」の3つに分けると、内容をつかみやすくなります。
名前の途中のスペースが、いちばんの落とし穴です
次の2つは、見た目が似ていますが意味が違います。
.article-body p .epb-balloon__text
上はスペースが1つ空いています。このスペースは区切りで、「article-bodyという箱の中にある段落だけ」という意味になります。箱の外にある段落、たとえばサイドバーの文章には効きません。
下はスペースがありません。こちらは1つの名前です。長いだけで、区切れてはいません。「epbの中のballoonの中のtext」と読んでしまうと、実際には1つしかない箱を3つあると数えることになります。
今回の2つを見分けるときは、スペースがあるかどうかを確認します。
max-widthは「以下」です
スマホだけに効かせる指定には、こういう書き方が出てきます。
@media screen and (max-width: 600px) { ... }
max という言葉が入っているので「600ピクセル以上」と読みたくなりますが、逆です。maxは上限なので、「600ピクセルまで」つまり600ピクセル以下のときに効きます。
実際の数字で確かめると迷いません。iPhoneの画面幅はおよそ390ピクセル、パソコンは1280ピクセルほどです。600ピクセル以下に当てはまるのは390ピクセルのほうです。
つまりこれは、ブラウザの表示幅が600ピクセル以下のときに効く指定です。スマホ向けの調整によく使われますが、端末の種類を判定しているわけではありません。パソコンでもウインドウを狭くすれば当てはまります。
反対の min-width: 600px は、表示幅が600ピクセル以上のときに効きます。なお、ちょうど600ピクセルのときは両方が当てはまります。
!importantは、増やすと直しにくくなります
たまに、行の最後にこう書いてあるものがあります。
margin-top: 0 !important;
!important が付いた指定は、ほかの何よりも優先されます。効かないときの最終手段として使われます。
問題は、後から直すときです。!important が付いた指定は、通常の指定では上書きできません。別の !important を使えば上書きできる場合もありますが、そうすると今度は !important 同士でどちらが勝つかという話になり、優先順位が複雑になります。1か所なら追えますが、10か所20か所と増えると、どの行が今の見た目を決めているのか分からなくなります。
便利だから使うのではなく、ほかの方法を試しても効かないときだけ使います。
まとめ
- CSSの1行は「どこに・どんな項目を・どうする」の3つに分けて読みます
- 名前の途中のスペースは区切りです。あれば「箱の中だけ」、なければ1つの名前です
- max-width は表示幅が以下のとき、min-width は以上のときに効きます
- !important は最優先ですが、増やすと後から直しにくくなります
読めるようになると、コードを貼る前に「これは何が変わるのか」を自分で確かめられます。おかしくなったときも、原因になりそうな行を探しやすくなります。
自分のホームページを自分の手で直せる状態を作りたい方に向けて、skymotherではホームページ養成講座をご用意しています。パソコンの操作から一緒に進めます。
▼ ホームページ養成講座
https://www.kigyo-skymother.site/homepage-lesson/
https://www.kigyo-skymother.site/homepage-lesson/