言語としてCSSが重視されるポイントが異なる話
何も言わずにこのビデオを見ればわかると思う。
左側がコードで、右側がアウトプットである。
Draw @MoSalah using CSS@CodePen : https://t.co/fRgozh8Xwu pic.twitter.com/ekQCvSYJ7y
— Asyraf Hussin (@asyrafhussin4) May 13, 2022
CSSとは何か？
CSSはスタイルシート言語であり、HTML や XML (方言である SVG、MathML、XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。
超ざっくり言えば、HTMLに色や形状に関する指定をする指定書である。
これに記載すればHTMLの特定のタグなどに形付けや色付けを行うことができる。（そもそも絵を書くものではない…）
私はこのCSSについての変態性が大好きである。
変態性って？
プログラミングを行う場合、通常コードは理解しやすく管理しやすいものが望まれる。
1行で無理やり終わらせるのはご法度とされている。
Pythonなどでは頑張れば1行で複雑なアルゴリズムを記載できる。
プログラミングの美学
有名なFizzBuzzの問題というものがある。
これは3の倍数のときFizz、5の倍数のときBuzzで15の倍数の場合にFizzBuzzと出力するものであるが、これも1行で表現することも可能だ。
','.join([ 'FizzBuzz' if not(i%15)
else 'Fizz' if not(i%3)
else 'Buzz' if not(i%5)
else str(i)
for i in range(1,a+1)
])1行で表現されると確認がしづらく、管理がしづらい…
なので、短い文で無理やり行うことはご法度であり、単純にロジックで書くことが美学である。
CSSの美学
下記は私が炭治郎模様をCSSで再現したときの記事である。
この記事を見るとわかるが、単純な繰り返しの図面を再現するために下記のようなことを行っている。
1.グラデーションを斜めに配置して、四角形の隅だけ色を変える
2.この四角形をずらしてもう一つ表示する。
3.この図を重ねて繰り返す。
この3段階で作成すると炭治郎柄が再現することができるのである。
このコードでわかるように、CSSでは確認がしやすく読みやすいコードはそこまで重視されない。
それよりもCSSでは短いコードで複数の表現を再現することが良いとされる場合があるのである！
※常にそれが優先されるわけではないのでご注意ください。
何が言いたいの？
CSSに「こういうところが大好きだよ」って言いたかっただけです。
この記事が気に入ったらサポートをしてみませんか？