0100-html-css

HTML/CSS(BEM, Sass) 課題

デモ: https://version1-workspace.github.io/ws-01-0100-fe-materials/0100-html-css/index.html

HTML, CSS(SASS), BEMとレスポンシブコーディングを勉強するためのリポジトリです。 上記デモサイトをみながらなるべく同じサイトができるようにコーディングをして下さい。

課題で身に着けること

• 変更に強いCSS設計（BEM)
• CSSのモジュール化
• レスポンシブデザイン
• sass記法
• sassの変数定義、mixinの使い方
• セマンティックな命名

課題の進め方

1. ドキュメント/記事を読んで必要な知識を理解する

BEMについて

参照:

• 脱ビギナーのためのCSS入門
• BEM

公式ドキュメント:

https://getbem.com/

フレックスボックス

• もう迷わない！CSS Flexboxの使い方を徹底解説

レスポンシブデザインについて

• レスポンシブデザインとは 実装のメリット・デメリット、作り方について解説
• レスポンシブデザインに必要不可欠なブレイクポイントとメディアクエリとは？

Sassについて

• sass公式
• SASS
• Dart Sass

npmについて

• 便利なパッケージ管理ツール！npmとは【初心者向け】
• 【初心者向け】NPMとpackage.jsonを概念的に理解する
• そろそろ適当に npm install するのを卒業する
• NPM

1. ファイルの中身を確認して課題を開始

課題は下記のコマンドで開始することができますが、Sass のコンパイルの手順を詳しく知りたい方は下記のチュートリアルを終わらせてから課題を始めてください。

npm install
npm run compile // sassの変更を検知してコンパイルするnodeサーバを起動

※ node のバージョンは 20 以上であることを推奨しています。

nodeサーバが起動している間は、sassの変更が自動で反映されるようになっています。

いきなり全てをやろうとすると処理が難しくなるので、自分で理解できる範囲まで作業を分割してコーディングを進めてください。 作業を分割してどうしても実装できない、長時間詰まってしまう部分は後回しにしてできるところからやるようにしてください。

2. github pagesにてサイトを公開

作業が終わったら変更をコミット& push してリモートリポジトリ に変更を反映させます。 masterへの変更が終わったら下記手順でサイトをgithub ページ上に公開してください。

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

注意点

VSCodeのプラグインについて

この課題ではVSCodeのプラグインでのSassのコンパイルは必要ありません。 Live Sass Compilerなどを入れている方はプラグインの機能をOFFにして課題に取り組むようお願いします。

Google Fontについて

無料で使えるフォントファイルライブラリのGoogleFontもデフォルトで読み込む様な設定をしています。 フォント指定する場合は、 stylesheets/sass/shared/_global.sass の %font を extend 指定してください。

画像について

実装の際に使用する画像は assets/ フォルダに全て格納されています。 HTML 内で適当なパスを指定して課題を進めて下さい。