変数を定義する(作成済み)

ファイル名、ディレクトリ構造

src
 └ components
   └ _variables.scss
   └ utilities.scss

やること

1. 実際に html と scss を描き始める前に、ひとつ前のページで書いてあったように、この課題で使用するカラーやテキストを変数で管理しましょう。
書き方はひとつ前のページを参考にしてください。
Figma のプロジェクトをクリックして右サイドバーを見てみましょう。

text style	color style

これらが実装に使うカラーやテキストのリストです。
この情報を元に_variables.scssに、定義をしていきましょう。

• 1.1 色の定義
  定義したいカラーをホバーすると調節アイコンが表示されます。
  そのアイコンをクリックして現れるウィンドウを見てみましょう。
  下の画像の枠線で囲われた部分を見てみましょう。 カラー名、カラーコードなどが表示されています。
  Desicriptionと書いてある部分には注意事項などが記載される場合があります。
  カラー名をそのまま変数名に使いましょう。
• 1.2 文字サイズの定義
  カラーと同じように定義したいテキストをホバーすると調節アイコンが表示されます。
  そのアイコンをクリックして現れるウィンドウを見てみましょう。
  下の画像の枠線で囲われた部分に文字に関する情報(サイズ,フォント名などなど)が載っています。
  このように情報を見て文字を定義しましょう。
  XS,S などの名前をそのまま変数名に使いましょう。
  
• 1.3 文字の種類の定義
  Figma で定義されているように、フォントはRobotoとNoto Serif JPとNoto Sans JPを使います。
  Google Font から３種類のフォントをとってきて、$fontfamily-minchoと$fontfamily-gothicという変数で呼び出せるようにしてください。
  また、ロードしてから Google Font が読み込まれるまでのわずかの時間でも明朝体かゴシック体別でフォントを表示しておきたいです。したがって、デフォルトで OS に入っているフォントを定義しておくようにしてください。
• 1.4 ブレークポイントの定義
  これは Bootstrap で用いられている値を使います。Bootstrap の課題を思い出して定義してください。

2. これから作成するサイトはたいていゴシック体で書かれています。そのため、utilities.scssで、ページ全体のfont-familyがゴシック体になるようなコードを描きましょう。このとき、先程定義したfontfamily-gothicを使うようにしましょう。