【CSSデザイン】これを押さえれば完璧!フォントカスタマイズの基本

WordPress

みなさんこんちわ、にゃーお。です^^
今回は好きなデザインにカスタマイズしていくための基礎!フォントのカスタマイズを記事まとめました。
カスタマイズ方法から設定のオススメ、好きなアイコンを表示できるWebフォントFont Awesomeのオススメをご紹介します!

記事のボリュームが大きくなってしまい、2つに分けます^^;
本記事は「その1」として、CSSによるスタイル設定を中心に、次記事では「その2」としてフォント指定によるカスタマイズを紹介したいと思います。

スポンサーリンク

「CSS」って知ってる??



CSS(シーエスエス、Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイル(見た目のデザインやレイアウト、寸法)を指定するためのコードです。当ブログはじめWebページで見るために必要な文字情報を表示させる際にはHTML(エイチティーエムエル、HyperText Markup Language、名前の通り、ただのテキストではなく、テキストに様々な意味や機能をもたせた拡張されたテキスト言語です)に基づいて作成&生成された物が使われるのですが、CSSはそれを補う形でHTMLで表示されるテキストやコンテンツ、レイアウトのスタイルを設定できるんです。

 昔はCSS無かったんですよね・・ 

年がバレてしまいますが、1990年頃はCSSはありませんでした。テキストやコンテンツのデザイン・レイアウトを全てHTMLで表現していた時代でした。まぁCSSが1995年頃に世に出たときは賛否両論あったものです。HTMLにもまだフォントの指定やデザイン、テキストのレイアウトに関わる機能要素(タグ)が残っているのはその名残です。
しかし現在はWeb技術の高度化やWebコンテンツの複雑化、デバイスの多様化に伴い保守性やアクセシビリティ、可読性 (リーダビリティ) 、はたまたセキュリティといった事も考える事が必要で、保守性を高めるためにもHTMLで表現するものは名前の通り「要素(タグ)」「表示情報」の記述のみとし、「色」「レイアウト」「サイズ」「出力」といった表示や出力方法といった領域はCSSで表示すべきといった考えになり現在はそれを前提とした物となっています。
これら言語のバージョンアップにともないサポートされる機能もHTMLとCSSで分離されてきています。ブラウザもそれを前提とした仕様に変わってきていますので、対応しない古いバージョンの言語ルールでコードを作成しても表示が正しくされません。大変ですが日々HTMLとCSSの最新バージョンを意識して使用する必要があります。

 ということで、フォントデザインをカスタマイズするときはCSSで表現しましょう!

前置きが無いですが要はデザインのカスタマイズはCSSでやろうね!という事です。
WordPressやテーマ等はこれを前提とした機能サポートがありますよ!

スポンサーリンク

「CSS」設定方法



ここではCSSを使った設定方法をご紹介しますね!

CSSで書いたコードを記載したりコピペする場所



WordPressの場合、CSSによるスタイルを設定する「style.css」というファイルがあります。
WordPress管理画面からは「カスタマイズ」→「テーマの編集」とクリックすると表示されます。

最初からテキストで「スタイルを書く」と記載されています。
この下(枠)にじゃんじゃん好きに書いていけばOK!保存すればすぐに設定が反映されます。
「コードを書く」->「保存」->「反映できてるか自分のWebサイトをチェック」->「気に入らなければコードの設定を修正」を繰り返しやっていきましょう。

フォントの色を変えたい



WordPressのテーマによってはテキストを作成するなかでフォントの色を設定する機能があったりします。
今回はCSSの設定方法ですので、テーマの機能に頼らず自分でコードで表現する方法をご紹介。

このように記載すればテキストの色を好きに変更できます。

color:#ffffff;

・「color:」というのがフォントの色を指定する際のコード
・「#ffffff」というのが色を表現するためのカラーコード

ちょっとややこしいのですが、色ってものすごいバリエーションがありますよね。これをコードで表現するんですが、場合が多すぎるので0〜fまでの16個のコードを6文字組み合わせて表現します。
16x16x16・・・16=16777215通り!
この#+6桁のコード、RGB(赤、緑、青)の色味の濃さの組み合わせを意味していまして、最初の2桁(00〜FF)が赤色の濃さ、次の2桁(00~FF)が緑色の濃さ、最後の2桁(00~FF)が青色の濃さとなっています。
「00」が一番色味が薄く、「FF」が一番色味が濃くなります。
これを組み合わせる事で自由自在に好きな色を表現できちゃいます^^

以下サイトで視覚的に色からコードを確認できますのでご参考ください。

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。
#FFFFFFの色見本 - color-sample.com
More than 16 million colors

サンプル:
CSSファイルにこちらを記入しましょう。

span.sample1 {color:#2E64FE; }
span.sample2 {color:#ff00ff; }
span.sample3 {color:#04B404; }

CSS設定を反映させるHTML(記事部分)はこんな感じ。

<span class="sample1">サンプル1</span>
<span class="sample2">サンプル2</span>
<span class="sample3">サンプル3</span>

表示結果はこのようになります。

サンプル1
サンプル2
サンプル3

 オススメの色は? 

多くのサイトでは白色の背景に、黒色の文字のオーソドックスな組み合わせになっています。

しかし単純にビビットな白色と黒色では、コントラストが強すぎて目に負担がかかるため、
少しだけコントラストを下げているケースが多いようです。

Google、Facebook、Amazon、Yahoo! の場合、
背景は #FFF (白色)ですが、文字色は #222 ~ #555 のようにコントラストを下げています。
しかしすべて同じ色を設定しているのではなく、見出しや説明文などの文字の役割や場所によって濃さを変えています。

テキストリンクの色も世界的に青色で統一されており、ユーザも青色の文字を見るとリンクであると認識してしまうため注意が必要です。
Google は #1111cc、Youtube は #0033cc、Wikipedia は #0645ad で設定されてです。

フォントの大きさを変えたい



こちらもフォントの色と同じくWordPress機能でフォントサイズを設定できますが、CSS設定方法をご紹介します。

直接数字の単位で指定

・px:ピクセルで指定。
・pt:ポイントで指定。(1pt = 0.0353 cm = 1.33px)
・pc:パイカで指定。(1 pc = 0.4233 cm = 16px)
・in:インチで指定。(1 in = 2.54 cm = 96px)
・cm:センチメートルで指定。
・mm:ミリメートルで指定。

例:font-size: 12px;

メリット:数字の大きさで表現するので直感的に分かりやすい。
デメリット:表示するデバイスやブラウザ、解像度によって文字の大きさが変わってしまいレイアウトが崩れる。(ブラウザの設定を上書きできない)

フォントの大きさに対する対比を相対的な数字で指定

・em:親要素(指定する場所)基準のフォントサイズを 1 として相対値で指定。
・rem:root emのこと。root (html) 要素のフォントサイズを 1 として相対値で指定。
・ex:英字の “x” のサイズを 1 として相対値で指定。

例:font-size: 12rem;

メリット:解像度の影響を受けにくく、周りのテキストの大きさに対して設定されるのでレイアウトが崩れない。
デメリット:直感的に分かりにくい、「em」を使う場合、指定の範囲を意識しないと前後の表示フォントの大きさが異なってしまい、結果としてレイアウトが崩れる。また、こちらもブラウザの設定(最小フォントサイズなど)によって崩れる可能性がある。

フォントの大きさに対する対比割合を相対的に%で指定

・%:基準のフォントサイズを 100 として相対値で指定。

例:font-size:80%;

メリット:解像度の影響を受けにくく、周りのテキストの大きさに対して設定されるのでレイアウトが崩れない。また上記 em,remに比べ%で表現するためイメージしやすい。
デメリット:親要素の範囲を意識しないと上記と同様、前後の表示フォントの大きさが異なってしまい、結果としてレイアウトが崩れる。

ブラウザの幅に対する割合でフォントサイズを指定

・vw:ブラウザの横幅を 100 として相対値で指定。
・vh:ブラウザの高さを 100 として相対値で指定。
・vmin:ブラウザの横幅・高さの小さい方を 100 として相対値で指定。
・vmax:ブラウザの横幅・高さの大きい方を 100 として相対値で指定。

例:font-size:80vm;

メリット:ブラウザを基準に考えるため、レイアウトが崩れない。前後の親要素の入れ子構造を気にせずレイアウトを設定できる。
デメリット:レイアウト設計にともなう計算の難易度が高い。ブラウザの画面幅に応じてサイズが可変するため他のフォント以外の要素も全て%指定にしておかないと、レイアウトが崩れる。

キーワードで指定

デフォルトのフォントの大きさに対するサイズ設定という意味では上記の割合指定と似ていますが、イメージのしやすいサイズキーワードで指定するため、実際の表示がイメージしやすいです。

・xx-small:9.26 px
・x-small:11.11 px
・small:13.33 px
・medium:16 px
・large:19.2 px
・x-large:23.04 px
・xx-large:27.65 px
・smaller:フォントサイズが 1 段階下がる
・larger:フォントサイズが 1 段階上がる

mediumが標準サイズです。

例:font-size: xx-small;、font-size: large;

メリット:サイズのテキストで直感的に分かりやすい。また解像度の影響を受けにくく、周りのテキストの大きさに対して設定されるのでレイアウトが崩れない。
デメリット:上記同様、親要素の範囲を意識しないと結果としてレイアウトが崩れる。

サンプル:
CSSファイルにこちらを記入しましょう。

span.sample1 {font-size: 20px; }
span.sample2 {font-size: 2rem; }
span.sample3 {font-size:120%; }
span.sample4 {font-size:x-large; }

CSS設定を反映させるHTML(記事部分)はこんな感じ。

<span class="sample1">サンプル1</span>
<span class="sample2">サンプル2</span>
<span class="sample3">サンプル3</span>
<span class="sample3">サンプル4</span>

表示結果はこのようになります。

サンプル1
サンプル2
サンプル3
サンプル4

フォントの色を変えたい



 オススメのサイズは? 

一般的にフォントサイズのベースは 16 px 前後が良いとされています。
閲覧ユーザの平均的な視力や眼から画面(表示テキスト)までの距離、読書速度などから言われています。
さらにモバイル機器の普及からテキストが大きめに設定される傾向があります。

フォントの太さを変えたい



設定幅は広くサポートされていますが、実際はそこまで段階的に対応しているフォントが少ないので細かに設定しても反映されにくいです。

フォントの太さに対して数値で割合を指定。標準の太さは400

例:font-weight: 100;

フォントの太さをキーワードで指定


・normal:標準 400相当
・bold:太字 700相当
・lighter:相対的に一段階細く
・bolder:相対的に一段階太く

例:font-weight: bold;

サンプル:
CSSファイルにこちらを記入しましょう。

span.sample1 {font-weight:200; }
span.sample2 {font-weight:400; }
span.sample3 {font-weight:bold; }
span.sample4 {font-weight:bolder; }

CSS設定を反映させるHTML(記事部分)はこんな感じ。

<span class="sample1">サンプル1</span>
<span class="sample2">サンプル2</span>
<span class="sample3">サンプル3</span>
<span class="sample4">サンプル4</span>

表示結果はこのようになります。

サンプル1
サンプル2
サンプル3
サンプル4

フォントの行間を変更したい



フォントの行間はサイズや色、フォントデザインに比べると少し地味かもしれませんが読みやすさに大きく影響を与えます。
上記同様、テキスト、px、数字、em、%による指定ができます。特徴は上記と同じ。単位を省略した場合、「em」で解釈されます。

一般的には文字の半分から 1 文字程度が良いとされています。 つまり設定値は 1.5 ~ 2.0程度のケースが多いです。

サンプル:
CSSファイルにこちらを記入しましょう。

span.sample1 {line-height: normal;}
span.sample2 {line-height: 15px;}
span.sample3 {line-height: 2em;}
span.sample4 {line-height: 200%;}

CSS設定を反映させるHTML(記事部分)はこんな感じ。※サンプル文章は同じ

<span class="sample1">This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.</span>

<span class="sample2">This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.</span>

<span class="sample3">This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.</span>

<span class="sample4">This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.</span>

表示結果はこのようになります。

This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.

This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.

This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.

This example demonstrates different line-heights. You can change the lineheight by clicking on one of the line-height properties on the left. This text is where you will see the result of the selected line-height property.

だいぶ見た目のガチャガチャ感が違いますね^^;

フォントに装飾を加えたい(アンダーバーなど)



最後に装飾をご紹介します。

text-decoration

アンダーライン等の線を表示させるかどうか設定できます。


・none:標準 何も表示しない。
・underline:アンダーラインを引く
・overline:テキストの上側にラインを引く
・line-through:取り消し線

例:border-bottom: underline;

サンプル:
CSSファイルにこちらを記入しましょう。

p.sample1 {text-decoration: underline;}
p.sample2 {text-decoration: overline;}
p.sample3 {text-decoration: underline;}
p.sample4 {text-decoration: line-through;}

CSS設定を反映させるHTML(記事部分)はこんな感じ。

<p class="sample1">サンプル1</p>
<p class="sample2">サンプル2</p>
<p class="sample3">サンプル3</p>
<p class="sample4">サンプル4</p>

表示結果はこのようになります。

サンプル1

サンプル2

サンプル3

サンプル4

border-bottom

border-bottomを使う事の線のスタイルや色を設定できます。


・solid:標準 普通の実線。
・double:二重線
・dotted:点線、ドット
・dashed:破線

例:border-bottom: double;

サンプル:
CSSファイルにこちらを記入しましょう。

span.sample5 {border-bottom: double 3px #FF8000; }
span.sample6 {border-bottom: dashed 2px #DF0101;}
span.sample7 {border-bottom: dotted 4px #0040FF;}
span.sample8 {border-bottom: solid 6px #DF01D7;}

CSS設定を反映させるHTML(記事部分)はこんな感じ。

><span class="sample5">This example demonstrates different border-bottom of texts. </span>

<span class="sample6">This example demonstrates different border-bottom of texts. </span>

<span class="sample7">This example demonstrates different border-bottom of texts. </span>

<span class="sample8">This example demonstrates different border-bottom of texts. </span>

表示結果はこのようになります。

This example demonstrates different border-bottom of texts.

This example demonstrates different border-bottom of texts.

This example demonstrates different border-bottom of texts.

This example demonstrates different border-bottom of texts.

スポンサーリンク

さいごに



長い記事にお付き合い頂きましてありがとうございました。。。

 。。。。で、理想的なデザインはどうなんでしょう?? 

すごく難しい質問です(汗

今現在もトレンドが変わっていくなか、大事にすべきは「可読性 (リーダビリティ) 」「レスポンシブ」かと思います。つまり閲覧するユーザーがどのようなデバイス、ブラウザでも読みやすくある事。本来は利用されうるOS、ブラウザソフト、設定フォントを意識したレイアウトが望ましいとされています。

自分もまだ実践途中ではありますが、「レスポンシブデザイン」を意識すると以下が理想的だと思えます。

【フォントサイズ】
・bodyでデフォルトフォントサイズを%で指定。(フォントサイズのベースは 14〜16 px)
・ヘッダH2,H3,H4,も同様に想定(remもしくはem)指定
・要素毎に相対(remもしくはem)で要素内のデザインに応じて指定。

【フォントカラー】
・白色の背景に、黒色の文字のオーソドックスな組み合わせ、しかしビビッドな色味の強い色ではなく、#222 ~ #555 のようにコントラストを下げた色

【フォント行間】
line-height の設定値は 1.5 ~ 2.0程度が望ましい。

referrence
http://www.htmq.com/style/font-size.shtml
https://www.w3schools.com/cssref/pr_dim_line-height.asp

コメント