ReferenceHomeWeb制作資料CSSTopHTMLCSSjQueryPHPPluginsWordPressフォント/テキスト作成日:2018年1月28日タイポグラフィ書体には色々なデザインがあり、同じ文章でも書体が異なれば印象が変わります。良いのは、読む側に書体を意識させないことで、読んでいて書体が気になる場合は、書体の選択が不自然と言うことになります。デザインにおいては、以下を考慮して書体を選択すると良いようです。本文:可読性セリフとサンセリフ欧文書体には大きく分けて「セリフ書体」と「サンセリフ書体」があります。和文書体では、明朝体とゴシック体に相当します。セリフ書体(serif)セリフ書体は、文字の端に小さな飾り(セリフ)が付いているのが特徴で、また横線が細くなっています。セリフ書体は、書籍の本文などに使われています。サンセリフ書体(sans-serif)サンセリフ書体は、小さな飾り(セリフ)がない(sans-serif:フランス語でセリフがないという意味)書体で、線の太さが均一なのが特徴です。ページの本文で使われています。明朝体セリフ書体と同じように文字の端に小さな飾りが付いていて、横線が細いのが特徴です。書籍の本文や見出しなどに使われています。MS明朝などがあります。ゴシック体セリフがなく、線幅がほぼ均一なのが特徴です。可読性が高く、広告や看板、スクリーン表示に使われます。代表的なフォントには、ヒラギノ角ゴ、游ゴシック体、メイリオ、MSゴシックなどがあります。プロパティは使用せず、個別のプロパティを個々に指定するのが一般的です。フォント関連プロパティは継承されます。font-family(フォントの種類)特定のフォントの種類(font-family)を指定しない場合、ブラウザの標準フォントが適用されます。場合は、ブラウザによって「ヒラギノ明朝」、「ヒラギノ角ゴシック」と分かれます。先に記述したフォントが優先的に適用されます。プロパティは、フォント名をカンマ区切りで優先順に複数指定し、最後に総称ファミリーである「serif」「sans-serif」「cursive」「fantasy」「monospace」のいずれかを指定します。フォント名にスペースが含まれる場合は、必ず引用符「"」または「'」で囲む必要があります。等幅フォントこれら(総称ファミリー)を指定する場合は、引用符「"」または「'」をつけてはいけません。一般的には、明朝体を指定している場合は「serif」を、ゴシック体を指定している場合は「sans-serif」を最後に指定しておきます。フォント名で指定したフォントが利用できない場合に使用されます。メイリオ」のように日本語と英語の両方を指定しています。ブラウザのバージョンによって英語表記(または日本語表記)で認識してくれたり、しなかったりするためで、両方指定しておいた方が確実です。欧文フォントを適用させたい場合は、日本語フォントよりも先に指定する必要があります。これは、日本語フォントにもアルファベットが含まれるので、そちらが優先されてしまうためです。以降からは、游書体の游明朝体と游ゴシック体が標準インストールされています。指定するときの名前が異なります。場合、本文としては少し弱い印象(ブラウザによっては、かすれたり太さが不均一に表示)になります。場合は游ゴシックを使わないように、以下のように指定すると良いかも知れません。実際に試して確認する必要があります。9以降)を使う場合に指定します。キーワードが必要になります。は太さの種類があるため日本語フォントとのバランスを調整する必要があるようです。外すのも1つのオプションです。font-style(フォントのスタイル)以下の値が指定できます。一般的にセリフ書体を斜めにしたものを「イタリック体」と呼んでいて、斜めにしつつも見易くデザインされています。サンセリフ書体では「oblique」と呼ばれ、単に書体を斜めにしたものです。斜体font-weight(フォントの太さ)以下の値が指定できます。きざみの数値で指定可能。実際には細かな指定は実現できない。class="bold">太く表示</span>されます。「bold」を指定すると太く表示されます。font-size(フォントの大きさ)以下の値が指定できます。長さ:単位を使った値で指定します。一般的には、「em」「px」等の単位を使って指定します。パーセンテージ:親要素のフォントサイズ(親要素がない場合は規定値「medium」)に対するパーセンテージで指定します。絶対サイズ:「small」「medium」「large」などのキーワードを使って指定します。ブラウザやユーザーの設定に依存します。相対サイズ:「larger」「smaller」のキーワードを使って指定します。プロパティでは絶対単位の「pt」や事実上の絶対単位である「px」ではなく、相対単位の「em」を使うのが望ましいとされています。そのサイズが固定されていて、フォントはそのサイズで表示されます。サイズ自体の値を持っていない代わりに、親要素のサイズによって決定されます。これは依存する親要素のサイズが変わるとそれに応じてサイズが変わることを意味します。pixel(ピクセル)。ビューポートの「幅」か「高さ」の長い方の100分の1HTMLファイルに、フォントサイズを指定しないでテキストを配置した際に表示されるのがブラウザのデフォルトの設定です。要素のフォントサイズは100%(16px)で表示されます。以下は、ブラウザの初期値のフォントサイズと各単位の関係です。いう意味ではなく、ブラウザのデフォルトのフォントサイズと単位の関係を表しています)。要素のフォントサイズを変更すると、絶対単位で指定した文字のフォントサイズは変わりませんが、相対単位で指定した文字は影響を受け、フォントサイズが変わります。rem)で指定した文字はフォントサイズが変わるのがわかります。em)で指定したフォントサイズが変わるのがわかります。16px)を基準とします。その要素の親要素で用いられているフォントサイズと一致します)。