• css

CSS講座 – 文字の色を変えてみよう –

はじめに

ホームページのブログを書く際に、文字の色を変えたいのですが、やり方がわからなくて困ってるんです。
文字の色を変更するためには、cssで色を指定するとできますね
CSSで色を指定ですか・・どうやってやるんですか?
サンプルを例に説明していきましょうか

文字の色を変えてみよう

文字の色を変えるためには、cssのcolorプロパティーを使用します。
色の指定には、#000000など16進数で書かれたもので色を表現する方法や、簡易的にblackなど表現する方法があります。

サンプルコード

HTMLコード

各pにクラスを追加してあげましょう。クラスを指定することで、特定の要素に対してcssを割り当てることができるようになります。またクラスは他の要素でも使える時に指定します。

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>文字の色をcssで変えよう</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
   <p class="red">16進数で表現したもので赤くなります</p>
   <p class="shortred">簡易的に表現したもので赤くなります</p>
   <p class="blue">16進数で表現したもので青くなります</p>
   <p class="shortblue">簡易的に表現したもので青くなります</p>
 </body>
</html>
styleファイル
.red{
 color:#ff0000; /*ff(R)00(G)00(B)で表現されます*/
}
.shortred{
 color:red;
}
.blue{
 color:#0000ff;
}
.shortblue{
 color:blue;
}

サンプルコードの実行例

16進数で表現したもので赤くなります

簡易的に表現したもので赤くなります

16進数で表現したもので青くなります

簡易的に表現したもので青くなります

関連記事

  1. テキスト文字を中央、左右にcssで寄せよう

  2. cssでマウスをおいた時に動かそう

  3. CSSで画像を背景に貼ってみよう

  4. CSSで文字の間隔を変更してみた

  5. CSSでテキスト文にインデントをつけてみよう

  6. CSSで見出しを飾りつけよう

2021年1月
 123
45678910
11121314151617
18192021222324
25262728293031