HTML・CSS部 上級

部活トップ画像

「スマホファースト」という言葉がIT業界では浸透しているほど「スマートフォン用サイト」の存在はユーザーにとって必要不可欠なものになりました!そのスマホページを簡単に作れてしまう今主流のレスポンシブデザインを使ってスマホ対応ページを作っていきます!また、CSSフレームワークの「BootStrap」やCSSプリプロセッサの「SASS」といったものも使いながら、実務で欠かせないCSS設計の「OOCSS」「BEM」「SMACSS」「FLOCSS」についても触れていきます!

この部活で作るもの

まだ投稿されていません

HTML・CSS部 上級の練習メニュー

Lesson01|レスポンシブデザインのサイトを作ろう!〜開発環境の説明〜

レスポンシブデザインを作る前にSASSの使い方とSASSをコンパイルする環境をjsのパッケージ管理ツール「Yarn」を使って開発環境を構築していきましょう!

Lesson02|レスポンシブデザインのサイトを作ろう!〜SASSを使ってヘッダー・ヒーローバナー作成〜

まずは、PCページから!SASSを使ってヘッダーやヒーローバナーを作っていきましょう!

Lesson03|レスポンシブデザインのサイトを作ろう!〜SASSを使ったその他パーツの作り方〜

PC用ページのその他セクションを作ってきます!要素を横並びにしていく方法として従来のfloatを使った方法とCSS3から主流になってきているFlexboxを使った方法を両方やってみましょう!

Lesson04|レスポンシブデザインのサイトを作ろう!〜SASSの@mixinでメディアクエリを作る〜

SASSの機能の1つ「mixin」はプログラミングでいうところの「関数」を作れるものです!mixinを使えばメディアクエリも簡単に書くことが出来てしまいます!

Lesson05|レスポンシブデザインのサイトを作ろう!〜SASSを使ってスマホページ完成!!〜

とうとうスマホページの完成です!TODOと書かれた箇所を最後にリファクタしていきましょう!「修正しやすいコード」を心がけていきましょうね!

Lesson06|レスポンシブデザインのサイトを作ろう!〜Bootstrapの使い方〜

CSSフレームワークとして一番有名なのが「BootStrap」です!簡単にデザインやレイアウトが作れる反面で、実際の大きな現場では不都合が多いため、小規模な現場でしか使われないのが実情なんです。それでも、「ちょちょっと新規サービス作りたい」って時にはとても便利!

Lesson07|レスポンシブデザインのサイトを作ろう!〜Bootstrapのグリッドデザイン〜

BootStrapは「コンポーネント」という部品が簡単に作れてしまうのもメリットですが、レスポンシブデザインを作るために便利な「グリッドデザインシステム」がCSSフレームワークとして人気になった一番の理由でしょう!

Lesson08|レスポンシブデザインのサイトを作ろう!〜Bootstrapの注意点〜

Bootstrapで最後にページを作り直してお終い!グリッドデザインは便利な反面でこんな注意点が!?

Lesson09|CSS設計ってなに?

CSSなんて書けて当たり前!実務では「後々のことを考えたコードが書けるか?」がとても重要です。そのために「CSS設計」というものを学びましょう!

Lesson10|CSS設計〜CSS設計の元祖!OOCSS〜

BootStrapでも採用されているOOCSSについて学びましょう! OOCSSはCSS設計ルールの中でも一番シンプルなルールです。

Lesson11|CSS設計〜厳格なclass名の命名ルールが特徴的なBEM〜

OOCSSはほとんどが「書き方」を分けたルールでしたが、BEMはさらにclass名など「命名ルール」を厳格に決めたものです!

Lesson12|CSS設計〜ルールを5種類にカテゴライズしたSMACSS〜

SMACSSは「書き方」を細かく5つのカテゴリに分けた考え方です!

Lesson13|CSS設計〜ディレクトリルールまで決めたFLOCSS〜

FLOCSSはBEMとSMACSSのいいとこ取りという感じ!ディレクトリの分け方までルールが決められています!大規模な現場で続々と採用されているCSS設計です!