【HTML&CSS モジュールの教科書・ポートフォリオテンプレ・サイト課題】Web転職完全セット

このnoteは以下を載せています。

1.【モジュールの教科書】パスワード
2.gulpのテンプレート、使い方
3.ポートフォリオの簡易テンプレート
4.Webサイトの制作実績課題（2つ）

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

下記ページのパスワードをこのnoteに載せています。

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

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

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

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

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

対象の方

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

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

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

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

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

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

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

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

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

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

・scss（cssを楽に書く記法）
・autoprefixer（ベンダープレフィックスの自動付与）
・sprite（複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる）
・csscomb（プロパティ順序の整列）
・imagemin（圧縮）

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

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

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

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

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

4.Webサイトの制作実績課題

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

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

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

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

■課題2　保育園　2P

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

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

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

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

転職に有利

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

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

・モジュールの概念がわかるため汎用性があるコーディングについて面接官にアピールができる
・モジュールの概念を使ってコーディングを組むことができる
・gulp使用してる会社に経験のアピールができる
・どう作ったらいいかわからないポートフォリオの完成
・ポートフォリオに入れる実務レベルの実績

モジュールの教科書のアンケート・声

【アンケートお願いします！】
モジュールの教科書閲覧ありがとうございました。
閲覧者100人程で現在アクセスが240だったのでリピートしてくれてる方がいてくれて嬉しい限りです。一回だけでなく何か作るときにまた見ていただければと思います。

↓加筆や次回の為の参考にさせてください。

— hoshi@フロントエンドフリーランス (@funclur_01) September 14, 2019

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

こういう記事は、なかなか出会えない。 https://t.co/HjgmUsMz28

— 黒Tくん@コーダー (@kuro_tttttttttt) September 13, 2019

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

— Takeshi Suzaki (@_KillBurN) September 14, 2019

最近コーダーのアルバイトを始めたため、HTML &CSSの勉強をしっかりしたいと思い購入しました！
じっくり読んでいきます💪@funclur_01
【HTML&CSS モジュールの教科書】汎用的なモジュールの概念・作り方｜hoshi｜note（ノート） https://t.co/4ZaXPghW5s

— seno@フロントエンジニア (@seno_web) September 25, 2019

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