テキスト

Since: 25th/May/2002

HTML 文書の文章の表示を変えてみましょう。本稿でも、前節の HTML 文書 yonagahime.html をサンプルにして説明します。

yonagahime.html のソースは次のようになっています。

<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>「夜長姫と耳男」を読む</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen" />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>「夜長姫と耳男」を読む</h1>
<p>昭和２７年初出、３０年に没した安吾晩年の作品に分類できます。自己模倣の罠には
まっている恨みもありますが、美しい小品です。</p>
<p>この短編のキーワードは「イノチ」。「イノチ」とは呪うほど強く望むこと、苦悶す
る衒気が描かれています。人は、ギリギリの、のっぴきならない場に居続ける事に疲れ
て、ややもすると悟達や諦念、成熟に安堵する。呪詛、苦悶、己の欲望から目を背けてし
まう。それは自己韜晦であり、己の魂の簒奪です。</p>
<p>安吾は「欲望」、「堕落」を称揚するかのようですが、それは「人間」を描く事であ
り、人品の卑しさを嫌悪し、魂の純潔を尊ぶことです。そしてあらゆる形の愛に収斂して
いくものです。</p>
<address>
Copyright (C) 2002 SUGAI, Manabu. All Rights Reserved.
</address>
</body>
</html>

外部スタイルシート ango.css は次のようになっています：

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace }

また、次の画像ファイルを保存して利用しています：

図： rindou5.gif

以上の三つのファイルを作成していない方は、三つのファイルを同じディレクトリに作成／保存してください。

図：保存した三つのファイルの Windows 上のアイコン

yonagahime.html をブラウザで開いて表示を確認してください。

段落の字下げ - `text-indendt`

印刷物の場合、段落の一文字目はへこませて表現します。これを、「字下げ」、「インデント」と呼びます。CSS では、任意の要素に対して、 text-indent によって指定できます。

p 要素のインデントを一文字分指定してみましょう。ango.css を以下のように編集／保存してください。

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace }

yonagahime.html をブラウザで開くと、段落の一文字目が１文字分へこんでいることが確認できます。

`text-indent` で指定できるパラメタ
`<length>`	相対単位 `em` 単位：当該要素のフォントの大きさを 1 とする単位 `ex` 単位：当該要素の小文字の x の高さを 1 とする単位 `px` 単位：ピクセル数で解像度に依存する絶対単位 `in` 単位：インチ `cm` 単位：センチメートル `mm` 単位：ミリメートル `pt` 単位：ポイント（1/72 インチ） `pc` 単位：ピカ（12 ポイント）
<percentage>	% 単位。当該要素の表示可能な幅に対する比率
`inherit`	親要素での指定を継承

文字の整列 - `text-align`

文字の、左揃え (left)、中央揃え (center)、右揃え (right)、均等割付 (justify) を指定できます。CSS では、 text-align で指定します。

h1 要素文字列を中央揃え、 address 要素を右揃えに指定しましょう。ango.css を以下のように編集／保存してください。

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right }

yonagahime.html をブラウザで開くと、h1 要素は中央に、 address 要素は右揃えになっていることが確認できます。

`text-align` で指定できるプロパティ
`left`	左揃え
`right`	右揃え
`center`	中央揃え
`justify`	均等割付
`inherit`	親要素での指定を継承

但し、多くのブラウザで、 justify の指定は無効になります。

文字の間隔 - `letter-spacing`

行間を広げている場合、文字同士の間隔を広げた方が、ゆったりした印象になります。CSS では、 letter-spacing で指定します。

p 要素の文字間隔を文字の大きさの 0.2 倍に指定してみましょう。ango.css を以下のように編集／保存してください。

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em;
    letter-spacing: 0.2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right }

yonagahime.html をブラウザで開くと、段落の文字間隔が少し変化していることが確認できます。確認できない場合は、 letter-spacing: 0.5em で試してください。

`letter-spacing` で指定できるプロパティ
`normal`	そこで使われているフォントの標準
`<length>`	実際に指定できる単位の種類と定義は別項参照
`inheri`	親要素での値を継承

テキストの装飾 - `text-decoration`

文字列に対して、下線、上線などの装飾を施すことが出来ます。

h1 要素の文字列を、下線と上線で装飾してみましょう。ango.css を次のように編集／保存してください。

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center;
    text-decoration: underline overline }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em;
    letter-spacing: 0.2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right }

yonagahime.html をブラウザで開くと、h1 要素の文字列に上線と下線が付いていることが確認できます。

`text-decoration` で指定できるプロパティ
`none`	装飾なし
`underline`	下線
`overline`	上線
`line-through`	取り消し線
`blink`	点滅
`inherit`	親要素での指定を継承

テキスト

段落の字下げ - text-indendt

文字の整列 - text-align

文字の間隔 - letter-spacing

テキストの装飾 - text-decoration

段落の字下げ - `text-indendt`

文字の整列 - `text-align`

文字の間隔 - `letter-spacing`

テキストの装飾 - `text-decoration`