リファレンスインデックスへ

テキスト・フォント周りをキレイに見せるCSS、13選！

有限会社タグパンダ
喜安 亮介
2010/1/29

使いこなしてテキスト・フォント周りをキレイに見せよう！

　無数にあるCSS/スタイルシート プロパティを大まかに分類し、分類したプロパティを1つずつ紹介していく本連載。初回は、テキスト・フォント周りのプロパティを13個紹介します。

今回紹介するCSS/スタイルシート プロパティ：

　本企画で対象とするバージョンは現在多く使われている、CSS 2.1とします。CSS/スタイルシートの基本的な使い方に関しては、下記連載をご参照ください。

いまさら聞けないCSS／スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？
「デザインハック」コーナー

　また本企画では、プロパティの参照方法のコードを、標準JavaScriptによるDOMでの参照方法に加え、jQueryのセレクタを使った参照方法も掲載してます。jQueryと、そのセレクタについては、下記記事をご参照ください。

jQuery、プラグイン、jQuery UI、Web経由のCDNとは
CSSの書き方も分かるjQueryプラグイン実践活用法（1）　基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説

text-alignプロパティ

　ブロック要素内のインライン要素の配置の方法を定義する際に使います。left（左ぞろえ）、center（中央ぞろえ）、right（右ぞろえ）、justify（両端ぞろえ）という値が用意されています。

　例えば、コンテンツに対してテキストを真ん中にそろえたいときは、「center」と記述すると、中央ぞろえで表示できます。

詳しくはコチラ　text-align 要素の位置のそろえ方を指定できるtext-alignプロパティ

text-decorationプロパティ

　テキストに対して下線などの線を引く際に使います。underline（下線を引く）、overline（上線を引く）、line-through（中線を引く）、blink（点滅させる）という値が用意されています。

　下線を引いてテキストを目立たせたいときは、underlineと記述すると、指定したテキストに下線が引かれます。

詳しくはコチラ　text-decoration テキストに飾りを付けるtext-decorationプロパティ

text-indentプロパティ

　段落の先頭にインデントを付ける際に使います。このプロパティの値は、「px」「%」「em」などで指定します。

　例えば、1文字分インデントさせたい場合は1emと記述することで、段落の先頭が1文字分字下げできます。

　ただし、改行された2行目以降はインデントされません。

詳しくはコチラ　text-indent 段落の1行目にインデントを付けるtext-indentプロパティ

text-transformプロパティ

　テキストを大文字のみで表示するか（uppercase）、もしくは小文字のみで表示するか（lowercase）、各単語の先頭文字のみを大文字で表示するか（capitalize）という3通りの見せ方を選択できます。

　日本語テキストでは、英字テキストのように大文字小文字がないので、このプロパティから得られる効果はありません。

詳しくはコチラ　text-transform 大文字にするか小文字するかを指定できるtext-transformプロパティ

white-spaceプロパティ

　空白スペースや改行の表示方法を定義する際に使います。コーディング経験のある方は体験済かと思いますが、デフォルトの仕様では、空白スペースや改行は無視されて表示されます。

　しかし、このプロパティを用いることによって、「空白スペースはそのままで、改行はしない」などの変更が可能になります。

詳しくはコチラ　white-space 半角スペース、改行をどう扱うかを指定できるwhite-spaceプロパティ

word-spacingプロパティ

　単語と単語の間隔を指定する際に使います。単語間のスペースを「px」「%」「em」などの単位を使って細かく調節できます。

　ただし、その単語と単語の区別をするのは、半角スペースで区切られているか否かなので、日本語で使用する際には、あまり向いていません。

詳しくはコチラ　word-spacing 単語と単語の間隔を変更できるword-spacingプロパティ

letter-spacingプロパティ

　文字と文字の間隔を指定する際に使います。デザインソフトなどでよくあるカーニングほど細かな調節はできませんが、「px」「%」「em」などの単位を使ってある程度細かく調節できます。

　このように、文字間をうまく調節することで、Web上でも可読性などを向上できます。

詳しくはコチラ　letter-spacing 文字と文字の間隔を変更できるletter-spacingプロパティ

fontプロパティ

　フォント周りのプロパティの指定をまとめて記述できます。まとめることで、記述量を削減でき、便利なプロパティです。

　ただ、なんでも構わず記述していいわけではなく、必須項目や、記述の順番などの指定があるので、注意が必要です（下記参照）。

  1. font-style、font-variant、font-weight（順不同）
  2. font-size（必須）
  3. line-height（前方にスラッシュが必要）
  4. font-family（必須）

詳しくはコチラ　font フォント周りの指定をまとめるfontプロパティ

font-familyプロパティ

　フォントの種類を指定する際に使います。この値には、複数のフォント名を指定でき、先に記述したものが優先的に表示されます。あらかじめいくつかのフォントを指定しておくことで、制作者側の意図にあったフォントを表示できます。

詳しくはコチラ　font-family どの文字で表示させるかを指定できるfont-familyプロパティ

font-sizeプロパティ

　フォントの大きさを指定する際に使います。このプロパティには、キーワード（small、largeなど）や「px」「%」「em」など、指定方法がいろいろあります。「%」「em」といった相対サイズを使う方法が、アクセシビリティの観点からよく用いられます。

詳しくはコチラ　font-size 文字サイズを変更するfont-sizeプロパティ

font-styleプロパティ

　フォントをイタリックや斜体で表示する際に使用します。normal（正体）、italic（イタリック体）、oblique（斜体）という値が用意されています。

　斜体はフォントを斜めにしただけです、それに多少のデザインを加えたものがイタリック体と呼ばれるようです。しかし、日本語フォントの場合はイタリック体が用意されていないことがほとんどでイタリック体と斜体の違いを意識する必要はないでしょう。

詳しくはコチラ　font-style 文字をイタリック体や斜体で表示するfont-styleプロパティ

font-variantプロパティ

　スモールキャップで表示する際に使用します。分かりやすくいうと、小文字で入力したテキストを小文字サイズの大文字に変換して表示できるというものです。

　ただし、日本語フォントには小文字はないので効果はありません。

詳しくはコチラ　font-variant フォントをスモールキャップに変更できるfont-variantプロパティ

font-weightプロパティ

　フォントの太さを変更する際に使用します。値には、あらかじめ定義されている数値（100～900までの100ごとの数値）や、キーワード（bold）など多くの指定方法がありますが、一般的にbold以外は使わない傾向にあります。

　理由としては、フォントの太さが用意されてないので、そこまで細かく指定できないからです。

詳しくはコチラ　font-weight 文字の太さを変更できるfont-weightプロパティ

【関連記事】

Webブラウザ別CSSハック＆フィルタTips
Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック＆フィルタTipsをお届けします
「デザインハック」コーナー
D89 Web標準HTMLタグリファレンス
Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします
「デザインハック」コーナー
WebデザイナのためのHTMLチューニング入門
Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう
「デザインハック」コーナー

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。


「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