目次
特定の要素に適用
h1要素-サンプルタイトル
p要素-これはサンプルの段落です。ここにテキストが入ります。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を適用させる</title>
<style>
h1 {
padding: 10px; /* 要素内のテキストと境界線の間に 10px の余白を設定 */
color: #ffffff; /* テキストの色を白に設定 */
text-align: center; /* テキストを中央揃えにする */
background: #55abff; /* 背景色を 青系の色 (#55abff) に設定 */
}
p {
padding: 10px; /* 要素内のテキストと境界線の間に 10px の余白を設定 */
font-size: 16px; /* フォントサイズを 16px に設定 */
text-align: center; /* テキストを中央揃えにする */
color: #666666; /* テキストの色を濃い灰色に設定 */
border: dotted 3px #c0e0fc; /* 境界線を点線で表示し、幅は 3px、色は薄い青系の色 (#c0e0fc) に設定 */
}
</style>
</head>
<body>
<h1>h1要素-サンプルタイトル</h1>
<p>p要素-これはサンプルの段落です。ここにテキストが入ります。</p>
</body>
</html>複数の要素に適用
h1要素-サンプルタイトル
p要素-これはサンプルの段落です。ここにテキストが入ります。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を適用させる</title>
<style>
h1, p {
padding: 10px; /* 要素内のテキストと境界線の間に 10px の余白を設定 */
font-size: 16px; /* フォントサイズを 16px に設定 */
text-align: center; /* テキストを中央揃えにする */
color: #666666; /* テキストの色を濃い灰色に設定 */
border: dotted 3px #c0e0fc; /* 境界線を点線で表示し、幅は 3px、色は薄い青系の色 (#c0e0fc) に設定 */
}
</style>
</head>
<body>
<h1>h1要素-サンプルタイトル</h1>
<p>p要素-これはサンプルの段落です。ここにテキストが入ります。</p>
</body>
</html>すべての要素に適用
h1要素-サンプルタイトル
h2要素-サンプルタイトル
h3要素-サンプルタイトル
h4要素-サンプルタイトル
h5要素-サンプルタイトル
h6要素-サンプルタイトル
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を適用させる</title>
<style>
* {
padding: 10px; /* 要素内のテキストと境界線の間に 10px の余白を設定 */
font-size: 16px; /* フォントサイズを 16px に設定 */
text-align: center; /* テキストを中央揃えにする */
color: #666666; /* テキストの色を濃い灰色に設定 */
border: dotted 3px #c0e0fc; /* 境界線を点線で表示し、幅は 3px、色は薄い青系の色 (#c0e0fc) に設定 */
}
</style>
</head>
<body>
<h1>h1要素-サンプルタイトル</h1>
<h2>h2要素-サンプルタイトル</h2>
<h3>h3要素-サンプルタイトル</h3>
<h4>h4要素-サンプルタイトル</h4>
<h5>h5要素-サンプルタイトル</h5>
<h6>h6要素-サンプルタイトル</h6>
</body>
</html>idやclassを指定した要素に適用
id と class は、HTML 要素にスタイルや JavaScript を適用するための識別子です。それぞれの違いと用途を以下に説明します。
id
- id は、HTML ページ内で一意である必要があります。つまり、1つのページ内で同じ id を持つ要素は1つだけです。
- id は、特定の要素に対してスタイルを適用する際や JavaScript で特定の要素を操作する際に使用されます。
- id は、CSS で
#で始まるセレクタを使用して選択できます。例：#special { color: red; } - id の具体例：
<div id="header">ヘッダー</div>
class
- class は、複数の HTML 要素に同じスタイルを適用するために使用されます。1つの要素は複数のクラスを持つことができます。
- class は、同じスタイルを適用するグループを作成し、コードの再利用性を高めることができます。
- class は、CSS で
.で始まるセレクタを使用して選択できます。例：.highlight { background-color: yellow; } - class の具体例：
<p class="highlight">ハイライトされたテキスト</p>
要約すると、id は特定の要素を対象にする一意の識別子であり、class は複数の要素に同じスタイルを適用するための識別子です。どちらも、HTML 要素に対してスタイルを適用する方法や JavaScript の対象として利用できます。
この要素は[id=”special]と指定しています
この要素は[class=”highlight”]と指定しています
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を適用させる</title>
<style>
p {
padding: 10px;
font-size: 16px;
text-align: center;
color: #666666;
margin-bottom: 10px;
}
/* id */
#special {
font-size: 24px;
font-weight: bold;
color: #ff0000;
}
/* class */
.highlight {
background-color: #ffff00;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<p id="special">この要素は[id="special]と指定しています</p>
<p class="highlight">この要素は[class="highlight"]と指定しています</p>
</body>
</html>リンク部分に適用
要素名:link{ }：通常のリンク
要素名:visited{ }：訪問済みのリンク
要素名:hover{ }：マウスオーバー時のリンク
要素名:active{ }：アクティブなリンク（クリックされている瞬間）
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンクの状態に応じたスタイル</title>
<style>
/* 通常のリンク */
a:link {
color: blue;
text-decoration: none;
}
/* 訪問済みのリンク */
a:visited {
color: purple;
}
/* マウスオーバー時のリンク */
a:hover {
color: red;
text-decoration: underline;
}
/* アクティブなリンク（クリックされている瞬間） */
a:active {
color: green;
}
</style>
</head>
<body>
<p><a href="#">サンプルリンク</a></p>
</body>
</html>
1行目に適用
これはサンプルの段落です。
最初の行だけ特別なスタイルが適用されています。
それ以降の行は通常のスタイルが適用されます。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>p:first-line のスタイル</title>
<style>
p {
font-size: 16px;
color: #666666;
}
p:first-line {
font-size: 24px;
font-weight: bold;
color: #333333;
}
</style>
</head>
<body>
<p>これはサンプルの段落です。<br>最初の行だけ特別なスタイルが適用されています。<br>それ以降の行は通常のスタイルが適用されます。</p>
</body>
</html>
1文字目に適用
これはサンプルの段落です。最初の文字だけ特別なスタイルが適用されています。それ以降の文字は通常のスタイルが適用されます。