CSSが難しい理由

最近、HTMLとCSSを再び学び始めたのだが、やはり難しい。

「初心者にオススメ」とか言われているはずなのに、なぜ？

pythonを一通り覚えいくつかライブラリも使いこなせるようになったし、JavaScriptも今はほとんど忘れているが過去に勉強したことがあるのだが、それらより難しく感じる。

pythonやJavaScriptの時は、エラーを読んだり、コードを少しずつ修正しながら実験を重ねていくことで、何が間違っているのかを突き止めることができた。仮説と検証を重ねて理解していくことができた。

もちろん、HTMLやCSSもそうやってスキルを身に着けていく部分はあるだろうが、何というか、やりづらい。

もうパソコンの方がおかしいんじゃないかと思う程である。ブラウザ側の不具合なんじゃないかと。
やっとのことで思い通りにできたと思ったら、ブラウザ幅を変化させたとたんに、めちゃくちゃに崩れてしまうこともある。

今日も模写コーディングをしていたのだが、「謎の隙間」がどうしてもできてしまって困っていた。その隙間一つを何とか埋めるのにまず１時間かかり、理屈を理解するのに追加で３時間かかった（もしかしたら、真に理解していない可能性もある）。最近早寝早起きを実践していたのに。

CSSが難しいのは、たぶんルールが多すぎるのが原因ではないかと思う。
プロパティがたくさんあるというのもあるし、どの場合には適用されないとか、コレとコレが組み合わさったときは相殺されるとか、親要素と子要素の関係とか、とにかく知らないルールが多すぎる。
margin、padding、object-fit、flexbox、float、justify-content、position、block、inline-block、vertical-align、align-items、width、%、px、vw、fit-content、auto…
何か一つを変えただけで、全く予想しない動きになる。
予想では変化するはずなのに、一切変化が起こらないこともある。

赤に青を混ぜたら、紫色になる。
黄に紫を混ぜたら、茶色になる。
でも、黒に白をいくら混ぜても、変化がない。おかしい。
「あ、実は黒は単体でしか使えなくて、色を混ぜられない仕様になっているんですよ～」
いや、知らんがなそんなルール！

CSSってこんな感じ。

プロパティについて基本的な使い方を調べただけでは、ルールを理解することができないことも多い。「marginは外側の隙間の大きさを指定します」という単純な話ではない。こういうケースではどうなるとか、こういう時は使えないとか、細かいルールがたくさんあるのだ。
それを知らずに、「margin=外側の隙間」という感覚しか持っていないと、思い通りのコーディングができない。

ネットで調べようにも、何が原因でどのようにおかしいのか分からないから、検索しようがない。せいぜい「margin 効かない」という検索ワードしか思いつかない。結局、marginが原因ではなかったという結末もある。

とはいえ、毎日コーディングを練習していると、扱いにも少しずつ慣れてくる。細かいルールを一つ一つ覚えていくから、予想が当たることが多くなってきた。予想通りにならなくても、仮説を立て検証することも前よりはできてきた。

分からなかったり難しかったりしたら、もちろん調べたり考えたりすることも大事だが、どうしてもわからなかったら諦めることも大事かもしれない。
いじっていればそのうち理解できるときが来る。