【HTML&CSS モジュール作成の教科書】

このnoteは以下のnoteを小売りにしたものです。

https://note.com/hoshilog/n/n4629dc1c23a3

内容は同じものになりますのでご了承ください。

------------------------------------

普段自分が意識している汎用性・運用性のあるhtml、cssのモジュール設計について解説します。

内容は昨今の無料学習サービスや書籍では学べないような即実践に繋がるモジュールの教科書となっています。

多くの教材ではモジュールの概念について触れられてません。そのため、モジュールって何？って方も多いと思います。

自分自身、本やネットで学んだわけではなく、会社で学ぶことができました。勉強と実務では大きな差があると言われていますが、この記事ではその差を少しでも埋めることを目的として書いていきます。

対象の方

・モジュールが何かわからない
・サイト模写したけど自分ではまだ作り方がわからない
・progate、ドットインストール等を一通りやった
・各モジュールに必要なHTML要素、CSSスタイルを知らない
・LPや小規模サイトは作ったことあるけど10P以上のサイトを作ったことがない
・崩れないサイトを作りたい

という方は、参考にしていただけると思います。

対象範囲ではないのは下記です。

・命名ルール
・gulpなどのタスクランナー、scssなそのCSSプリプロセッサ
・プロパティ順番（普段gulpに任せてるので適当ですm(__)m）
・アニメーション
こちらについては触れませんのでご了承ください。

またこの記事を読むうえでＰＣで実際にコードを書きながら参照いただけるとただ読むより何倍も身につくと思います。クイズ形式にもなってるので是非考え、コードを書きながら読み進めてください。

--------------------------------------------

内容量としては以下のようになっています。

・約16000字
・画像15枚
・codepen29個

読者の声

黒Tくん HTML/CSS/JS/...
@kuro_tttttttttt
「汎用性って具体的にどういうことか」が学べる良記事だと思いました。
こういう記事は、なかなか出会えない。

Takeshi Suzaki
@_KillBurN
・inline-blockの横並びで親要素にfont-size:0
・隣接セレクタの使い方
が、刺さりました。
ありがとうございましたー。

最近コーダーのアルバイトを始めたため、HTML &CSSの勉強をしっかりしたいと思い購入しました！
じっくり読んでいきます💪