テキストに関するプロパティ3

今回からは、フォント自体からは離れて、テキストについての設定をみていきます。前回名前だけ出てきたline-heightも一応その範疇に入ります。

line-heightは、一行の高さを指定できます。テキストというのは行の積み重ねであると考えられるので（けっこう後で詳しく解説します）、1行がどれくらいの高さであるかをCSSで決めることができます。

指定方法がいろいろありますが、よく使うのは数値やパーセンテージです。これらは、フォントサイズを基準にした相対値です。つまり、100%にするとフォントサイズと同じになりますから、余裕がないということです。それ以上にすると、1行にフォントサイズ以上の高さが確保されるので余裕ができ、行のテキストの間に隙間ができます。逆に100%より小さいと、一行がフォントの高さのぶんだけ確保されず、文字と文字とが重なってしまいます。

また、数値というのもパーセンテージとほぼ同じで、パーセンテージの100%は数値の1にあたります。例えば数値で1.2とすると、120%と同じ意味です。

長さというのは、フォントサイズを基準にした相対的な長さではなく絶対的な指定で、多少使いにくいかもしれません。

line-heightの値による違いをサンプルで見てみましょう。

文字の多いページでは、line-heightを大きめに設定してやると行間があいて読みやすくなります。

さて、残りのnormalとnoneですが、normalとは、なんか自動でちょうどいい感じに調整してくれるというものです。ブラウザに任せるということですね。だいたい1.0～1.2の間くらいで調整されるそうです。またnoneというのは、親のフォントサイズに合わせられます。

しかし実際、ブラウザは面倒で調整なんかしてくれないのか、現在（2013年4月）はだいたいはnormalは1と同じです。

noneは、次の動作が特徴的です。

<p>ここは一行目<br>
<span style="font-size:x-large">大きい文字</span>ここは普通の文字</p>

<p>ここは一行目<br>
<span style="font-size:x-large;line-height:none">大きい文字</span>ここは普通の文字</p>

（残念ながら2013年4月現在、line-height:noneに対応しているブラウザがありませんでした。対応ブラウザが出たら詳しく解説します）

テキストの装飾

テキストの装飾の基本に、線を引くことがあります。下線、上線、真ん中線(?)の3種が使えます。線を引くには、text-decoration-lineプロパティを使います。

noneは線を引かない状態、underlineは下線、overlineは上線、line-throughは真ん中線です。例えばtext-decoration-line:underline overline（上下に線）のように複数組み合わせることが可能です。

さらに、このtext-decoration-colorプロパティで線の色を指定できます。

デフォルトのcurrentColorというのは、詳しくは色のページで解説していますが、「文字色と同じ色」ということです。

さらにtext-decoration-styleプロパティで線の種類を指定できます。値の意味は以下のとおりです。

solid

普通の線。

double

二重線。

dotted

点線。

dashed

破線。

wavy

波線。

そして、ここまで紹介した3つのプロパティを1つにまとめられる便利なプロパティがあります。text-decorationです。

これを使えば、たとえば下に青色の波線を引きたければ次のようにします。

<p style="text-decoration:underline blue wavy">ここは段落です</p>

このtext-decoration-skipプロパティは、text-decorationによる下線、上線、抹消線が、文字以外のものに対してどう対応するかを示すものです。

具体的には、例えばimg要素を使うことで、文章中に画像を混ぜることができます。そこに線が引いてある場合、画像にも線をひくか、あるいは画像はとばして線をひかないかを決めることができます。

text-decoration-skipは、線を引きたくない部分を指定します。つまりtext-decoration-skipによって指定された部分は線が引かれません。noneとは、一切飛ばさない、つまり全部線を引くということです。他の値の意味は以下のとおりです。

objects

画像など、文中に文字以外のものがある場合にそれをとばします。

spaces

スペース（空白）はとばします。

ink

逆に文字はとばします。

edges

文字の端部分だけとばします。

box-decoration

ボックスに線を引く場合に、マージンやパディング・枠線には線をひきません。ボックスについて詳しくは第二章で解説します。

「1つ以上」ですから、たとえばtext-decoration-skip:objects spaces edgesのようにすることも可能です。

またinkは、文字がある部分に線を引かないという、text-decorationの意味がないじゃないかと思うようなプロパティですが、次の場合に役に立ちます。

長々と線が引いてある中で、一部分だけ線をひきたくない場合を考えましょう。実は次のようにしてもうまくいきません。

<p style="text-decoration:line-through">ここは線を引く<span style="text-decoration:none">ここは引かない</span>ここも線を引く</p>

なぜ中でtext-decoration:noneとしているのに線が引かれるかというと、text-decorationによる線は、子要素全部に一括で引いてしまうもので、子がtext-decoration:noneとしても子が自分の線を持たないというだけで、親の線は健在ですから引かれてしまうのです。

こういう場合にtext-decoration-skip:inkとすると線が引かれません。

<p style="text-decoration:line-through">ここは線を引く<span style="text-decoration-skip:ink">ここは引かない</span>ここも線を引く</p>

