【HTML&CSS】CSSにおける文字の色・大きさ・種類の変え方




Let's touch CSS プログラミング
スポンサーリンク

いじゅ~もり(@ijumori)です。

 

引き続き、プログラミング学習の復習を兼ねて、学習内容のおさらいをしていきたいと思います。

前回は、「HTML&CSS」の初級編のうち、「2章:CSSに触れてみよう!」をやりました。

内容は、CSSで文字の色や大きさ、配置を指定しました。

classが出てきたところで少し難しく感じたので、しっかりと復習をしていこうと思います。

ではさっそくいってみよー!

 

CSSについて

CSSとは

ウェブページはHTMLとCSSを組み合わせてつくられています。

CSSとは、HTMLの要素に対して色や大きさ、配置などを指定するためのものです。

HTMLはウェブページをどのように表示するのか指定をするものであり、CSSはページをデザイン・装飾するためのものです。

CSSを使って「どこの」「何を」「どうする」のか指定して見栄えを装飾していきます。

 

文字の色を変えるには

上でも述べたように、CSSはHTMLの要素に対して装飾をすることができます。

言いかえると、装飾するためのHTMLコードがなくてはなりません。

CSSを使う場合は必ずHTMLとセットになっていることが必要です。

そのため、このあとに例をいくつか書いていきますが、まずはHTMLコードを書き、その後にCSSのコードを書くという決まりにしたいと思います。

 

ではさっそく、文字の色を変えるにはどうするかというと、

 

 

というHTMLに対して、CSSで次のように書きます。

 

 

 

実際にこのCSSを記述すると、次のような表示になります。

文字の色を変えるには

 

 

CSSでは、「どのHTMLの要素」に対して、「なにを」、「どのように」させるのか指示します。

この場合は、「h1要素」に対して、「色を」「赤く」しなさいという指示です。

色については16進数のカラーコードで指定します。

主要な色であれば「red」のような指定も可能です。

 

また、CSSを適用したいHTMLの要素を「セレクタ」、変更したい項目を「プロパティ」、そしてそのプロパティをどのようにさせるか決めるものを「値」といいます。

どのセレクタに対して何のプロパティをどのような値にするのかと言いかえると理解しやすいでしょうか。そうでもないでしょうか。

 

よくある間違い

コロンとセミコロンを取り違えるミスがよくあります。

どちらがコロンでどちらがセミコロンなのか間違わないように覚えましょう。

 

文字の大きさを変えるには

次は文字の大きさを変えてみます。

 

 

というHTMLに対して、CSSを次のように書きます。

 

 

すると、次のような表示になります。

文字を大きくしてみます
文字を小さくしてみます

 

 

文字の大きさはfont-sizeプロパティを使います。

また、font-sizeはpx(ピクセル)という単位を使います。

 

文字(フォント)の種類を指定しよう

フォントの種類は実にたくさんあります。

どのフォントにするのか指定することができます。

 

 

というHTMLに対して、CSSで次のように書きます。

 

 

すると、次のような表示になります。

Hello World

 

「font-family: フォント名;」と書くことで要素にそのフォントを適用することができます。

フォントはたくさんあるので、「フォント 一覧」などで検索して、自分好みのフォントを探してみてください。

 

最後に

今回の記事では、CSSにおける

  • 文字の色の指定
  • 文字の大きさの指定
  • 文字の種類の指定

について解説しました。

文字の色や種類については検索すればすぐに出てくるものなので、覚える必要はありません。

書き方だけ覚えてください。

もしもわからないところや間違っているところがあったら、ぜひご一報くださいませ。

 

最後まで読んでくれてありがとうございました。

いじゅ~もり(@ijumori)でした。</[pre]