index.html
HTMLを記述するファイルです。
このファイルに書かれたものが実際にブラウザに表示されます。
style.css
style.cssは、htmlファイルでこのファイルを読み込むことでスタイルを適用させます。
style.cssファイルを直接編集するのではなく、sassコマンドを実行することでstyle.cssファイルを作成・更新します。
sassコマンドについては、課題を始める前に説明するので、ここでは気にせずに進みましょう。
stylesheetsフォルダ
stylesheetsフォルダは、すべてのscssファイルを管理するフォルダです。
scssファイルを追加する場合は、styelsheetsフォルダ内に作成しましょう。
style.scss
このファイルですべてのscssファイルを@importで読み込むことで、一つのsassファイルに統合します。
以下は@importを使用してscssファイルを読み込む例です。
ダウンロードしたプロジェクト内のstyle.scssに以下の記述を追加する必要はありません。
_reset.scss
ブラウザによって初めからcssがそれぞれのhtmlに設定されています。
そのCSSによって、意図しないデザインになってしまうことがあります。
そのようなことを防ぐために、初めにブラウザごとのCSSをすべてリセットします。
このようにブラウザごとのCSSを打ち消すCSSのことをリセットCSSといいます。
有名なリセットファイルは以下のようなものがあります。
- YUI 3
- Eric Meyer’s
- HTML5 Doctor
- normalize.css
configフォルダ
configフォルダは、プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダです。
mixinフォルダ
mixinフォルダは、scss内で使用するmixinファイルを管理するフォルダです。
modulesフォルダ
modulesフォルダはモジュールを管理するためのフォルダです。
モジュールとは、いくつかの要素をまとめた部品の集合という意味です。
ヘッダー、フッターのような用途ごとに分けることができます。
モジュールを使うことでまとまったCSSを独立したものとして管理することができます。
vendorフォルダ
vendorフォルダは、ライブラリのファイルを管理するフォルダです。
cssにはライブラリと呼ばれるものがあります。
ライブラリとはあらかじめCSSが書かれたファイルです。
有名なCSSのライブラリでは、bootstrapがあげられます。
ライブラリを効率よく利用することで、コーディングのスピードが格段に上がります。
overrideフォルダ
overrideフォルダは、vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダです。