タイトル画像
サイトタイトル画像

改行、文字の飾りつけ,箇条書き

改行、文字の飾りつけ,箇条書き

Web ページを華やかに表現するためのタグが幾つかあります。

全て覚える必要はありません。利用しながら必要なときに覚えていきましょう。

【注意】
「HTML」の規格を策定している World Wide Web Consortium(W3C)によると、「HTML5」ではbig要素、strike要素は廃止予定です。

要素 説明 代価方法
big フォントを大きく表示 スタイルシート
strike テキストに取消線を引く del、s

文書の体裁を整えるためのタグ

HTML文書を書き直そう」でも幾つか新しいタグが出てきましたが、文書を華やかに表現する上で便利なタグがあるので紹介します。

<hr>

罫線をレンダリングする

<p>~</p>

1つの段落を表す

<br>

現在のテキスト行を強制的に区切る(改行する)

<address>~</address>

文書の主要部分に関する問い合せ先を示す

長い文書を記述する場合、改行を挿入したり、段落を変えたいことがあると思います。

その時、上記のようなタグを用いれば、文書の体裁を整えることが可能です。文書の体裁を整えるためのタグ

なお、1つの段落を表す<p>タグは、「終了タグ」は省略可能です。

文字の飾りつけを行うタグ

文字の飾りつけのを行う「物理的なタグ」としては以下のようなものがあります。

<b>~</b>

ボールド体(太字)でレンダリング

<i>~</i>

イタリック体(斜体)でレンダリング

<s>~</s><strike>~</strike>

取り消し線を引いてレンダリング

<u>~</u>

下線を引いてレンダリング

また、文字の飾りつけのを行う「論理的なタグ」としては以下のようなものがあります。

<strong>~<strong>

より強い強調(最強調)を示す

<em>~<em>

強調を示す

この、「物理的なタグ」とは、「太字」「斜体」のように直接的な意味を持つものです。一方、「論理的なタグ」とは、「強調」「最強調」のという意味的な意味を持つものです。

実際に利用した文字の形は次の図のようになります。

文字の飾りつけ

多くのブラウザでは「強調」「最強調」の意味として、「太字」「斜体」で表現していますが、文字を大きくしたり、下線を引いたりして「強調」を表現するブラウザも存在する可能性があります。

ただ、「物理的なタグ」は、ウェブアクセシビリティ を考慮し推奨されていないため、最近は利用されていません。

【注意】
加えて「HTML」の規格を策定している World Wide Web Consortium(W3C)によると、「文字の飾りつけを行う物理的なタグ」は廃止予定タグに
なっています。これらのタグはスタイルシートで代価することが推奨されています。

箇条書き(リスト)を指定するタグ

「箇条書き」を指定するタグについて説明します。これは、順序立てて説明を行う場合に便利です。

<ul>
<li> 項目A </li>
<li> 項目B </li>
<li> 項目C </li>
<li> 項目D </li>
<li> 項目E </li>
:   :
<li> 項目Z </li>
</ul>

まず、箇条書きにすることを指定する<ul>
を書きます。
次に、箇条書きの項目の先頭に<li>
つけます。
これで、テキストが字下げされ、
先頭に「disc」がつきます。

もし<ul>
<ol>へ変えると「disc」が「アラビア数字」へ
変化します。
<ul>は Unordered List の略です。

「箇条書き」したい時、このタグを用いれば体裁にこだわる必要なく、自動で体裁が決まります。なお、リスト項目を定める<li> の終了タグは省略可能です。

箇条書き

disc」や「アラビア数字」よる箇条書き以外に、「type属性」を与える事で次のようなスタイルにもできます。

type属性値 番号付けスタイル
disc 塗りつぶした小さい円 discdiscdisc、…
circle 小さく丸い枠 circlecirclecircle、…
square 小さく四角い枠 squaresquaresquare、…
1 アラビア数字 1、2、3、…
a アルファベット小文字 a、b、c、…
A アルファベット大文字 A、B、C、…
i ローマ数字小文字 i、ii、iii、…
I ローマ数字大文字 I、II、III、….

これは、<ul type="type属性">~</ul>の形で利用できます。

【注意】
「HTML」の規格を策定している World Wide Web Consortium(W3C)によると、type属性は推奨さていません。
リストスタイルはスタイルシートで制御することが推奨されています。

「上つき文字」「下つき文字」「ルビ」などの指定

「数式」を記述する場合や、フランス語などでは適切なレンダリングのために「上つき文字」や「下つき文字」が必要です。これには次のタグを使用します。

<sup>~</sup>

上つき文字

<sub>~</sub>

下つき文字

また、子供向けコンテンツなどでは、難しい漢字には「ルビ」をふりたい人もいるかもしれません。これには次のタグを使用します。

<ruby>~</ruby>

ルビをふる

<rp>~</rp>

未対応ブラウザのための括弧(Ruby Parentheses)を指定

<rt>~</rt>

ルビ文字列(Ruby Text)を指定

上記のような表現がしたい場合は、以下のような書き方をします。

上付き文字 Y=2X<sup>2</sup>+3X

下付き文字 T<sub>E</sub>X

<ruby><rp></rp><rt>うぐいす</rt><rp></rp></ruby>

実際に、ブラウザに表示すると次のようになります。文字の飾りつけ

なお、<ruby>タグが対応していないブラウザでは、「鶯(うぐいす)」と表示されます。

【注意】
この<ruby>タグは日本から W3C に提案されて審議されていたものです。仕様自体は 2001年5月31日に XHTMLモジュール定義「Ruby Annotation」としてW3C勧告になっています。
スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 1999/09/30)