文字を調整しよう！font関連のCSSあれこれ
Webサイトを作るとき、何かしら文字を表示すると思いますがCSSを指定するといろいろな書体で表示させることができます。
書体のことをfont（フォント）といいますが、CSSにはfont-sizeやfont-familyなどfont-○○というプロパティが用意されているので、それらを活用していろいろな表示をさせてみましょう。
font-size
font-sizeプロパティは文字サイズを指定します。
HTML
<html>
<head>
<style>
.text1 {
font-size: 10px;
}
.text2 {
font-size: 20px;
}
.text3 {
font-size: 30px;
}
</style>
</head>
<body>
<p class="text1">あいうえお</p>
<p class="text2">かきくけこ</p>
<p class="text3">さしすせそ</p>
</body>
</html>
いろいろなサイズの文字を表示させてみました。上記はpxでサイズを指定しましたが、emやremなどの相対値を使うこともできます。
サイズを指定する時の単位については「px？em？CSSでのサイズのいろいろな単位」でまとめていますのでこちらもご参照ください。
color
colorプロパティは文字色を指定します。
CSS
.text1 {
font-size: 10px;
color: red;
}
.text2 {
font-size: 20px;
color: #ff8300;
}
.text3 {
font-size: 30px;
color: rgb(0,0,255);
}
「color: 色;」のように書けばその色が適用されます。
色の指定方法はredやblackなどのキーワードで指定する方法、16進数で指定する方法、rgbで指定する方法があります。
キーワードはblueとかwhiteとかよく使われる英単語はだいたい揃っています。
他にも知りたい方はこちらをご覧ください。
16進数とは、16で桁が上がる数の表現方法です。
普段僕たちが数を数える時は10進数です。0〜9で1桁が表現されていて10で桁があがりますね。それの16で桁が上がるバージョンです。
16進数の場合、
- 10はa
- 11はb
- 12はc
- 13はd
- 14はe
- 15はf
になります。
16で桁が上がるので16進数で「10」になります。
16進数の10は10進数での16になります。
はい、ややこしくなるのでこの辺でやめておきましょう。
上の「かきくけこ」はオレンジ色で表示していますが、CSSでは16進数で色を指定しています。16進数で指定する場合は先頭に「#」をつけてください。
16進数での指定は色を微調整したい時などに使えます。
こちらのサイトで色を変えたらそれに対応する16進数での数を教えてくれるので参考にしてください。
上の「さしすせそ」はrgbで指定しています。
rgbとはred、green、blueのことで、光の三原色である赤、緑、青のそれぞれの割合を決めて色を作る方法です。
上の場合は「rgb(0, 0, 255);」で指定しています。左から赤0、緑0、青255という意味になります。0は最小値で255が最大値です。つまり、青100%ということになります。
同じくこちらのサイトでrgbも教えてくれるのでご参考に。
font-weight
font-weightプロパティは文字の太さを指定します。
HTML
<html>
<head>
</head>
<body>
<div style="font-weight: 800;">
<p>わたしは親の800です</p>
<div>
<p style="font-weight: normal;">normal</p>
<p style="font-weight: bold;">bold</p>
<p style="font-weight: lighter;">lighter(700と同じ)</p>
<p style="font-weight: bolder;">bolder(900と同じ)</p>
<p style="font-weight: 100;">100</p>
<p style="font-weight: 200;">200</p>
<p style="font-weight: 300;">300</p>
<p style="font-weight: 400;">400(normalと同じ)</p>
<p style="font-weight: 500;">500</p>
<p style="font-weight: 600;">600</p>
<p style="font-weight: 700;">700(boldと同じ)</p>
<p style="font-weight: 800;">800</p>
<p style="font-weight: 900;">900</p>
</div>
</div>
</body>
</html>
設定する値とその効果は上のとおりです。
値は100〜900の9つの数値で設定することができます。
数が大きくなるほど太くなります。
数値以外にnormal、bold、lighter、bolderで設定することもできます。
normalは400と同じ太さです。
boldは700と同じ太さです。
lighterは親要素の太さを一段階細くした太さです。
bolderは親要素の太さを一段階太くした太さです。
lighterとbolderですが、設定できる太さは100、400、700、900の4つのみとなります。
上の場合は親要素が800なので、lighterは700、bolderは900となります。
親要素が400の場合、lighterは100、bolderは700となります。
僕は数値での設定はあまり使わないです。太字にしたい時にboldを指定するくらいでしょうか。
line-height
line-heightプロパティは行の高さを指定します。
おもに行間を空けたい時に使います。
HTML
<html>
<head>
</head>
<body>
<div style="font-size: 15px;">
<p>
line-heightは行の高さを指定します。<br>
行間を空けたい時などに使ってみてください。
</p>
<p style="line-height: 15px;">
line-heightは行の高さを指定します。<br>
行間を空けたい時などに使ってみてください。
</p>
<p style="line-height: 2;">
line-heightは行の高さを指定します。<br>
行間を空けたい時などに使ってみてください。
</p>
<p style="line-height: 3em;">
line-heightは行の高さを指定します。<br>
行間を空けたい時などに使ってみてください。
</p>
</div>
</body>
</html>
上に4つ、例を示しました。
1つ目は何も指定していないデフォルトの行間です。これは「line-height: normal;」と同じ状態で、どれくらい行間が空くかはブラウザによります。
2つ目は15px、つまり親要素で指定したfont-sizeと同じ数値を指定しています。font-sizeと同じなので行間は無く、文字がぎっしり詰まってますね。
3つ目は「2」と指定しています。単位が無い場合はフォントサイズにこの数字を掛けた数値で指定されます。上の場合はフォントサイズが15pxでline-heightが2なので行の高さは30pxと同じ意味になります。
ぎっしり文字を詰めて1行分の隙間が空くことになります。
4つ目は3em、親要素のフォントサイズの3倍になります。
上の場合は15px×3で45pxで指定されたのと同じ意味になります。
font-family
font-familyプロパティはフォント（書体）の種類を指定します。
フォントにはざっくりとしたカテゴリーがあって、ゴシック体、明朝体、筆記体などがあります。
これらのカテゴリーのことを総称フォントといってフォント名はゴシック体は「sans-serif」、明朝体は「serif」、筆記体は「cursive」といいます。
その中でもいろいろ種類があって、例えばゴシック体には「arial」「ヒラギノ角ゴシック」、明朝体には「ヒラギノ明朝 Pro W3」、筆記体には「Comic Sans MS」などがあります。
HTML
<html>
<head>
<style>
section {
margin-bottom: 2rem;
}
p {
line-height: 8px;
}
</style>
</head>
<body>
<section style="font-family: sans-serif;">
<p>ゴシック体の「sans-serif」です</p>
<p>あいうえお亞井右絵悪abcdefg1234567890</p>
</section>
<section style="font-family: 'ヒラギノ角ゴシック';">
<p>ゴシック体の「ヒラギノ角ゴシック」です</p>
<p>あいうえお亞井右絵悪abcdefg1234567890</p>
</section>
<section style="font-family: serif;">
<p>明朝体の「serif」です</p>
<p>あいうえお亞井右絵悪abcdefg1234567890</p>
</section>
<section style="font-family: 'ヒラギノ明朝 Pro W3';">
<p>明朝体の「ヒラギノ明朝 Pro W3」です</p>
<p>あいうえお亞井右絵悪abcdefg1234567890</p>
</section>
<section style="font-family: cursive;">
<p>筆記体の「cursive」です</p>
<p>あいうえお亞井右絵悪abcdefg1234567890</p>
</section>
<section style="font-family: 'Comic Sans MS';">
<p>筆記体の「Comic Sans MS」です</p>
<p>あいうえお亞井右絵悪abcdefg1234567890</p>
</section>
</body>
</html>
止め跳ねのないゴシック体と、止め跳ねのある明朝体、手書き風な筆記体のフォントの一例です。
筆記体は英語にしか適用されないのであまり使い所はないかもしれませんね。
ちょっとかしこまった文章を載せたい時は明朝体、特にこだわりがなければゴシック体というような使い分けかなと思います。
総称フォントは他にも横幅が均等なmonospaceや装飾的なfantasy、動作環境のUIと同じフォントになるsystem-uiなどがあります。
font-familyプロパティにはこれらのようなフォント名を指定しますが、使えるフォントはユーザーのOS(Wondows、Macなど)やブラウザ(Google Chrome、Safariなど)によって異なる場合があります。
フォント名を１つだけ指定した場合、特定の環境ではフォントが効かない可能性があるので、どんな環境にも対応できるようにカンマ区切りで複数のフォント名を指定するのが一般的です。複数のフォント名が指定された場合は最初に書かれたフォント名が優先度が高くなります。
また、フォント名はシングルクォーテーションかダブルクォーテーションで囲みますが、総称フォントに限っては囲みません。
HTML
<html>
<head>
<style>
html {
font-family: 'Meiryo', 'Hiragino Kaku Gothic Std', sans-serif;
}
</style>
</head>
<body>
<p>font-familyは書体を指定するCSSプロパティです。</p>
<p>指定できる書体名はたくさんあるので迷っちゃいますが、特に理由がなければ標準のフォントでいいんじゃないかと、個人的には思います。</p>
</body>
</html>
上記の場合はHTML全体に対して「Meiryo」「Hiragino Kaku Gothic Std」「sans-serif」の3つを指定しています。優先順位は「Meiryo」が一番高く、「sans-serif」が一番低いです。
「Meiryo」はWindowsに搭載されているフォント名でMacにはありません。
「Hiragino Kaku Gothic Std」はMacに搭載されており、Windowsには搭載されていません。
「sans-serif」は総称フォントの一つで、ゴシック体のフォントになります。どの環境であっても、環境に適したゴシック体のフォントで表示してくれます。
上の画像はMacで動作させたものなので、「Meiryo」は効いておらず「Hiragino Kaku Gothic Std」が効いています。
まとめ
いかがだったでしょうか。
これら以外にもフォント関連のプロパティはありますが、今回紹介したものはよく使われるので覚えておきましょう。
- 文字の大きさはfont-size
- 文字の色はfont-size
- 文字の太さはfont-weight
- 文章の行の高さはline-height
- 文字の書体はfont-family
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy