CSSに正解はひとつじゃない！かも。

こんにちは。かずです。

今年ももう9月になりました。AIの進化スピードより早い気がします。

それはさておき、あいも変わらずAIにコーディングをしてもらっています。さすがに全部とはいきませんが・・・

HTMLやCSS、JSやPHPまでもお願いすると、すぐにそれっぽいコードを出してくれますよね。
昔なら自分で考えていたような部分までAIがやってくれるので、かなり便利です。
ただ、AIが出してくれたCSSを見ていると、「これでもいいけど、自分ならこうするかな」と思うことが多々。

CSSって、同じ見た目を作るだけなら、書き方がひとつとは限らないんですよね。
今回は、そんなCSSの面白さについて書いてみます。

同じ見た目でも書き方は様々

例えば、要素を横に並べたいとします。

flexを使うこともできますし、gridを使うこともできます。
余白だって、marginでもgapでも作れます。
なんならpaddingでも無理やり作れます。

どれを使っても、見た目だけなら同じようにできることがあり、AIにお願いすると、その中からひとつの方法を選んでコードを書いてくれます。
もちろん、それで問題ないことも多いです。

でも、実際は表示できればOKではありません。

先方の希望によって、このあと要素が増えるかもしれない。
スマホでは並び方が変わるかもしれないし、タブレットでの表示の仕方も考える必要があります。
それらを考えると、同じ見た目でも選びたいCSSが変わってきます。

間違っているわけではない

ここは結構大事なところです。

AIが書いたCSSが間違っているという話ではありません。

ちゃんと動いているし、見た目も合っている。
それでも、自分なら別の書き方を選ぶことが割とよくあります。

例えば、要素同士の間隔を指定するだけなら、marginでもgapでも実現できます。
以前の記事でも書きましたが、自分は要素同士の間隔ならもっぱらgapを使っています。

これはgapのほうが絶対に正しいという話ではなくて、自分がそのほうが後から見たときに分かりやすいと感じているからです。
こういうところに、コーディングする人の考え方が出るのが面白いなと思います。

そのサイトに合っているか

CSSを書くときには、「これが正解かな？」と考えるより、「このサイトならどれが扱いやすいかな？」と考えています。

例えば、要素数が決まっているデザインなら、その前提で組んでも問題ないかもしれません。
当たり前ですが、WordPressの記事一覧のように、投稿数が増えたり減ったりするのであれば、要素数が変わっても崩れない書き方を選びますよね。
あとは投稿でなくとも、施設紹介の写真があれば、これは今後増えるよねとか。

見た目が同じでも、運用まで考えると選択肢が変わってきます。
だからCSSには、これが絶対の正解というものがあまりありません。

任せるからこそ、責任もある

AIにコードを書いてもらうようになって、自分でCSSを書く時間は減りました。
その代わり、出てきたコードを見る時間は増えています。
自分で書かない分、むしろ大幅に増えましたね。

全部を自分で書いていた頃は、コードを書くことそのものに時間を使っていました。
今はAIがそこをやってくれるので、どのコードを採用するか考える時間が増えたのかもしれません。

もちろん、こういう判断までAIに任せられるようになれば、この作業も減っていくんでしょうけどね。

最後に

CSSは、同じ見た目を作る方法がいくつもあります。
だからこそ、「なぜこの書き方にしたのか」が自分の中で分かっていて、かつガイドラインやルールにのっとっていれば、後から修正するときにも困りにくい。

AIにコードを書いてもらう場合も同じです。
出てきたコードをそのまま使うのではなく、「なぜこの書き方なんだろう」と一度考えてみましょう。
逆にAIのほうが汎用性高く便利なものを書いてくれるかもしれません。

CSSに正解はひとつじゃない。
だからこそ、自分で考えて書く余地がまだまだあって面白いなと感じます。

それでは！