CODEPREP | HTMLとCSS3でつくるお天気パネルのメモです。

---

天気アイコンを作る

• Weather Iconsを使う

  • Font Awesomeにインスパイアされて作成された、天気専門のアイコンフォント

Flexアイテムの幅を調整する

• flex-growプロパティを使う
• flex-growは、FlexアイテムのFlex伸長係数(Flexコンテナー内の利用可能な空間のうち、どれだけがそのアイテムに割り当てられるか)を指定できる
• flex-grow - CSS: カスケーディングスタイルシート | MDN

背景をグラデーションにする

• 背景に線形グラデーションを指定するにはlinear-gradient関数を使う

• 書式は、 linear-gradient(グラデーションの方向, 最初の色, 最後の色)

  • グラデーションの方向は、toキーワードに続けてグラデーションの終点を指定する (e.g. 左から右なら、 to right)