CSSとは?
CSS(Cascading Style Sheets)は、HTMLで作成したWebページの見た目(デザインやレイアウト)を指定するための言語です。 文字の色やサイズ、背景色、余白、レイアウトの調整など、Webページを美しく整えるために使用します。
CSSの基本的な使い方
CSSを適用するには3つの方法があります。
1. インラインスタイル
HTML要素に直接スタイルを指定する方法です。
<p style="color: red; font-size: 20px;">これは赤い文字の段落です。</p>
メリット: 簡単に使える。 デメリット: スタイルが分散して管理しづらい。
2. 内部スタイルシート
HTML文書の<head>
内に<style>
タグで記述する方法です。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>これは青い文字の段落です。</p>
</body>
</html>
メリット: HTMLファイル内でスタイルをまとめて記述可能。 デメリット: 他のHTMLファイルには適用できない。
3. 外部スタイルシート
CSSを別ファイルに分けて管理する方法です。
HTMLファイル(例: index.html
)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>これは外部スタイルシートでスタイルを適用しています。</p>
</body>
</html>
CSSファイル(例: styles.css
)
p {
color: green;
font-size: 16px;
}
メリット: 複数のHTMLファイルで同じCSSを使える。管理が簡単。 デメリット: HTMLとCSSファイルを分ける必要がある。
CSSの基本構文
CSSは以下のような構文を持っています。
セレクタ {
プロパティ: 値;
}
例
h1 {
color: red; /* 文字色を赤に設定 */
font-size: 24px; /* フォントサイズを24pxに設定 */
}
各部分の説明
セレクタ: スタイルを適用したいHTML要素(例:
h1
)。プロパティ: 変更したい属性(例:
color
やfont-size
)。値: プロパティに設定する値(例:
red
や24px
)。
よく使うCSSプロパティ
文字関連
color: blue; /* 文字の色 */
font-size: 20px; /* 文字のサイズ */
font-family: Arial, sans-serif; /* フォントの種類 */
font-weight: bold; /* 太字 */
text-align: center; /* テキストの中央揃え */
背景関連
background-color: lightgray; /* 背景色 */
background-image: url('background.jpg'); /* 背景画像 */
余白関連
margin: 20px; /* 外側の余白 */
padding: 10px; /* 内側の余白 */
ボーダー(枠線)
border: 2px solid black; /* 枠線の太さ、種類、色 */
border-radius: 10px; /* 枠線の角を丸くする */
CSSのセレクタ
セレクタは、どの要素にスタイルを適用するかを指定します。
1. タグセレクタ
HTMLタグ全体に適用します。
p {
color: green;
}
2. クラスセレクタ
特定の要素に適用します。クラス名は.
で指定します。
<p class="important">これは重要な段落です。</p>
.important {
font-weight: bold;
color: red;
}
3. IDセレクタ
特定の1つの要素に適用します。ID名は#
で指定します。
<p id="highlight">これはハイライトされた段落です。</p>
#highlight {
background-color: yellow;
}
簡単なサンプル
以下のHTMLとCSSを使って、簡単なスタイル付きWebページを作ってみましょう。
HTMLファイル(index.html
)
index.html
)<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSSの基本</title>
</head>
<body>
<h1>CSSでスタイルを学ぼう!</h1>
<p class="highlight">この段落はハイライトされています。</p>
<p>普通の段落ももちろん表示できます。</p>
</body>
</html>
CSSファイル(styles.css
)
styles.css
)body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
padding: 20px;
}
h1 {
color: blue;
text-align: center;
}
.highlight {
color: white;
background-color: orange;
padding: 10px;
border-radius: 5px;
}
次に進むには?
CSSを学んだら、次は以下を学ぶとWebページ作成がさらに楽しくなります。
レスポンシブデザイン: スマホやタブレットでも見やすいページを作る方法。
CSSアニメーション: 動きのあるデザインを作る方法。
CSSを使って、あなたのWebページを魅力的にデザインしてみましょう! 😊
最終更新
役に立ちましたか?