ハッシュタグは#sa_study

1. 第７回アルカナ勉強会
ハッシュタグは#sa_study ♪

2. はじめに
ひっそりと公開したはずが、
なぜか広がったこれ。。
今回は、これに沿った内容で
議論を含めて進めていこうと
思います！

3. 内容（ざっくりと）
この前、水野大先生がCSS設計(OOCSS、BEM、
FLOCSS)について熱く熱く語っておりました。
今回は、もっと手前の浅〜いけど深〜い内容でやりたい
と思います。

4. 雑談
「HTMLとかCSSとかそんなに学ぶ必要なくねwww」
「もっと高度なプログラム書きたいしwww」
悲しい(T ^ T)(T ^ T)(T ^ T)(T ^ T)(T ^ T)

5. どうしてもHTMLとCSSってつまらなくて簡単だと思わ
れる。
「安易に形にできる＝＝敷居が低い＝＝面白くない」
って感じを脱却したい。。。

6. HTMLは「べき論」の世界
Hyper Text Markup Language
ハイパーテキストマークアップランゲージ
HTMLはその名の通り、WEB上の文書を記述するための
マークアップ言語です。
HTMLファイルが1つの論文であり、そこに論文の構成を
HTML要素で宣言してテキストをあてはめていくのです
。

7. つまり、本や論文といったものを知らなければ綺麗な
HTMLは書けません。
見出し、内容、補足、記事と記事の関係...etcを想像しな
がら構成となる要素を並べていきます。
この作業は個々のプロジェクトによる解釈の違いがある
ため、HTMLの要素を美しい論文をつくるように並べる
ことは個人の「べき論」による差異が生れ易いのです。

8. ちなみに
HTMLを「論文」と比喩したのは、SEOの観点からでも
あります。
細かい話は割愛（実は知らない）しますが、検索順位を
あげるための手法としてよく「外部リンクを貼る」とい
う行為がありました。
これは「素晴らしい論文」というものはどういうものか
を考えたときに「多くの人に引用されているものが素晴
らしい」という考えからくるものです。
そのためHTMLを論文として比喩しました。

9. CSSは命名との戦い
スコープの存在しないグローバル空間なCSSでは命名が
、めちゃめちゃ大切になってきます。
命名の大切さは「理解しやすいコード」を意識したこと
がある方でしたらわかるかと思います。
命名って、get、find、add、push、put、removeなどな
ど理解しやすくするために考えるのすごく大変ですよね
。。。。

10. はい！！でもでも
CSSでは1つの小規模サイトでも100以上の命名を
被らないように付与しなければいけません。
これがCSSが闇深いと言われている一番の理由になりま
す。闇深く罪深い。。。

11. HTMLとCSSとデザイン
HTMLとCSSにデザインというスパイスがさらに濃い闇
をつくるんです！苦笑
PCサイズとモバイルサイズで、カラム落ちするようなデ
ザインならまだしも、レスポンシブで配置まで動きまく
るデザインの場合は苦しむしかありません。
HTML構造も崩れ、CSSもよくわからない多さになって
きます。。。

12. 雑談おわり
HTMLとCSSのことを好きになっていただけましたか？
？
もっと好きになりたい方はぜひW3Cのドキュメントを読
んでみてください！