• 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. hoverした時に文字の間隔をつかってアニメーションしてみよう

  2. リストの前の丸をcssで消してみよう

  3. 画像をhoverして時にズームさせるcssを書こう

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

  5. 特定の番号の要素のcssだけ変更してみよう

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

2022年1月
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Translate »