フェス！篠野です。（挨拶）
今日はプログラミングの話だよ。
と言っても、ちょっと話を進めたら、
”それはプログラミングとは言わねーよ！ボーイズ”が現れると思うので、
先に断っておく。
そうよ。プログラミングの話じゃないよ。
ちなみに、
”それはプログラミングとは言わねーよ！ボーイズ”については、
皆さん各々のバックストリートボーイズを思い浮かべておいてください。
「プログラミングの話じゃないプログラミングの話をするって、どんな話をするの？」
フフッ、いい質問だね。
今日話をするのは、”CSS”についてだよ。
皆さん、CSSって知ってますか？
知っている人は、飛ばさずに読んでください。
知らない方にもわかるようにこれから説明しますので。
it' a true wolrd.
秩序がない？それ誉め言葉ね。
皆様、インターネットというものはご存じですか？
では、ウェブページというものはご存じですか？
インターネットで開く、”それ”全てです。
で、簡単に言うと、CSSっていうのは、ウェブページのスタイルを設定するための言語です。
言語？は？という方もいらっしゃるかと思います。
このインターネットというのは、全て”パソコン語”で書かれています。
英語とかスペイン語とか、そういう感覚でいいです。
パソコンが動くのは、私たちの入力（命令）が、パソコン語に変換されて、パソコンがそれを実行するからです。
で、ウェブサイトって見たことありますよね。
そのウェブサイトの「スタイル」を司る言語が、CSSです。
スタイルって何？という質問に対しては、割愛させていただきます。
スタイルっていうのは、例えば文字を太字にしたいとか、
フォントを変えたいとか、背景の色を変更したいとか、
そういう外見のことです。
割愛の意味、知ってる？
で、ちょっと話を掘り下げると、
ウェブページを構成するための言語として、
HTMLっていうのがあります。
簡単に言うなら、人がウェブサイトで目にする文字とかの部分を書くときの言語です。
で、このHTMLとCSSが組み合わさることで、
世の中のオシャレなウェブサイトができている、という仕組みです。
実際にはもっといろんな言語が関わっているんだけど、ここは本当に割愛します。
このHTMLに、化粧をしてあげるのが、CSS。そういうイメージをしてください。
さらに掘り下げると、
例えばウェブサイトで
「ここの画像を大きく拡大したい！」
とか、
「ここは自己紹介をするブロックで、文字を大きくしたい！」
とか、
「この文字だけ赤文字にしたい！」
とか、
CSSで細かく設定ができるんですよ。
これをクラスとかidとか言うんですけど、
要は、HTML（骨組み）に対して
はい、ここは自己紹介ブロックね。
って名付け（クラス名を付ける）して、
CSSで、
このクラス（自己紹介ブロック）のフォントは太字だぜ！
って書いてあげる。そういう感じ。
で、これ、言語を書く上でいろんなルールがあるんだけど、
ルールだけじゃなくて、ブロック（本当は要素という）とブロックの
相互関係が成り立ったうえで発揮するスタイルっていうのもあるんですよ。
例えば画像の上の真ん中に文字を置きたいとか、そういうやつね。
で、そういう相互関係もCSSに書くんだけど、
さっき言った、クラスとかidって、自分で自由に、無限に付け加えることができるんですよ。
これが脆弱性に繋がるんです。
って言ってもわからない人にはわからないんですけど。
じゃあ、具体的にパターンを2つ紹介しますね。
ここからはウェブページを想像してみてみてください。
パターン①
--自己紹介ブロック（クラス名：自己紹介ブロック）--
自己紹介をする本文がここにくるよ！
--------------------------------------------------------------
--画像載せるブロック（クラス名：画像載せブロック）--
（画像載せるよ！）
----------------------------------------------------------------
で、これに対してのCSSがあるわけです。
自己紹介ブロックというクラスの設定
→フォントを太字にする
→背景を赤色にする
画像載せブロックというクラスの設定
→画像を小さくする
→画面の中央に置く
こう書くことでウェブページのデザインが設定できます。
パターン①の書き方も正解。
はたまた、パターン②です。これも正解です。
仕上がり（サイトのデザイン）は同じです。
パターン②
--自己紹介ブロック（クラス名：フォント太、背景赤）--
自己紹介をする本文がここにくるよ！
--------------------------------------------------------------
--画像載せるブロック（クラス名：画像小さく、中央に置く）--
（画像載せるよ！）
----------------------------------------------------------------
で、CSS。
フォント太というクラスの設定
→フォントを太字にする
背景赤というクラスの設定
→背景を赤色にする
画像小さくというクラスの設定
→画像を小さくする
中央に置くというクラスの設定
→画面の中央に置く
これでも、①と同じ結果になるんです。
分かりますかね…。
要は、ブロックごとにスタイルも設定できるし、
個別に細かく設定もできるんです。
じゃあどっちかにすればいいじゃん！と思うかもしれませんが、
先ほど述べたように、
画像の上の真ん中に文字、みたいな、要素ごとの相互関係が必要なときがあるので、
どっちも書くしかないんですよね。
で、難しくなるのが、
この線引きです。
CSSは、書き方が本当に自由だからこそ、
大きく括って書くこともできるし、
細かく書くこともできるからこそ、
設定が細かくなりすぎたり、おおざっぱになりすぎたりしてしまうんです。
さっきのパターンで言うと、自己紹介ブロックに画像を小さく載せたいときはどうする？
っていう話です。
これをやっていくと、管理がどんどん難しくなるんです。
時が経って、コーディング（書いた内容のこと）もすっかり忘れたときにちょっとデザイン替えたいな、って思って見返す時に、
え、相互関係どうなってんの…
となり、デザインがぐちゃぐちゃになってしまうリスクが大きいんです。
これが、CSSの脆弱性です。
全く知らない人にも伝わるように書いたつもりなんだけど、どうでしょうか。
だから、色んな人が、CSSを書くときに独自にルールを作って、
後でみんなでメンテナンスしやすいように書こう！という風潮があるんですけど、
有名なルールだとしても、完璧に網羅できるものは存在しなくて、
寧ろCSSというものがそこはかとなく恐ろしく感じます。
自由というのは、怖いです。
というのが、この記事の導入です。
ここから、楽になりますよ。ありがとう。（？）
タイトルにある通りだけど、
人生みたいだね、ってことです。
CSSの中は、いわゆるでっかい箱庭だとして、
その箱庭には二羽にわとりがいるわけじゃないけど、
その箱庭には、なーんもないの。
で、ハイどうぞ！って放たれた気分。
身に余る自由。
何をしてもイイと言われると、何をしようかな、という考えになりますよね。
例えばここにある漫画全部読んでいいよ。って言われて、
読んだ順番に読んだ本用の本棚にしまっていくと、
ぜーんぶ読み終わった後、
あ、ハンターハンターの20巻読みたいな、ってなったときに
見失ってしまうじゃないですか。
いや、知らんけど。
もっと言うなれば、自分以外の人が、
金色のガッシュの15巻とこち亀の50巻を読みたい！
ってなったときに、読めたとしても
ガッシュの15巻とこち亀の50巻が違うところに仕舞われてしまう可能性だってあるわけ。
わかりにくいけど、そういう事。
なにをしてもいい、って一見魅力的だけど、
ルールで縛った方が、結果的にワンピースがどの棚にあるのか分かりやすいよね、って話です。
身に余る自由は、結局破綻しやすいんですよね。そういうこと。
CSSも、法整備がされていない国も、無法地帯になって
いつか、収拾がつかなくなっちゃいがち。
なんだか、人生みたいだね。
なんだか、愛の理想みたいだね。（アポロ100号が飛び立つ音）
最強のCSS設計、編み出したいものです。
でも、無限を制限するのは不可能なんだよなあ。
おしまい。
