文字 Font の 色を指定する

投稿日時: 投稿者:

文字 Font の 色を指定する

文字Fontの色を指定する

文字 Font の色を指定する時は、「color」プロパティを指定します。

色の指定は、bodyに対して行い文書全体に指定もできますし、個別に指定することも出来ます。

文字 Font の色を指定する例

例をいくつか載せておきます。

bodyに対して行い文書全体に指定

全体に赤の文字色を指定します。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<style>
body {
    color: #ff0000;
}
</style>
</head>
<body>
これはFontの色指定のテストです。（赤指定）
</body>
</html>

h1タグの文字色をこげ茶色に指定

こげ茶の色を#662323にしました。
色は「原色大辞典」さんで調べると、指定する色値を簡単に取得できます。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
body {
    color: #ff0000;
}
h1 {
    color: #662323;
}
</style>
</head>
<body>
<h1>h1タグの色はこげ茶</h1>
これはFontの色指定のテストです。（赤指定）
</body>
</html>

Class指定で文字色を青に指定

pタグにClass blue を指定し、blueクラスに青色を指定しています。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<style>
body {
    color: #ff0000;
}
h1 {
    color: #662323;
}
.blue {
    color: #0000ff;
}
</style>
</head>
<body>
<h1>h1タグの色はこげ茶</h1>
これはFontの色指定のテストです。（赤指定）
<p class='blue'>これはClassでFontの色指定のテストです。（青指定）</p>
</body>
</html>

以上、簡単な「文字 Font の 色を指定する」方法の紹介でした。