【初心者向け】30日間でWebサイト作成チャレンジ｜6日目：CSSで色とフォントを変更する

文字に色をつける方法は非常に簡単です。 以下のHTMLとCSSのコードをご覧ください。

HTML

                
<p>焼肉</p>
                
              

CSS

                
p{
  color: red;
}
                
              

このコードの実行結果がこちらです。

上記のコードのようにcolorをredと指定することもできますが、もっと細かく設定することもできます。

その方法が「16進数カラーコード」です。

次に文字を良い感じの赤色を指定してみることにします。

                
p{
  color: #AD343E;
}
                
              

蛍光色のような赤よりこちらの方が落ち着いた色になっているのが分かります。

これらのようにして文字に色を加えるのが一般的です。

では次にフォントを変更する方法を学んでいきます。 フォントは以下のようにして変更するのが一般的です。

                
p{
  font-family: 'Courier New', Courier, monospace;
}
                
              

実行結果がこちらです。

若干文字の形が変わったのがお分かり頂けましたでしょうか？

次に別のフォントも試してみます。

                
p {
  font-family: 'Times New Roman', Times, serif;
}
                
              

このコードの実行結果がこちらです。

今度はスタイリッシュなフォントになりました。

これらのようにしてフォントを変えていきます。

文字の形だけでそのサイトの印象も変わってきますので、注意してお選びください。

以下は主要なフォントの一覧です。

文字の見た目	フォント名
焼肉	'Courier New', Courier, monospace
焼肉	'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
焼肉	'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
焼肉	'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
焼肉	'Times New Roman', Times, serif
焼肉	Arial, Helvetica, sans-serif;

以上が文字に色をつけ方とフォントの変更の仕方でした。

これらは小さなことのように感じますが、Webサイト開発において重要な役割を果たしますので、色んな色やフォントを試して、どんなものがあるのかを調べてみてください。

関連記事