以下が、内容になります。

1.【モジュールの教科書】

2.gulpのテンプレート、使い方

3.ポートフォリオの簡易テンプレート

4.Webサイトの制作実績課題（2つ）

内容についてそれぞれ詳細に補足します。

1.【モジュールの教科書】

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

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

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

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

対象の方

・モジュールが何かわからない

・サイト模写したけど自分ではまだ作り方がわからない

・progate、ドットインストール等を一通りやった

・各モジュールに必要なHTML要素、CSSスタイルを知らない

・LPや小規模サイトは作ったことあるけど10P以上のサイトを作ったことがない

・崩れないサイトを作りたい

・後々デザインが破たんしてしまう

・マージンを上につけるか下につけるか悩む

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

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

・命名ルール

・gulpなどのタスクランナー、scssなそのCSSプリプロセッサ

・プロパティ順番（普段gulpに任せてるので適当ですm(__)m）

・アニメーション

こちらについては触れませんのでご了承ください。

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

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

・約16000字

・画像15枚

・codepen29個

トレンドに踊らされることない不変的な内容になります。しかし、この内容を網羅的に解説してる書籍やネット情報には出会ったことがありません。

こちらの内容については見やすいように下記ページで解説していますので、読むためのパスワードをこのBrainに載せています。

https://hoshi-log.com/module/

2.gulpのテンプレート、使い方（おまけ1）

コーディングする上で今や必須のタスクランナーgulp。そのgulpの設定ファイルとディレクトリ構成、使い方をこのnoteで解説します。

このgulp設定ファイルでは以下のことができます。

・scss（cssを楽に書く記法）

・autoprefixer（ベンダープレフィックスの自動付与）

・sprite（複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる）

・csscomb（プロパティ順序の整列）

・imagemin（圧縮）

コーディングをする上でgulpはもはや手放せない存在です。

3.ポートフォリオの簡易テンプレート（おまけ2）

モジュールの概念に基づいたポートフォリオの簡易テンプレートを追加します。

先述の通りgulpのテンプレートと使い方、ポートフォリオの簡易テンプレートはこちらのnoteにのみ追加いたします。

ポートフォリオの簡易テンプレートは、ある程度のモジュールとフレームだけ用意するのでカスタム化してオリジナルに変えていただくことが可能です。

4.Webサイトの制作実績課題（おまけ3）

■課題1　コーポレートサイト　3P

PSDをアップしましたのでコーディングしてみましょう。ポートフォリオに載せることが目的となります。

内容としては3Pのコーポレートサイトです。

要素としては少な目ですが、もし物足りなさを感じた方は、レスポンシブデザインにしたり、コンテンツを増やしてみましょう。

■課題2　保育園　2P

こちらもPSDをアップしましたのでコーディングしてみましょう。同じくポートフォリオに載せることが目的となります。

内容としては2Pの保育園サイトです。

デザインが可愛らしいので女性は結構モチベーションあげて取り組めるかなと思いますが、男性もかわいい系のデザインをすることももちろんあるので練習としていい課題になってるかと思います。

こちらも可能な人はレスポンシブデザインやページ、コンテンツを増やしてみましょう。

転職に有利

正直転職には間違いなく有利になると思います。

これを読むことで以下のことが手に入ります。

・モジュールの概念がわかるため汎用性があるコーディングについて面接官にアピールができる

・モジュールの概念を使ってコーディングを組むことができる

・gulp使用してる会社に経験のアピールができる

・どう作ったらいいかわからないポートフォリオの完成

・ポートフォリオに入れる実務レベルの実績

モジュールの教科書の読者の声

「汎用性って具体的にどういうことか」が学べる良記事だと思いました。

こういう記事は、なかなか出会えない。

・inline-blockの横並びで親要素にfont-size:0

・隣接セレクタの使い方

が、刺さりました。

ありがとうございましたー。

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

じっくり読んでいきます

【モジュールの教科書】のパスワード↓