（案の定現在はどのブラウザも対応していません）

なぜtext-decoration-skipはうまくいくかというと、text-decoration-skipは、他のtext-decoration系のように「自分の線を設定する」プロパティではなく、「自分に引かれる線を設定する」プロパティなのです。ですから、親によって引かれる線に対しても設定を適用できるのです（もちろん、自分で引いた線にも同様に設定適用できます）。

次に、下線についてはさらに詳しい設定ができるので紹介します。

このtext-underline-positionプロパティは、text-decorationによる下線の位置を調整するのに使います。以下の意味があります。

auto

なんか良い感じの位置にします。ふつうalphabeticと同じ位置になりますが、他の文字と重なったりする場合はもっと下になります。

alphabetic

アルファベットのベースラインの位置にします。j,p,qなどは線の下にはみでます。英語ではこの位置がふつうです。

under

全部の文字の下にします。どのアルファベットも下線の下にははみでません。

leftとright

これらは縦書きのときに、下線を左と右のどちらに引くか指定できます。

上の値の説明によると、「underのみ」や「left,rightのみ」も可能ですが、underのみの場合はunder leftと解釈され、leftやrightのみのときも自動的にunderが追加されます。alphabeticのときは、left,rightは使えません。

とりあえず、alphabeticとunderの違いを以下に示します（ブラウザが対応していればだけど・・・）。

(2013年4月現在、対応ブラウザはありませんでした。すべてalphabeticのような表示になります。）

テキストの装飾 その2

今までは、線を引くことでテキストを装飾しました。ここからは、点をつけてテキストを装飾する方法です。文字の上につけて強調する点を圏点といいます。text-emphasis-styleプロパティを使います。

デフォルトのnoneは当然、強調点をつけない（強調しない）という意味です。

キーワードというのは、以下に示すキーワードから選びます。

dot

ドットです。具体的には•←これです。

circle

ドットよりは大きな丸です。●←という感じです。

double-circle

二重の丸です。◉←こんな記号です。

triangle

三角です。▲←こんな感じです。

sesame

これは、読点みたいな記号です。﹅←こういう記号です。

さらに、これらのキーワードに付け加えて、以下の二種類から一つ選びます。これは中を塗りつぶすかどうかを示します。

filled

塗りつぶします。

open

塗りつぶしません。

たとえばドットは、塗りつぶすと•ですが塗りつぶさないと◦になります。例えば中が空白のドットを使いたければ、text-emphasis-style:dot openとします。

また最後の文字列というのは、すきな文字を自分で指定できます。文字列はHTMLの属性のように、"！"や'？'のように、""または''で囲みます。text-emphasis-styleに指定する文字は一文字である必要があります。

これもやはり例をみてみましょう。

このプロパティを使うと圏点の色を指定できます。

実は、text-emphasis系はtext-decoration系と似た構成をしています。text-emphasisプロパティで2つをまとめて指定できます。

さらにもうひとつ、text-emphasis-positionを使うと圏点の位置を変更できます。

overとは文字の上、underとは文字の下です。また、rightは右でleftは左です。

つまり、上下と左右を両方指定してやらなければならないということです。

上下はいいとして、左右なんて何に使うのかと思うかもしれませんが、これは縦書用です。つまり横書きのときは上下を参照して、縦書きのときは左右を参照するのです。

どうせ縦書きになんてしないからrightやleftはいらないと思うかもしれませんが、上下も左右も必須です。省略はできないことになっています。なぜでしょうね。

さて、ここまでろくに使えないようなプロパティばかり紹介してきました。なんなんだ今回はという感じですね。

しかし最後のは使えます。それも結構有用です。これは注目しましょう。

text-shadowとは、次のように文字に影をつけられるものです。

<p style="font-size:1.8em;text-shadow:3px 4px 5px #888888">影つきの文字</p>

値の「長さ2～3個に続いて色」の組み合わせが、影一つを表します。ですから、この組み合わせを複数書けば、影が複数できます。

ひとつのペアは、長さ2～3つと色から構成されます。最初から2つは、順に影の横オフセット、縦オフセットです。つまり上の例だと、影の位置は、本体の文字より3px右、4px下ということです。

3つ目の値は、影のぼかしです。影はその文字と同じ形ですが、影のぼかしの長さぶんだけ端から影が広がります。長さは2～3個といいましたが、2個しか指定しない場合はこのぼかしが0pxという扱い、つまりぼかし無しになります。

ぼかしの違いによる影の違いを以下に示します。

ぼかしが大きいほど影が薄くぼやけて広がることがわかります。

ちなみに紹介が遅れましたが、最後にある色は影の色です。

また、一つ目と2つ目の値は負の値を示すことができ、その場合左や上に影がいきます。最後に、複数の影をつける例を示します。

<p style="font-size:1.8em;text-shadow:-5px -5px 3px #ff0000, -2px -2px 3px #00ff00, 4px 4px 3px #0000ff">影つきの文字</p>

出典:CSS Text Decoration Module Level 3 W3C Working Draft 3 January 2013, CSS3 module: line W3C Working Draft 15 May 2002