前回は、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は、共に斜体で表示を行うスタイルですが、日本語フォントの場合、イタリック体や斜体フォントが用意されていない場合が多い為、ブラウザが表示処理をおこなう際、斜めに傾けて表示することが多い。
テキストの行高を指定するためのプロパティ。「line-height:1.5」のように指定をおこないます。
これもbody要素などに、基準値をあらかじめ記載しておきたいスタイルになります。
| normal | ブラウザの持つ初期値 |
|---|---|
| 数値に単位付き指定 | pxやemなど、単位を付けて指定 |
| 数値のみ指定 | 単位を付けづにフォントサイズの倍数で指定（1.5や1など） |
| ％で指定 | ％値で指定します。 |
読みやすい行間は1.5～2くらいを目安に好みに合わせて指定するのが良いでしょう。
行頭の文字下げをおこなうプロパティになります。「text-indent: 1em;」のように指定をおこないます。
段落の先頭行で、1文字分最初の文字に空白をあける際に使用。
HTMLにスペースを入力するのでなく、上記のようCSSで指定します。
px、emの単位で指定するほか％でも指定可能です。
1emもしくは、pxで使用しているサイズ（16pxであれば）の半分8pxと記載することが多くなります。
テキスト文字の装飾を指定するプロパティ。
「text-decoration: underline;」のように指定をおこないます。
| none | 装飾をおこなわない |
|---|---|
| underline | 下線を引く |
| overline | 上線を引く |
| line-through | 打ち消し線を引く |
| blink | 点滅させる |
blinkについては、サポートしていないブラウザが多い為、使用機会もほとんどありません。
テキストの行揃えをするためのプロパティ。
ブロックレベル要素などに「text-align: left;」のように指定をおこないます。
| left | 左寄せにする |
|---|---|
| right | 右寄せにする |
| center | 中央寄せにする |
| justify | 均等割り付けにする |
テキストや画像の、縦方向の揃え位置を指定するプロパティ。「vertical-align: top;」のように指定をおこないます。
なお、指定をおこなわない初期値は「baseline」になっています。
| 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でスタイルの訂正を行うと、グッと読みやすいテキストが記載できるようになると思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
