CSSとはWebサイトの「内装作業」です
ども。Dadです。
HTMLでWebサイトの骨組みを作ったあと、「文字の色を変えたい」「レイアウトを整えたい」と思ったことはありませんか？そんな時に活躍するのが「CSS」です。
今回は、CSSの定義や進化、そして代表的なスタイル例まで、Webサイトの見た目を作る基本をわかりやすく解説します。
関連記事
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLで作成されたWebサイトの見た目や装飾を担う言語です。「スタイルシート」とも呼ばれます。
DIYに例えるなら、HTMLが「家の柱や壁」を作る作業だとしたら、CSSは「壁紙を貼ったり、カーテンを選んだり、家具を配置したりする内装作業」にあたります。
主な役割は以下の3点です。
- 文字の装飾
色、フォント、サイズ、太さなどを指定します。 - レイアウトの調整
要素の配置、余白、幅、高さなどを設定します。 - 背景や装飾の追加
背景色、画像、枠線、影などを追加して、デザインを豊かにします。
CSSの進化：直書きから外部ファイルへ
昔の小規模なWebサイトでは、HTMLファイル内（ページ内）に直接CSSを書く「直書き」がよく使われていました。しかし、これには問題がありました。
- 更新が煩雑で大変
各ページにスタイルを書くため、更新時に全ページを修正する必要がありました。 - 読み込み速度が遅くなる
ページごとにいちいちスタイルを記述するため、ファイルサイズが大きくなりがちでした。 - ページごとに解読が必要
スタイルが散らばっているため、管理が複雑でした。
これらの問題を解決するため、現在ではCSSを別ファイルにまとめて記述し、各ページから読み込む方法が一般的です。これにより、一箇所を修正するだけで全ページの色やフォントを変更できたり、指定の個所だけをピンポイントで変更する等、効率的な管理が可能になりました。
class（クラス）の使い方
CSSをHTMLに適用する際、「クラス」という仕組みを使います。クラス名は任意でつけることができます。
例えば、以下のように使います。
HTML側
<p class="text-green">この文字は緑色でフォントサイズは18pxです。</p>
CSS側
.text-green {
}
このように、HTMLタグに class="クラス名" を付け、CSS側で .クラス名 と指定することで、スタイルを適用できます。
代表的なCSSスタイル例
よく使われる代表的なCSSスタイルを紹介します。
| プロパティ | 説明 | CSS例 |
|---|---|---|
| font-size （文字サイズ） |
文字の大きさを指定します。 | font-size: 16px; |
| color （文字色） |
文字の色を指定します。 | color: #333333; |
| background-color （背景色） |
要素の背景色を設定します。 | background-color: #f0f0f0; |
| margin （外側の余白） |
要素の外側の余白を設定します。 | margin: 20px; |
| padding （内側の余白） |
要素の内側の余白を設定します。 | padding: 10px; |
| border （枠線） |
要素の枠線を設定します。 | border: 1px solid #cccccc; |
まとめ
CSSはWebサイトの「見た目」を作る言語で、HTMLとセットで使われます。
最初は基本的なスタイルから始めて、少しずつ慣れていきましょう。外部ファイルで管理する方法を覚えれば、効率的にサイトを運営できます。
ではまた。
