CSS初心者のためのガイド：基礎から実践まで
こんにちは！今回はWEB制作の基礎となるCSSについて、初心者の方にも分かりやすく解説していきます。HTMLの構造に「装飾」を加えるCSSは、ウェブサイト制作において欠かせない技術です。
CSSとは何か
CSSとは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLで作成した要素の「見た目」を指定するための言語です。
HTMLがウェブページの「構造」を担当するのに対し、CSSは「デザイン」を担当します。文字の大きさや色、背景、余白など、ページの見た目に関わるほぼすべての要素をCSSで制御できます。
「カスケーディング」という言葉は、複数のスタイル指定がある場合に、どのスタイルが優先されるかを決める仕組みを表しています。
セレクタとプロパティ
CSSは大きく分けて「セレクタ」と「プロパティ」で構成されています。
セレクタ
セレクタとは、「どの要素にスタイルを適用するか」を指定する部分です。
color: blue;
}
この例では、h1がセレクタです。これにより、ページ内のすべてのh1要素に対してスタイルが適用されます。
主なセレクタの種類：
- 要素セレクタ:
h1,p,divなど、HTML要素を直接指定 - クラスセレクタ:
.classNameのように、ドットから始まり、同じクラス名を持つ要素を指定 - IDセレクタ:
#idNameのように、シャープから始まり、特定のID属性を持つ要素を指定 - 子孫セレクタ:
div pのように、特定の要素内に含まれる要素を指定
プロパティ
プロパティとは、「どのようなスタイルを適用するか」を指定する部分です。
color: blue;
font-size: 24px;
margin-bottom: 10px;
}
この例では、color, font-size, margin-bottomがプロパティです。それぞれに値が指定されています。
よく使われるプロパティには以下のようなものがあります：
- color: 文字色
- background-color: 背景色
- font-size: 文字サイズ
- margin: 外側の余白
- padding: 内側の余白
- width/height: 幅と高さ
- display: 表示方法（ブロック要素、インライン要素など）
ボックスモデル
CSSにおける「ボックスモデル」は、ウェブページのレイアウトを理解する上で非常に重要な概念です。
すべてのHTML要素は「ボックス」として扱われ、以下の部分から構成されています：
- コンテンツ（Content）: テキストや画像など、実際に表示される内容
- パディング（Padding）: コンテンツの周りの内部余白
- ボーダー（Border）: パディングの外側にある枠線
- マージン（Margin）: ボーダーの外側にある外部余白
これはボックスモデルの例です。
この要素には、パディング、ボーダー、マージンが設定されています。
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
上記のCSSでは、実際に表示される要素の全体の幅は、300px（コンテンツ） + 40px（パディング：左右各20px） + 10px（ボーダー：左右各5px） = 350pxとなります。
ただし、box-sizing: border-box;を指定すると、指定した幅と高さにパディングとボーダーが含まれるようになります。これにより、レイアウトの設計が容易になることが多いです。
box-sizing: border-box;
}
実践：HTMLページにスタイルを適用する
では、実際にHTMLページにCSSを適用してみましょう。
1. CSSの適用方法
CSSをHTMLに適用する方法は、主に3つあります：
インラインスタイル
HTML要素に直接style属性を使って指定する方法です。
内部スタイルシート
HTML文書の<head>内に<style>タグを使用して指定する方法です。
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
外部スタイルシート（推奨）
別ファイル（.css）にCSSを記述し、HTMLから読み込む方法です。これが最も推奨される方法です。
<link rel="stylesheet" href="styles.css">
</head>
2. 実践例
以下は、シンプルなHTMLページとそれにCSSを適用する例です。
HTML（index.html）
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS練習ページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>CSSの基礎を学ぼう</h1>
<nav>
<ul>
<li><a href="#about">CSSとは</a></li>
<li><a href="#selector">セレクタ</a></li>
<li><a href="#box-model">ボックスモデル</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="content-section">
<h2>CSSとは</h2>
<p>CSSはウェブページのデザインを担当する言語です。</p>
</section>
<section id="selector" class="content-section">
<h2>セレクタとプロパティ</h2>
<p>セレクタはスタイルを適用する要素を指定し、プロパティはどのようなスタイルを適用するかを決めます。</p>
</section>
<section id="box-model" class="content-section">
<h2>ボックスモデル</h2>
<p>すべてのHTML要素はボックスとして扱われ、コンテンツ、パディング、ボーダー、マージンから構成されています。</p>
<div class="box-example">
これはボックスモデルの例です。
</div>
</section>
</main>
<footer>
<p>© 2025 CSS入門ブログ</p>
</footer>
</body>
</html>
CSS（styles.css）
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* ヘッダー部分 */
header {
background-color: #35424a;
color: white;
padding: 20px;
border-bottom: 3px solid #e8491d;
}
header h1 {
font-size: 2rem;
margin-bottom: 15px;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #e8491d;
}
/* メインコンテンツ */
main {
margin: 30px 0;
}
.content-section {
background-color: white;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #35424a;
margin-bottom: 15px;
font-size: 1.5rem;
}
p {
margin-bottom: 15px;
}
/* ボックスモデルの例 */
.box-example {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #e8491d;
margin: 20px 0;
background-color: #f4f4f4;
}
/* フッター部分 */
footer {
text-align: center;
padding: 20px;
background-color: #35424a;
color: white;
}
上記のコードでは、シンプルながらも見やすいウェブページが作成できます。ヘッダー、メインコンテンツ、フッターの各部分にCSSが適用され、ボックスモデルの実例も含まれています。
まとめ
CSSの基本は以下の点に集約されます：
- CSSはウェブページのデザインを担当する
- セレクタで要素を選び、プロパティでスタイルを指定する
- すべての要素はボックスモデルに従って表示される
- 外部スタイルシートを使うことで、HTMLとデザインを分離できる
CSSはとても奥が深く、この記事で紹介した基礎を理解した後も、フレックスボックス、グリッドレイアウト、レスポンシブデザインなど、学ぶべきことはたくさんあります。
しかし、ここで紹介した基礎さえしっかりと理解できれば、あとは実践しながら少しずつスキルを積み重ねていくことができます。
ぜひ、自分でHTMLとCSSを書いて、色々と試してみてください！
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
#WEB制作 #WEBデザイン #HTML #コーディング #学習