前回は、CSS適用で使用する色につきまして、
参考になるサイトを含めご説明いたしました。
サイト作成時には、配色について色々と悩むことがあるかともいますが、
私としては、キーカラーは極力少なく、
そのキーカラーより、変化を加えていく色使いが、統一感が生まれ良いように思います…。
それでは今回はッ、
・フォントの種類
・フォントのサイズ
・フォントの太さ
・フォントのスタイル
・フォントの行高
・行頭の文字下げ
・文字の装飾
・文字の行揃え
・文字（画像）の縦方向の揃え
・文字間隔
上記について、記載していきます…。
ホームページ上に記載するテキスト文字。
見て頂く人に、内容をしっかり理解して頂くには、
読みやすく、また、分かり易い内容が問われます…。
記載方法のポイントとしてはbody要素に、基準となるfont-familyやfont-size、font-colorなどを
記載しておき、コンテンツ内でスタイルを変える場合は変更スタイルのみ、
記載する方法が、記載内容が少なくて済むので、シンプルに記載できます。
また、クローラーなどが情報を収集する場合にも、
大変重要な位置を占めるテキスト文章。
SEOにも重要な割合を含む要素になってくると思います。
そこで、CSSで色々な要素の変化を加えることが可能ですので、
しっかりと身につけたい技術になります。
クローラー（Crawler）とは、Googleなどのロボット型検索エンジンがWEB上のファイル（HTML文書だけでなく、画像・PDFまで含む全般）を収集するためのプログラムのことです。 クローラーによって収集されたデータがインデックス化され、巨大な検索データベースが作成されます。
font-familyで、フォントの種類を指定するためのプロパティになります。
通常body要素などに(,)半角カンマで区切る事で、複数のフォントを指定します。
それでは、私が実際に記載するfont-familyを記載してみたいと思います。
<!--ゴシック体 -->
<style>
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
</style>
<!-- 明朝体 -->
<style>
body {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
</style>
ゴシック体と明朝体であれば、IEおよびWindowsの事を考慮いたしますと、
ゴシック体を使用することが多く、これはWindows7などのユーザーが、まだ多く存在する為、
上記、ゴシック体のfont-familyをメインで使用する機会が多くなります。
理由といたしましては、どのデバイス機種およびブラウザでも
比較的読みやすく表現できることが、最大の要因になります。
また、読みやすさよりも、デザイン重視でフォントを指定する場合は、
通常のfont-familyを使用せず、ウェブフォントを使用することも検討します。
font-familyにつきましては、考えさせられることも、
多々ございますので、詳しく別記事にまとめたいと思います。
取りあうえず、現段階では上記2種類（ゴシック体・明朝体）を
メインで使用しており、CSSの記載方法の説明では、ここまでにいたします。
文字のサイズは、font-sizeプロパティで指定します。
フォントサイズについては、読みやすい大きさを心がけるように
body要素を基準値と考え、px（ピクセル）で指定を行い、
場合によっては、基準値のサイズをパソコンとスマートフォンで変更する場合もございます。
また、body以下コンテンツ内でfont-sizeの指定を行う場合は、
em（エム）で、サイズの変更をおこないます。
フォントサイズの変更例
See the Pen
PowVOrN by masakado (@kadokado354)
on CodePen.
実際のサイト制作の現場では、上記で指定することが多くなります。
太字にするときにはfont-weightプロパティで指定します。
初期値はfont-weight:noralになっています。
仕様上は9段階指定することが出来ますが、実際には、
9段階の太さをもっているフォントは少ない為、
太字にする際は「font-weight:bold」のみの指定が多くなります。
フォントのスタイルを指定するためのプロパティ。
「font-style:italic」と指定します。
初期値は「normal」で、値の種類は
・italic「イタリック体フォントで表示」
・oblique「斜体フォントで表示」
italic、obliqueは、共に斜体で表示を行うスタイルですが、
日本語フォントの場合、イタリック体や斜体フォントが用意されていない場合が多い為、
ブラウザが表示処理をおこなう際、斜めに傾けて表示することが多い。
テキストの行高を指定するためのプロパティ。
「line-height:1.5」のように指定をおこないます。
これもbody要素などに、基準値をあらかじめ記載しておきたいスタイルになります。
line-height：値
| normal | ブラウザの持つ初期値 |
|---|---|
| 数値に単位付き指定 | pxやemなど、単位を付けて指定 |
| 数値のみ指定 | 単位を付けづにフォントサイズの倍数で指定（1.5や1など） |
| ％で指定 | ％値で指定します。 |
読みやすい行間は1.5～2くらいを目安に好みに合わせて指定するのが良いでしょう。
行頭の文字下げをおこなうプロパティになります。
「text-indent: 1em;」のように指定をおこないます。
段落の先頭行で、1文字分最初の文字に空白をあける際に使用。
HTMLにスペースを入力するのでなく、上記のようCSSで指定します。
px、emの単位で指定するほか％でも指定可能です。
1emもしくは、pxで使用しているサイズ（16pxであれば）の半分8pxと
記載することが多くなります。
テキスト文字の装飾を指定するプロパティ。
「text-decoration: underline;」のように指定をおこないます。
text-decoration：値
| none | 装飾をおこなわない |
|---|---|
| underline | 下線を引く |
| overline | 上線を引く |
| line-through | 打ち消し線を引く |
| blink | 点滅させる |
blinkについては、サポートしていないブラウザが多い為、
使用機会もほとんどありません。
テキストの行揃えをするためのプロパティ。
ブロックレベル要素などに「text-align: left;」のように指定をおこないます。
text-align：値
| left | 左寄せにする |
|---|---|
| right | 右寄せにする |
| center | 中央寄せにする |
| justify | 均等割り付けにする |
テキストや画像の、縦方向の揃え位置を指定するプロパティ。
「vertical-align: top;」のように指定をおこないます。
なお、指定をおこなわない初期値は「baseline」になっています。
vertical-align：値
| baseline | ベースラインを親要素のベースラインに |
|---|---|
| top | 上端揃え |
| middle | 中央揃え |
| bottom | 下端揃え |
| % | line-heghtに対するワイヤ位による位置 |
| 数値+単位 | ベースラインを0とし、正の値なら上、負の値なら下 |
| 以下、インライン要素のみ設定可能 | |
| text-top | テキストの上端揃え |
| text-bottom | テキストの下端揃え |
| super | 上付き文字 |
| sub | 下付き文字 |
テキストの文字間隔を指定するプロパティ。
「letter-spacing: 5px;」のように指定をおこないます。
初期値は「normal」。
pxやemで指定をすることが出来ます。
実際の指定では、0.2emなど少数を使用することが多くなります。
See the Pen
QWwYQdo by masakado (@kadokado354)
on CodePen.
今回は、メチャクチャボリューミーになりましたがッ、
文字装飾に関するCSSまとめてみました。
ユーザーにしっかりと記事を読んでもらうには、どれも外せないスキルかと思います。
また、どのCSSも難しいことはありませんが、覚えるとなると大変だと思います。
しっかりと理解し、コーディングの際は実際にテキストを読んでみて、
見にくいところがあれば、こまめにCSSでスタイルの訂正を行うと、
グッと読みやすいテキストが記載できるようになると思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
