【HTML&CSS モジュールの教科書】汎用的なモジュールの概念・作り方


キャプチャ253

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

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


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

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

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

参考のために冒頭を引用させていただきます。


以下引用--------------------------------------------

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

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

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

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

対象の方

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


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

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

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

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

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

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

・約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の保育園サイトです。

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

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


5.特典←NEW

■メンターします

購入者には無料でメンターしますので、購入してもし
・ここがわからない
・課題が思うように進まない
・全体的なアドバイス
・レビュー
・集中できる環境が欲しい

などがあれば、DMください。

https://twitter.com/funclur_01

転職に有利

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

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

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


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



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

この続きをみるには

この続き:3,285文字

【HTML&CSS モジュールの教科書】汎用的なモジュールの概念・作り方

hoshi

1,000円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

9

hoshi

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。