• 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. 画像をhoverして時にズームさせるcssを書こう

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

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

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

  6. アコーディオンを作ってみよう

2024年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  
Translate »