初心者向けCSSの書き方ガイド：基本から始めよう
CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを決定するためのスタイルシート言語です。初心者がCSSを学ぶ際の第一歩として、この記事では基本的なCSSの書き方について詳しく解説します。
目次
1. CSSとは？
CSSはHTMLと組み合わせて使用され、ウェブページの見た目を制御します。HTMLがウェブページの構造を定義するのに対し、CSSはそのスタイルやデザインを担当します。例えば、文字の色やフォントサイズ、レイアウトなどを指定できます。
2. CSSの基本構造
CSSの基本構造は以下のようになります。
セレクタ {
プロパティ: 値;
}
例えば、段落（p）要素の文字色を青にする場合は次のように書きます。
p {
color: blue;
}
3. CSSの書き方
3.1 インラインスタイル
インラインスタイルは、HTMLタグ内に直接スタイルを記述する方法です。小規模なスタイル変更に適しています。
<p style="color: blue;">この段落は青色です。</p>
3.2 内部スタイルシート
内部スタイルシートは、HTMLファイル内の
セクションにスタイルを記述する方法です。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>この段落は青色です。</p>
</body>
</html>
3.3 外部スタイルシート
外部スタイルシートは、CSSを別ファイルに記述し、それをHTMLファイルにリンクする方法です。大規模なサイトや複数のページで同じスタイルを適用する場合に便利です。
CSSファイル（styles.css）を作成：
p {
color: blue;
}
HTMLファイルにリンク：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>この段落は青色です。</p>
</body>
</html>
4. CSSの基本プロパティ
CSSには多くのプロパティがありますが、ここでは初心者向けに代表的なものを紹介します。
color：文字色を指定します。
background-color：背景色を指定します。
font-size：文字サイズを指定します。
margin：要素の外側の余白を指定します。
padding：要素の内側の余白を指定します。
border：要素の枠線を指定します。
5. CSSの実践例
実際にCSSを使って、簡単なウェブページをデザインしてみましょう。以下の例では、段落の文字色を青にし、背景色を薄いグレーに設定します。
CSSファイル（styles.css）を作成：
p {
color: blue;
background-color: lightgray;
padding: 10px;
border: 1px solid black;
}
HTMLファイルにリンク：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>この段落は青色で、背景は薄いグレーです。</p>
</body>
</html>
6. まとめ
CSSはウェブデザインの基本です。インラインスタイル、内部スタイルシート、外部スタイルシートの使い分けを学び、基本プロパティを理解することで、簡単なウェブページをデザインすることができます。初心者の方は、まず基本をしっかりと押さえ、少しずつ応用的な技術に挑戦していきましょう。
Groworks Inc.
ものづくりのまち燕三条にある三条ものづくり学校を拠点とし、新潟市、長岡市、燕市、柏崎市を中心に活動しているウェブサイト・ホームページ制作会社です。
