• 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. アコーディオンを作ってみよう

  6. borderが横幅からはみ出てしまう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930