<<PREV | TOP | NEXT>>

テキスト

Since: 25th/May/2002; Last Modified: 24th/Dec./2006

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

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!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>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 第一帖 桐壺 第一段</title>
</head>

<body>

<h1>源氏物語</h1>

<h2>第一帖 桐壺</h2>

<h3>第一段</h3>

<div class="section">
<p>いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき
際にはあらぬが、すぐれて時めきたまふありけり。</p>

<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>

<p>上達部、上人なども、あいなく目を側めつつ、「いとまばゆき人の御おぼえなり。唐
土にも、かかる事の起こりにこそ、世も乱れ、悪しかりけれ」と、やうやう天の下にもあ
ぢきなう、人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いと
はしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ
。</p>

<p>父の大納言は亡くなりて、母北の方なむいにしへの人のよしあるにて、親うち具し、
さしあたりて世のおぼえはなやかなる御方がたにもいたう劣らず、なにごとの儀式をもも
てなしたまひけれど、とりたててはかばかしき後見しなければ、事ある時は、なほ拠り所
なく心細げなり。</p>
</div> <!-- END section -->

<address>
Copyright (C) 2006 SUGAI, Manabu. Some rights reserved.
</address>

</body>
</html>

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

@charset "utf-8";

* { font-style: normal;
    font-weight: normal;
    font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
    color: #ccf }
h1 { font-style: italic;
    font-size: 3em;
    font-family: cursive }
div.section { background : #ccf;
    color: navy }
p { line-height: 1.5;
    font-family: serif }
p:first-child { font-weight: bold }
p:first-child:first-letter { color: red;
    font-size: 2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace }

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

rindou5.gif
図： rindou5.gif

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

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

段落の字下げ - text-indendt

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

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

@charset "utf-8";

* { font-style: normal;
    font-weight: normal;
    font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
    color: #ccf }
h1 { font-style: italic;
    font-size: 3em;
    font-family: cursive }
div.section { background : #ccf;
    color: navy }
p { line-height: 1.5;
    font-family: serif;
    text-indent: 1em }
p:first-child { font-weight: bold;
    text-indent: 0 }
p:first-child:first-letter { color: red;
    font-size: 2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace }

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

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

文字の整列 - text-align

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

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

@charset "utf-8";

* { font-style: normal;
    font-weight: normal;
    font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
    color: #ccf }
h1 { font-style: italic;
    font-size: 3em;
    font-family: cursive;
    text-align: center }
div.section { background : #ccf;
    color: navy }
p { line-height: 1.5;
    font-family: serif;
    text-indent: 1em }
p:first-child { font-weight: bold;
    text-indent: 0 }
p:first-child:first-letter { color: red;
    font-size: 2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace;
    text-align: right }

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

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

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

文字の間隔 - letter-spacing

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

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

@charset "utf-8";

* { font-style: normal;
    font-weight: normal;
    font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
    color: #ccf }
h1 { font-style: italic;
    font-size: 3em;
    font-family: cursive;
    text-align: center }
div.section { background : #ccf;
    color: navy }
p { line-height: 1.5;
    font-family: serif;
    text-indent: 1em;
    letter-spacing: 0.2em }
p:first-child { font-weight: bold;
    text-indent: 0 }
p:first-child:first-letter { color: red;
    font-size: 2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace;
    text-align: right }

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

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

テキストの装飾 - text-decoration

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

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

@charset "utf-8";

* { font-style: normal;
    font-weight: normal;
    font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
    color: #ccf }
h1 { font-style: italic;
    font-size: 3em;
    font-family: cursive;
    text-align: center;
    text-decoration: overline underline }
div.section { background : #ccf;
    color: navy }
p { line-height: 1.5;
    font-family: serif;
    text-indent: 1em;
    letter-spacing: 0.2em }
p:first-child { font-weight: bold;
    text-indent: 0 }
p:first-child:first-letter { color: red;
    font-size: 2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace;
    text-align: right }

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

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

<<PREV | TOP | NEXT>>

Copyright © 2002 SUGAI, Manabu. All Rights Reserved.
2002-05-25 Published, 2006-12-24 Revised.