に投稿 1件のコメント

CSSのプロパティ解説~文字編(テキスト・フォント関連)

CSSのプロパティ解説~文字編(テキスト・フォント関連)

文字のスタイルを指定しよう

こんにちは、ホームページ制作のオイゾウです!
CSSでスタイルを指定するとどんな感じになるかはある程度ご理解頂けたかと思いますので、ここからは実際にどのようなプロパティがあるのか、そしてそれらを指定することでどんなことができるかということを、プロパティの種類ごとに解説していきます!

フォント

文字のフォントを指定します。
日本語のホームページになるかと思いますので、その場合は日本語と英語を使うことになりますから、両方を指定しましょう。
さらに言うとユーザー(訪問者)が使用するデバイス(パソコンやスマホ、その種類)やOS(オペレーションシステム)によって表示できるフォントが変わってきますので、複数のフォントを書いていきます。

一般的なフォントの指定

[html]p {
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}[/html]

備考

font-familyプロパティにはルールがあり、まず記載した順番にフォントが適用されるので、優先的に表示させたいフォントの順に書くようにします。
それから値(フォント名)に全角文字やスペースが入っている場合は必ず前後を”(ダブルクォーテーション)または’(クォーテーション)のどちらかで囲んでください。
今回のように複数の値を指定する場合は、それぞれの値を,(カンマ)で区切ります。
ここではp要素でフォントの指定をしましたが、通常はbody要素でフォントの指定をまとめてします。

文字のサイズ

文字を大きくしたり小さくしたりします。

1.6倍にする(大きくする)

[html]p {
font-size: 1.6em;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

0.8倍にする(小さくする)

[html]p {
font-size: 0.8em;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

ここでは値の単位を相対指定のemにしましたが、他に%(パーセント)やpx(ピクセル)、絶対指定のpt(ポイント)を使うこともあります。
また値はsmall(小さい)やlarge(大きい)といった絶対指定から、smaller(小さく)やlarger(大きく)といった相対指定で指定することも可能です(実際にはあまり使いませんが)。

文字に色を付ける

RGBで文字に色を指定することができます。

RGBで指定する

[html]p {
color: #7a4f64;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

色の名前で指定する

[html]p {
color: green;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

RGBとは、光の三原色と呼ばれるものです。
詳しくは「ウェブデザインに必須・初心者のためのCSS基礎知識」の「色はRGBで指定する」で解説していますので、よろしければご覧になってみてください。
色名で指定する場合、16色から選ぶことができます。詳しくは「ホームページのデザインを決めるCSSを実際に書いてみよう」の「文字が読みづらいので、色を変えたい」をご参照ください。

文字を太くする

文字を太くして強調させるにはいくつかの方法があります。

font-weightプロパティ

[html]p {
font-weight: bold;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

b要素

[html]<p>小江戸川越名物のお芋を<b>あんこの中にたっぷり入れた</b>、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>[/html] このように太字にしたい箇所をbタグで囲むと、

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

strong要素

[html]<p>小江戸川越名物のお芋を<strong>あんこの中にたっぷり入れた</strong>、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>[/html] 今度は同じ箇所をstrongタグで囲むと、

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

まず、font-weightプロパティは「normal」で標準に、「bold」で太文字になりますが、100〜900の9段階で文字の太さを変えることもできます。
ですが実際には2段階(normalもしくはbold)で表現されるというのと、この数値で指定することはほとんどありません。
それからb要素とstrong要素はHTMLのタグですのでCSSから話が少し反れましたが、太文字にする方法はこのように何種類かあります。
文章中の一部分を太文字にするのであれば、前述のようなインライン要素(改行されない)であるbやstrongを使います。
bとstrongは見た目の効果は同じですが、bは見た目以外の意味を持たないのに対し、strongは重要であるという意味を持ちますので、SEOに効果があります。
ただし多用しすぎるのは良くないので、重要な意味があるならstrongで、特に意味はなく単に目立たせたいだけならbにするなど、うまく使い分けましょう。

表示位置を揃える

通常の左揃えや上揃えだけでなく、中央揃えや右揃え、下揃えにすることができます。

水平(横)方向に表示位置を揃える(中央揃え)

[html highlight="2"]p {
text-align: center;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

水平(横)方向に表示位置を揃える(右揃え)

[html highlight="2"]p {
text-align: right;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

垂直(縦)方向に表示位置を揃える(中央揃え)

[html highlight="2,3"]p {
vertical-align: middle;
display: table-cell;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

垂直(縦)方向に表示位置を揃える(下揃え)

[html highlight="2,3"]p {
vertical-align: bottom;
display: table-cell;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

揃えた位置が分かるように背景に色を付け、p要素の高さをちょっと大きめに取りました。
vertical-alignプロパティは、text-alignプロパティと違い、今回のp要素のようなブロック要素には適用させることができません。
インライン要素やテーブルセルにのみ適用されるプロパティになります。
今回のようにp要素にvertical-alignを適用させる場合は「display: teble-cell;」と記述してテーブルセルに表示形式を指定することによって使うことができるというわけです。
標準の状態である左揃えにしたい場合は「text-align: left;」、上揃えにしたい場合は「vertical-align: top;」になります。

行間の高さを指定する

行の高さを調節することができます。

行間を1.6にする

[html]p {
line-height: 1.6;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

行間を1.8にする

[html]p {
line-height: 1.8;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

行間を2にする

[html]p {
line-height: 2;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

備考

値が1だと行と行の間が全くない状態、値が2だと行と行の間が行の高さ1つ分空きます。
状況によるので一概には言えませんが、1.7〜1.8が読みやすいですね。
今回、値には単位を入れず数値だけで指定しましたが、例えば「1.8em」といった感じでemや%などの単位で指定することも可能です。
ただしline-heightプロパティに関して、通常は単位を使わないことをおすすめします。
詳しくは「ホームページのデザインを決めるCSSを実際に書いてみよう」の「行間をもっと広くしたい」をご参照ください。

文字に線を引く

下線や取り消し線などを引くことができます。

下線を引く

[html]span {
text-decoration: underline;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

取り消し線を引く

[html]span {
text-decoration: line-through;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

備考

ここでは分かりやすくするためにp要素の中にインライン要素であるspan要素を入れ、そのspan要素にスタイルを指定するという形で線を引きました。

他にもいろいろありますが・・・

いかがでしたでしょうか?
実を言いますと、CSSで文字に関連するプロパティはここに紹介したもの以外でもいろいろとあるのですが、OSやブラウザ、またそれらのバージョンによっては対応してなかったり、バグが発生してしまう可能性があるものなどもあり、その上であまり使用頻度も高くないであろうものはあえて紹介しませんでした。
初心者の方にとって、文字に関しては今回紹介した内容をしっかりと覚えて頂ければ十分だと思いますが、もしどこかのホームページを見て「こんなことがやってみたいけどやり方が分からない」というデザインやレイアウトがありましたら、できる限りお答えしたいと思いますので是非直接お問い合わせください!

↓いいねもお願いします!


CSSのプロパティ解説~文字編(テキスト・フォント関連)」への1件のフィードバック

  1. […] こんにちは、ホームページ制作のオイゾウです! 前回「CSSのプロパティ解説~文字編(テキスト・フォント関連)」では文字を大きくしたり色を付けたりなど、文字に関するスタイルを […]

コメントを残す