CSSとは何か 役割と書き方の基礎

CSSはHTMLで組み立てた骨組みに色や余白やレイアウトなどのデザインを与えるための言語です。HTMLが構造CSSが見た目という役割分担をすることでコードの見通しが良くなり保守もしやすくなります。背景色を変えたり文字サイズや行間を調整したりレスポンシブレイアウトを実現したりとデザイン面で重要な役割を担っています。

CSSの基本構文

CSSはセレクタとプロパティと値の組み合わせで構成されます。セレクタはどの要素にスタイルを適用するかを示しプロパティは変更したい項目値は具体的な設定内容です。例えばpに文字色を指定する場合はpをセレクタにcolorプロパティで色を指定します。

See the Pen CSSとは？役割と書き方の基礎 by Syo Yanai (@h1-tech-japan) on CodePen.

スタイルが反映されない時の確認

CSSが効かない時はセレクタの書き間違いや優先順位の問題や読み込みパスの不備が原因のことが多いです。まずは綴りと対象の指定が合っているかを確認し次に後ろで上書きしているスタイルがないかを確認します。基本的な仕組みを理解しておくとエラーにも冷静に対処できるようになります。