CSS（Cascading Style Sheets）は、Webページのデザインやレイアウトを指定するためのスタイルシート言語です。
HTMLで記述した構造に対し、文字の色や背景、余白、配置などの見た目を指定することができます。
目次
CSSとは？その役割と基本的な仕組み
CSSの役割
CSSは、Webページのデザインをコントロールするための言語です。
HTMLで構築した骨組みに「装飾」を施し、ユーザーにとって魅力的で使いやすいページを作成します。
CSSでできることの例
- 背景色や文字色の設定。
- フォントサイズやスタイルの変更。
- 余白や配置の調整。
- ボタンのホバーエフェクトなどのインタラクションを追加。
CSSの基本的な使い方
CSSは主に以下の3つの方法でHTMLに適用されます。
インラインCSS
HTMLタグ内に直接CSSを記述する方法です。
簡単なスタイルを適用するのに適しています。
<p style="color: blue; font-size: 16px;">青色のテキストです。</p>内部CSS（スタイル要素）
HTMLファイル内の<style>タグを使用してCSSを記述します。
ページ全体のスタイルを管理する場合に使用します。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>緑色のテキストです。</p>
</body>
</html>外部CSS
CSSを別ファイル（拡張子は.css）に記述し、HTMLからリンクする方法です。
複数ページのスタイルを一括管理できるため、一般的な手法です。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>赤色のテキストです。</p>
</body>
</html>
p {
color: red;
font-size: 20px;
}CSSの主なプロパティと使用例
色や背景を設定するプロパティ
body {
background-color: #f0f0f0; /* 背景色 */
color: #333; /* テキストの色 */
}文字のスタイルを変更するプロパティ
h1 {
font-size: 24px; /* フォントサイズ */
font-weight: bold; /* 太字 */
font-family: Arial, sans-serif; /* フォントの種類 */
}レイアウトを調整するプロパティ
div {
margin: 20px; /* 外側の余白 */
padding: 10px; /* 内側の余白 */
border: 1px solid #000; /* 枠線 */
}インタラクションを追加するプロパティ
button:hover {
background-color: #007BFF; /* ホバー時の背景色 */
color: white; /* ホバー時の文字色 */
}CSSの活用例
以下は、簡単なWebページにCSSを適用する例です。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>ようこそ！</h1>
</header>
<section>
<p>これはCSSのサンプルです。</p>
<button>クリックしてね</button>
</section>
</body>
</html>body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #007BFF;
color: white;
text-align: center;
padding: 20px;
}
button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}CSSの発展的な活用
メディアクエリを使用したレスポンシブデザイン
画面サイズに応じてレイアウトを変えるレスポンシブデザインに対応できます。
@media (max-width: 768px) {
body {
font-size: 14px;
}
}アニメーションの追加
CSSのみで簡単なアニメーションが実現可能です。
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div {
animation: fadeIn 2s;
}まとめ
CSSは、Webページを魅力的に仕上げるために欠かせない技術です。
基礎を理解すれば、ページの見た目を自由にカスタマイズでき、ユーザーにとって魅力的な体験を提供できます。
学習の際は、シンプルなプロジェクトから始めて、少しずつプロパティやレイアウトの知識を深めていきましょう！
