HTML・CSS部 上級
この部活で作るもの
まだ投稿されていません
HTML・CSS部 上級の練習メニュー
レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます！
無料で受講してみる次の練習へ進む ボタンで解除
Lesson 01｜レスポンシブデザインのサイトを作ろう！〜開発環境の説明〜
レスポンシブデザインを作る前にSASSの使い方とSASSをコンパイルする環境をjsのパッケージ管理ツール「Yarn」を使って開発環境を構築していきましょう！
次の練習へ進む ボタンで解除
Lesson 02｜レスポンシブデザインのサイトを作ろう！〜SASSを使ってヘッダー・ヒーローバナー作成〜
まずは、PCページから！SASSを使ってヘッダーやヒーローバナーを作っていきましょう！
次の練習へ進む ボタンで解除
Lesson 03｜レスポンシブデザインのサイトを作ろう！〜SASSを使ったその他パーツの作り方〜
PC用ページのその他セクションを作ってきます！要素を横並びにしていく方法として従来のfloatを使った方法とCSS3から主流になってきているFlexboxを使った方法を両方やってみましょう！
次の練習へ進む ボタンで解除
Lesson 04｜レスポンシブデザインのサイトを作ろう！〜SASSの@mixinでメディアクエリを作る〜
SASSの機能の１つ「mixin」はプログラミングでいうところの「関数」を作れるものです！mixinを使えばメディアクエリも簡単に書くことが出来てしまいます！
次の練習へ進む ボタンで解除
Lesson 05｜レスポンシブデザインのサイトを作ろう！〜SASSを使ってスマホページ完成!!〜
とうとうスマホページの完成です！TODOと書かれた箇所を最後にリファクタしていきましょう！「修正しやすいコード」を心がけていきましょうね！
次の練習へ進む ボタンで解除
Lesson 06｜レスポンシブデザインのサイトを作ろう！〜Bootstrapの使い方〜
CSSフレームワークとして一番有名なのが「BootStrap」です！簡単にデザインやレイアウトが作れる反面で、実際の大きな現場では不都合が多いため、小規模な現場でしか使われないのが実情なんです。それでも、「ちょちょっと新規サービス作りたい」って時にはとても便利！
次の練習へ進む ボタンで解除
Lesson 07｜レスポンシブデザインのサイトを作ろう！〜Bootstrapのグリッドデザイン〜
BootStrapは「コンポーネント」という部品が簡単に作れてしまうのもメリットですが、レスポンシブデザインを作るために便利な「グリッドデザインシステム」がCSSフレームワークとして人気になった一番の理由でしょう！
次の練習へ進む ボタンで解除
Lesson 08｜レスポンシブデザインのサイトを作ろう！〜Bootstrapの注意点〜
Bootstrapで最後にページを作り直してお終い！グリッドデザインは便利な反面でこんな注意点が！？
次の練習へ進む ボタンで解除
Lesson 09｜CSS設計ってなに？
CSSなんて書けて当たり前！実務では「後々のことを考えたコードが書けるか？」がとても重要です。そのために「CSS設計」というものを学びましょう！
次の練習へ進む ボタンで解除
Lesson 10｜CSS設計〜CSS設計の元祖！OOCSS〜
BootStrapでも採用されているOOCSSについて学びましょう！ OOCSSはCSS設計ルールの中でも一番シンプルなルールです。
次の練習へ進む ボタンで解除
Lesson 11｜CSS設計〜厳格なclass名の命名ルールが特徴的なBEM〜
OOCSSはほとんどが「書き方」を分けたルールでしたが、BEMはさらにclass名など「命名ルール」を厳格に決めたものです！
次の練習へ進む ボタンで解除
Lesson 12｜CSS設計〜ルールを5種類にカテゴライズしたSMACSS〜
SMACSSは「書き方」を細かく５つのカテゴリに分けた考え方です！
次の練習へ進む ボタンで解除
Lesson 13｜CSS設計〜ディレクトリルールまで決めたFLOCSS〜
FLOCSSはBEMとSMACSSのいいとこ取りという感じ！ディレクトリの分け方までルールが決められています！大規模な現場で続々と採用されているCSS設計です！
次の練習へ進む ボタンで解除
番外編：FLOCSSのl-やp-やc-の見分け方
初心者のうちは「どれをProjectにすればいいのか、どれをComponentにすればいいか」迷うことでしょう。そういった時の考え方をご紹介します。
次の練習へ進む ボタンで解除
コーヒーブレイク「はたらくプログラミング 第9話」
「スマホファースト」という言葉がIT業界では浸透しているほど「スマートフォン用サイト」の存在はユーザーにとって必要不可欠なものになりました！そのスマホページを簡単に作れてしまう今主流のレスポンシブデザインを使ってスマホ対応ページを作っていきます！また、CSSフレームワークの「BootStrap」やCSSプリプロセッサの「SASS」といったものも使いながら、実務で欠かせないCSS設計の「OOCSS」「BEM」「SMACSS」「FLOCSS」についても触れていきます！