ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

文字の色を変える

文字の色を変えるスタイル

文字の色を変えるには、プロパティにcolorを指定します。

.aka {
color:#F00; ← #F00は赤色を意味します。
}

色の指定は上記のようにカラーコードで指定するのが一般的ですが、キーワード(色の名前)で指定することも可能です。
当サイトではカラーコードで解説しています。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>文字の色を変える</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p class="aka">テキストテキスト</p>

</body>
</html>

ブラウザで確認すると、<p>で囲まれた「テキストテキスト」の文字が、赤色で表示されます。

CSSで文字色を変更した例

もちろん、<p>以外にも<h1>や<div>などにも使えます。呼び出し方はどれも同じで、タグの後ろにclassもしくはid="セレクタ名"でOKです。

今回は赤色を選択しましたが、その他の色だって指定することができます。
例えば、#00Fだったら青色、#0F0は緑、#FF0は黄色といった具合に、様々なカラーを指定することができます。

別ページにカラーコードをまとめていますので、参考にしてください。

覚えておきたいポイント

ミスに気をつけて!

よるあるミスで、:(コロン)や;(セミコロン)を付け忘れることがあります。きちんと入力したはずなのにスタイルが適用されない場合は、もう一度見なおしてみましょう。

文字の大きさを変える
« 前のページへ 【STEP.3】覚えておきたいCSSの一覧

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。