CSS

一言で言うと

Webページの「見た目」を整える言語。色、フォント、レイアウトなど、デザインを担当する。

もう少し詳しく

CSSは「Cascading Style Sheets」の略で、HTMLで作った骨格に「見た目」を加える言語です。HTMLが家の「間取り」なら、CSSは「内装・インテリア」です。壁の色を変えたり、家具の配置を決めたり、照明を工夫したりするのがCSSの役割です。

CSSでは「どの要素に」「どんなスタイルを」適用するかを指定します。たとえば「見出しの色を青にする」「本文のフォントサイズを16pxにする」「画像を中央揃えにする」といった具合です。

最近のWebデザインでは、画面サイズに応じてレイアウトを変える「レスポンシブデザイン」や、アニメーション効果もCSSで実現できます。

実務でどう使うか

コードで見てみよう

/* 見出しのスタイル */
h1 {
  color: #333333;           /* 文字色 */
  font-size: 24px;          /* 文字サイズ */
  border-bottom: 2px solid #007A5A; /* 下線 */
}
/* ボタンのスタイル */
.button {
  background-color: #007A5A; /* 背景色 */
  color: white;              /* 文字色 */
  padding: 12px 24px;        /* 内側の余白 */
  border-radius: 8px;        /* 角を丸くする */
}