<<PREV | TOP | NEXT>>

文字揃え

last modified 5th/Oct. 2000

Transitional DTD では、 Heading 要素の各々や、段落を表す Paragraph 要素などに付いて、内容文字列の水平位置揃えを指定する align 属性を指定できます。これは廃止予定とされる非推奨属性です。

Heading 要素の属性定義;

<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n , %events --
  %align;                              -- align, text alignment --
  >

%align; の定義;

<!ENTITY % align "align (left|center|right|justify)  #IMPLIED"
                   -- default is left for ltr paragraphs, right for rtl --
  >
align = left|center|right|justify [CI]
周囲との関係における当該要素内容文字列の水平配置を指定します。可能な値は次の4つ;

テキスト揃えの場合の初期値は左寄せの left とされています。右から始まる言語の場合は右寄せになります。

非推奨属性を与えた例;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>align 属性の例</title>
  </head>
  <body>
    <h1 align="justify">見だし要素とは</h1>
    <p align="center">見出し要素はブロック要素ですが、
    その子要素にはインライン要素しか成り得ません。</p>
  </body>
</html>

この H1 要素と P 要素には、非推奨属性である水平方向文字揃いを指定する align 属性が与えられています。

align 属性値 center は文字を中央揃えに指定するので、上の P 要素の内容文字列は表示枠の中央に揃えて配置されます。

H1 要素に与えられた align 属性の値 justify は水平方向いっぱいに広がり、文字が等幅に指定します。

align 属性は多くの要素に与える事が出来る便利な属性ですが、廃止予定の非推奨属性ですから、可能な限りはスタイルシートで実現する様に御奨めします。

CSS の 'text-align'

CSS では、テキスト揃えを 'text-align'プロパティで指定します。

text-alignleft | right | center | justify | <string> | inherit

<string> は引用符付きの任意の文字列で、表のセル内の文字列を、指定した文字を基準(軸)にして揃えます。

CSS による指定の例;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>STYLE 要素の例</title>
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
    <!--
    h1 { text-align: justify }
    p { text-align: center }
    -->
    </style>
  </head>
  <body>
    <h1>見だし要素とは</h1>
    <p>見出し要素はブロック要素ですが、
    その子要素にはインライン要素しか成り得ません。</p>
  </body>
</html>

これで、当該文書中に現れる全ての P 要素に中央揃いが指定され、同様に全ての H1 要素に等幅配置が指定される事になります。

ピンポイントで特定の H1 要素にだけ指定する場合は、次の様にも記述できます;

CSS による指定の例;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <title>style 属性の例</title>
    <meta http-equiv="content-style-type" content="text/css">
  </head>
  <body>
    <h1 style="text-align: justify">見だし要素とは</h1>
  </body>
</html>

他に、H1 要素に id 属性を与えて一意的に特定する方法や、 class 属性を与えてスタイルが適用される範囲を狭める方法などが考えられます。

逆に、一連の文書群において共通にスタイルを適用したい場合は、外部スタイルシートを利用します。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO