「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『CSS（シーエスエス）』を学習したい方向けに、
基本的なポイントをまとめてみました！
そもそも『CSS（シーエスエス）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『CSS（シーエスエス）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、『HTML（エイチティーエムエル）』は、
『CSS』学習とは切っても切れない基礎知識ですので、
以下の別記事他、『HTML』学習のご紹介ページもぜひ事前にご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
[toc]
今回はフォント（文字）のスタイルを整える方法を学びましょう！
後から出てくる各学習項目のベースとなるHTMLは以下です。
フォントテスト.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォントに関するCSS学習</title>
<link rel="stylesheet" href="フォントテスト.css">
</head>
<body>
<p>フォントを色々と変えてみよう！</p>
</body>
</html>
一旦ブラウザで表示させてみましょう。
フォントテスト.cssというCSSファイルをまだ作っていませんので、
表示されるのはHTMLのシンプルな文章だけですね。
このシンプルな文章がどう変わるのか、
一つずつ学習を進めていきましょう！
フォントサイズ（文字の大きさ）を変えたい
文字の大きさを変えたい場合は、
「font-size」プロパティを使いましょう。
以下記述の通り、
フォントテスト.cssというCSSファイルを作成してみましょう。
フォントテスト.css
@charset "utf-8";
p {
font-size: 10px;
}
作成後はフォントテスト.htmlと同じフォルダ内に保存します。
これで、フォントテスト.cssが、
フォントテスト.htmlに反映されるようになりました。
早速フォントテスト.htmlをブラウザ表示して、
変化を確認してみましょう！
フォントサイズ変更する前
「font-size」プロパティでフォントサイズを変更した後
フォントが小さくなっていますね！
今回の例では、プロパティ値を「10px」としていますが、
この数字を自分の好きな数字にいじってみて下さい。
入力した数字に応じて、フォントサイズが変わります。
「px（ピクセル）」という単位の補足です。
今回学習した「font-size」に限らず、
大きさや長さを指定するプロパティ値には、
いくつか指定の形があります。
「px」の他に、
「％」、「em（エム）」、「pt（ポイント）」等が代表的です。
「px」は1px＝モニタディスプレイの1つの点が何個かで指定する単位、
「％」は親要素のフォントサイズと比較して何％なのか指定する単位、
「em」は1文字分のサイズを指定する単位です。
webデザインを極めたい方は、
それぞれ特徴と使い所を学習しても良いと思いますが、
初心者の方は色々な単位があることだけ覚えておき、
まずは「px」で表現することにしておこう、
くらいで良いと思います。
フォントの太さを変えたい
文字の太さを変えたい場合は、
「font-weight」プロパティを使いましょう。
先程作ったフォントテスト.cssというCSSファイルを、
以下のように記述し直します。
フォントテスト.css
@charset "utf-8";
p {
font-weight: bold;
}
先程と同じく、
フォントテスト.htmlと同じフォルダ内に保存します。
フォントテスト.htmlを改めてブラウザ表示して、
変化を確認してみましょう！
フォントサイズ変更する前
「font-weight」プロパティでフォントの太さを変更した後
フォントが太くなりました！
今回の例では、プロパティ値を「bold」としています。
フォントの太さを決めるプロパティ値にはいくつか種類がありますが、
ひとまずは、
今回のフォントを太くする「bold」と、
通常の太さのフォントで表示する「normal」
を覚えておけば十分だと思います。
フォントのスタイルを変えたい
文字のスタイルを変えたい場合は、
「font-style」プロパティを使います。
イタリック体やオブリーク体といった、
斜めに傾いたフォントを使いたい場合です。
（日本語サイトではあまり使わないかもしれませんが、、、）
これまでと同じく、
フォントテスト.cssというCSSファイルを、
以下のように書き換えます。
フォントテスト.css
@charset "utf-8";
p {
font-style: italic;
}
作成後、フォントテスト.htmlと同じフォルダ内に保存したら、
フォントテスト.htmlをブラウザ表示して、
変化を確認してみましょう！
フォントサイズ変更する前
「font-style」プロパティでフォントスタイルを変更した後
フォントが斜めになりました！
今回の例では、プロパティ値を「italic（イタリック）」にしていますが、
他にも、
通常のフォントで表示する「normal」や、
斜めに傾けたフォント「oblique（オブリーク）」等があります。
（「italic」と「oblique」は同じ斜めに傾くフォントになり、
区別は厳密ではありません。）
フォントの種類（字体）を変えたい
文字の種類を変えたい場合は、
「font-family」プロパティを使いましょう。
フォントテスト.cssを以下記述に書き換えます。
フォントテスト.css
@charset "utf-8";
p {
font-family: serif;
}
これまでと同じく、
フォントテスト.htmlをブラウザ表示して、
変化を確認してみます。
フォントサイズ変更する前
「font-family」プロパティでフォントの種類を変更した後
フォントが明朝体になり、
見た目の雰囲気が変わりましたね！
プロパティ値の「serif（セリフ）」は、
日本語でいう明朝体のことです。
他にも、
ゴシック体を表す「sans-serif（サンセリフ）」や、
装飾文字になる「fantasy（ファンタジー）」等、
フォントには色々な種類があります。
文字の見た目は見る人に与える印象が変わる、
大事なポイントだと思います。
今回は細かく触れませんが、
興味のある方はどんなフォントの種類があり、
それがどんな場面で効果的なのか、
色々と自分で調べてみましょう！
まとめ
-
文字の大きさを変えたい場合は、「font-size」プロパティを使う。
-
文字の太さを変えたい場合は、「font-weight」プロパティを使う。
-
文字のスタイルを変えたい場合、「font-style」プロパティを使う。
-
文字の種類を変えたい場合、「font-family」プロパティを使う。
いかがでしたでしょうか？
今回は、『CSS』学習初心者の方向けに、
フォント（文字）をデザインする基本の解説をさせて頂きました。
覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！
今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。
今回の記事が、
少しでも皆さんのお役に立てたら幸いです！