CSSは「スタイルシート」と呼ばれ、まさにウェブサイトの「スタイル」を決めるもの。
HTMLを身体とするならCSSはファッションや髪型。
自由度が高くオリジナリティのあるwebデザインができるようになるCSSとは何なのか基礎知識をまとめました。
CSSとHTMLの関係
HTMLはWebページの土台となる骨組みのようなもので、もしCSSを使わずHTMLだけでもウェブサイトは作れますが、文字や画像を羅列しただけの教科書のような単調なサイトになってしまいます。
CSSは、HTMLで設定した骨組みを装飾したり、レイアウトを変更したり、動きをつけたりしながらウェブサイトをより読みやすく、より使いやすくしたり、世界観を演出したりできます。
CSSでできること
CSSを使えば、文字単位や要素単位でデザインが細かく決められます。
- 文字の色を変える
- 文字の大きさを変える
- 要素の配置場所を変える
- アニメーションを表示させる
CSSを使うメリット
- デザイン・表現の自由度が高い
- 軽くて読み込みが早い
- 更新が簡単
- カスタマイズしやすい
CSSを書く場所（読み込ませる方法）
CSSはファッションのようなものなので、ボディとなるHTMLと結びつける必要があります。
CSSとHTMLを結び付けてサイトのデザインとして表示させる方法は３つあります。
- CSSファイルを別途作成して読み込む：複数のHTMLファイルに同時に反映
- styleタグを作り書き込む：HTMLファイルごとに反映
- htmlの属性であるstyle属性を使って直接HTMLタグ内に書く方法：1つの要素ごとに反映
ほとんどのウェブ制作では、CSSファイルを別途作成してheadタグで読み込む方法を使います。（効率がいいからね！）