【html&css】cssを使用して文字(フォント)の大きさや色を変えてみよう!

スポンサーリンク


みなさんこんにちは!
みやごん@pokki1216です。

前回のhtml&css講座では文章に見出しや段落をつけました。

第三回ではhtmlだけでなくcssにも触れていこうと思います!
この記事では、cssを使って文字(フォント)の大きさや色を変えていきます。

みやごん

cssを利用して文字(フォント)の大きさや色を変更する

まず、cssを利用するために、htmlファイルだけでなくcssファイルを作成する必要があります。

もしcssを利用できるテキストエディタをお持ちでない場合は以下のリンクから好きなフリーエディタをダウンロードしましょう!ちなみに僕は様々なプログラミング言語を利用できるatomを使用しています。
フリーで使えるものばかり!HTMLを書けるおすすめのエディタ10選

一般的にcssのファイル名はstylesheet.cssとすることが多いですが、好きな名前をつけてhtmlファイルと同じ場所に保管しましょう。

ファイルが作成できたら早速書いていきます!

cssで文字(フォント)の大きさを変更する

今回の元となるページとhtmlのコードを示します。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    cssの利用
  </title>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <h1>cssを使用してみよう</h1>
  <h2>フォントの大きさや色を変える</h2>
  <p>ここが変わるよ</p>
</body>
</html>

ここで最も大切なコードが8行目の部分です。このコードはcssファイルを読み込むためのコードで、記述し忘れるとcssをいくら変更しても反映されないので注意しましょう!

もしcssファイルの名前を違う名前にした場合にはhrefの後のstylesheet部分を変更してください。

では、cssをいじっていきます。ファイルに以下のコードを書き込みましょう。

p {
  font-size: 20px;
  color: blue;
}

1行目のpはhtml中の段落を表すpと対応しています。この中のfont-sizeは文字の大きさ、colorは文字の色を示しています。

まずはfont-sizeからみてみてみましょう。この状態でhtmlを開くと

font-sizeを40pxに変更すると

大きくなりました。次は色をいじってみましょう。

cssで文字(フォント)の色を変更する

色は以下のcolor部分を変更するだけで変えることができます。

p {
  font-size: 20px;
  color: blue;
}

blueと書かれた部分をredにしてみましょう。

文字が赤くなりましたね!

pに関するフォントをいじってきましたが、これは見出しなどにも適用できます。

見出し部分の文字(フォント)も変更できる

先ほどのcssファイルにh1に関する以下のコードを追加して、色を赤にしてみましょう。

h1 {
  color: red;
}
p {
  font-size: 20px;
  color: red;
}

すると見出しのフォントカラーが赤に変わりました。
このように、cssは要素毎によって異なるフォントに変更することができます。

今回は色と大きさを変更しただけですが、文字の太さを変えたり、文字にアンダーラインや枠をつけることも可能です。

またそれらについても記事にしていこうと思います。

さいごに

cssを利用して文字(フォント)の大きさや色を変更する方法について述べました。

プログラマーやブロガーにとっては基本的な部分ではありますが、一般的にこれらのことを知っている人は少数派ですので僕は勉強するたびに「普通の人が持ってない知識ゲットした!!」と思うようにしてます。

勉強にはモチベーションが必要になりますので、独自のモチベーション向上方法を手に入れておくといいのではないでしょうか?

cssをマスターするとwebデザインを行うことができるようになるので、今後も一緒に勉強していきましょう!

最後までみていただきありがとうございました。

ブログランキング・にほんブログ村へ

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です