テキストの表現方法

Home>HTML>テキストの表現方法

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

見出しを書く

その部分がタイトルであることを示します。
見出しには、大見出しの他に中見出し・小見出し・・・というように、細分化され複数種類が存在します。HTMLでは、6段階に分けて表現することができるようになっています。
見出しはh1からh6の要素で表します(hはheadlineの頭文字)。数字が大きくなるほど下位の見出しとなります。
見出し要素は、<h1>~</h1>のように、</>で閉じるまでの間を見出しと見なします。

見出しのサンプルページ

原則として、h1要素は1つの文書ファイルに1つだけ配置します。
下位の見出し要素は、それより上位の見出し要素の1つ下の要素を配置します。つまり、

<h1>文書の大見出し</h1>
<h2>文書の中見出し1</h2>
<h3>文書の小見出し1</h3>
<h2>文書の中見出し2</h2>
<h3>文書の小見出し2</h3>

という順序で配置する、ということです。

<h2>文書の中見出し</h2>
<h1>文書の大見出し</h1>
<h3>文書の小見出し</h3>

という順序で配置することは、文書構造上、間違っています。

SEO適切な見出しの配置を心掛ける

見出しは、その文書の読みやすさを左右します。これは、読者に対してだけではなく、検索エンジンにインデックスされる際にも重要なポイントとなります。

そのため、適切な順序での配置、適切なテキストの記述を心掛けましょう。難しく考えることはありません。普通の文書を作成するときと同じように、他者が読んでわかるような配置、その見出し以下に表示される本文の要約となっている内容を記述すればいいのです。

→詳しくは「Information:SEO(検索エンジン最適化)とは」をご覧下さい。

CSS見出しの大きさ等を変更する

デフォルトでは、上位の見出しになるほどフォントは大きく表示されます。
その大きさはブラウザによってまちまちで、場合によってはサイトのデザインを乱す原因となります。この場合、CSSを用いてフォントの大きさや行間、マージン等を変更することができます。
ただし、極端な変更(上位の要素が下位の要素より見辛いなど)は、読者に読み辛さを実感させるだけでなく、検索エンジンスパムと見なされて、検索結果の順位を下げることにもなりかねませんので、やめましょう。

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

→h要素は「HTML:要素リファレンス:h」をご覧下さい。

PageTop

本文を書く(段落)

p要素を使います(pはparagraphの頭文字)。
<p>~</p>までの間を一つの段落とみなします。この部分に本文を書きます。
テキストは、p要素を使わず、他の要素も指定しなくても記述することはできますが、HTMLは文書構造を示すための言語なので、見出しの次に本文が来る場合には必ずp要素を使いましょう。

p要素は、デフォルトで、p要素の上下にマージン(空白)をとります。
紙ベースの文章では段落は、1文字下げて書いたところから始まりますが、HTMLでは、上下に空白をとることで、明確に「ここからここまでが段落」ということを示します。

CSS】段落の見栄えを変更する

なお、p要素のマージンを利用して字下げを行うためだけに、何もテキストのない段落を連発するのはやめましょう。

<p> </p>
<p> </p>
<p> </p>

上記のように何もない段落を並べて、3行下げるというような表示の仕方は、文書の構造上不自然です。
次のテキストを表示するまでに空白を空けたい場合には、以下のようにCSSを使いましょう。

<p style="margin-bottom:100px;">本文を書きます</p>

このほか、段落のフォントの大きさ、行間、字間についてもCSSで操作できます。

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

→p要素は「HTML:要素リファレンス:p」をご覧下さい。

PageTop

強制的に改行する/改行しない

改行

br要素を使います。<br>を挿入した場所から、強制的に改行して表示されます。

文書構造上では、ただの改行はあまり好ましくないかもしれませんが、読者にとっては、読みやすい文章になります。
コンピュータのディスプレイは、自然光ではないため、目に負担をかけます。長時間見ていると目が疲れることもよくあります。
目が疲れる要素として、テキストの大きさや色の他に、改行もなく延々とテキストが続いている場合が挙げられます。
一つまたは二つの文章が終わったら(読点まで来たら)改行する、という位の頻度で改行すると読みやすさが向上します。

→詳しくは「HTML:要素リファレンス:br」をご覧下さい。

改行禁止

nowrap属性または、CSSのwhite-space:nowrapを指定します。

テキストはブラウザの右側に達したら、自動的に改行するようになっています。
通常は、自動的に改行することで困ることはありませんが、表組みの内容のテキストを改行させたくない場合などで、たまに使うことがあります。

※そのテキストを内包している要素に、明示的に幅を指定している場合には、ブラウザの右端にいっても改行しないことがあります。

pre要素に記述したテキストも改行されませんが、改行禁止とは意味が異なるので、改行を禁止させるために使うのはお薦めできません。

nowrap属性とCSS

<p nowrap>このテキストはブラウザの右端までいっても改行しません</p>

nowrap属性は、各要素の開始タグに直接指定します。
ただし、nowrap属性はW3Cによると非推奨属性とされているので、CSSで指定した方がいいでしょう。

→詳しくは「CSS:プロパティリファレンス:white-space」をご覧下さい。

間違った改行

改行の使い方や表現として、以下のようなものはやめましょう。

p要素を改行に使う

p要素を使うと上下にマージンがとられることから、行間をあけるためだけに、文章の途中でp要素を閉じて、次のp要素から続きの文章を書くというような方法は、文書の構造上は間違っています。

<p>この文章の途中で行間をとりたいので、</p>
<p>このように文章の途中でp要素を閉じました。</p>

このような場合、CSSでbr要素にマージンを設定します。

<p>この文章の途中で行間をとりたいので、<br style="margin-bottom:50px">
このように文章の途中でbr要素にCSSを適用しました。</p>

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

br要素を連続して行間をあける

p要素ではなく、br要素を使って行間を空けようと試みる人に見られます。

<br><br><br>

このように、改行を連続して行うことで、3行分空けていることがあります。これもHTMLの文書構造上は好ましくありません。
また、これにより段落を表現しようとするのであれば、p要素を使いましょう。

行間を空けたいのであれば、上記「p要素を改行に使う」で述べたように、CSSでマージンを設定します。

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

ソースコードの改行や空白をそのまま表示する

pre要素を使います。

<pre>PRE要素を使うと、
ソース上で改行すれば、そのまま改行されて表示され、
    空白を入れれば、そのまま空白が空けられて表示されます。
	タブによる空白も反映されますが、
なるべく使わないようにしましょう。</pre>

上記のpre要素内では、br要素を挿入しなくても、HTMLソース上で改行するだけでブラウザ上でも改行して表示されます。

pre要素は、主にプログラム等のソースコードを示す際に使われます。

pre要素内ではソースに入力したものがそのまま表示されますが、タブによるインデントはブラウザによって表示が変わる場合があるので、使わない方が無難です。

→詳しくは「Information:タブとは」をご覧下さい。

→pre要素は「HTML:要素リファレンス:pre」をご覧下さい。

PageTop

本文中で強調したい文字をマークする

強い強調

strong要素を使います。
文書中で、強調したい言葉をマークすることで、本文でも特に強調したい箇所であることを示します。
ブラウザ上では、太字で表現されます。また、検索エンジンに対しては、その箇所が文書中でも特に重要な部分であることを示します。

<strong>strong要素で囲った部分は強調表現されます。</strong>

strong要素を2重、3重にすることで、その中でもより強調している、というニュアンスをもたせることができます。

strong要素で<strong>重要な文章</strong>であることを示します。
strong要素の中でも2重に表現することで、<strong><strong>より重要であること</strong>を示します。<strong>警告文などでよく見られます。</strong></strong>

→strong要素は「HTML:要素リファレンス:strong」をご覧下さい。

やや強い強調

em要素を使います。
文書中で、強調したい言葉をマークすることで、本文でも強調したい箇所であることを示します。
ブラウザ上では、イタリック体(斜め文字)で表現されます。また、検索エンジンに対しては、その箇所が文書中でも重要な部分であることを示します。
em要素は、strong要素よりも、若干弱い意味合いの強調表現とされています。

em要素は<em>やや強い強調</em>を表現するときに用いられます。

strong要素、em要素の使い分けについては、様々な方が見解を述べています。
個人的には、em要素はあまり使わなくていいのではないかと考えています。strong要素よりも弱いという意味において、SEOにおける位置づけも曖昧ですし、デフォルトでブラウザでイタリック体で表示されるというのは、日本語ではとても読みづらくなってしまいます(もちろん、CSS等で見栄えを変更することは可能ですが)。

→em要素は「HTML:要素リファレンス:em」をご覧下さい。

効果のない強調

b要素やi要素のことです。
これらは上記strong要素やem要素と、ブラウザ上での表示は同じですが、文書構造上は意味を持たない要素とされています。
W3Cは非推奨とはしていませんが、テキストを修飾するだけの要素であるため、単純に太字・イタリック体にしたいのであれば、CSSを使った方がいいでしょう。

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

HTMLを入力する際、<strong>~</strong>や<em>~</em>と入力するよりも、<b>~</b>や<i>~</i>と入力した方が楽なので、使ってしまいがちですが、b要素を使うならばstrong要素を、i要素を使うならばem要素を使いましょう。

b要素

<b>~</b>で囲んだテキストを太字で表示します。
しかし、文書構造上は、その文字が太字であることに意味はありません。
通常、太字で表示したい場合というのは、その部分を強調したいときですので、b要素を使うのであれば、strong要素を使いましょう。

<b>b要素を使って表示しています。</b>
<strong>strong要素を使って表示しています。</strong>

→b要素は「HTML:要素リファレンス:b」をご覧下さい。

i要素

<i>~</i>で囲んだテキストをイタリック体(斜め文字)で表示します。
しかし、文書構造上は、その文字がイタリック体であることに意味はありません。
通常、イタリック体で表示したい場合というのは、その部分を目立たせたいということなので、i要素を使うのであれば、em要素を使いましょう。

<i>i要素を使って表示しています。</i>
<em>em要素を使って表示しています。</em>

→i要素は「HTML:要素リファレンス:i」をご覧下さい。

PageTop

リスト表示する

リスト表示は、項目を箇条書きにするときに使われます。
文書中では、(1)リスト1、(2)リスト2、(3)リスト3というように表現するよりも、

  1. リスト1
  2. リスト2
  3. リスト3

と表現した方が、見やすくなりますので、文章中でポイントを数点挙げる場合などは、積極的にリストを使っていきましょう。ただし、多すぎる項目は好ましくありません。最大でも8項目以内に収まるようにした方がSEOの観点でも無難です。

番号なしリスト

ul要素を使います。
各リスト項目が順不同であることを示します。

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
</ul>

上記のように、各リスト項目を表示するには、ul要素の中にli要素を配置します。

  • リスト1
  • リスト2

リストのマークを変える

番号なしリストの場合、デフォルトで丸いマークがリストの前に付加されます。
このマークを変更することも可能です。変更するにはCSSを使います。

→詳しくは「CSS:プロパティリファレンス:list-style-type」をご覧下さい。

→ul要素は「HTML:要素リファレンス:ul」をご覧下さい。

番号つきリスト

ol要素で表現します。
各リスト項目が上から順に並んでいることを示します。

<ol>
  <li>リスト1</li>
  <li>リスト2</li>
</ol>

上記のように、書くリスト項目を表示するには、ol要素の中にli要素を配置します。

  1. リスト1
  2. リスト2

途中の番号から始める

デフォルトでは1から始まりますが、任意の数字から開始させることができます。
ol要素にstart属性を指定すると、その数から開始させることができます。
li要素にvalue属性を指定すると、それ以降はその数から数えさせることができます。

<ol start="20">
  <li>リスト20</li>
  <li value="30">リスト30</li>
  <li>リスト31</li>
</ol>
  1. リスト20
  2. リスト30
  3. リスト31

start属性とvalue属性はいずれも、HTML4.01では、W3Cは非推奨としていますが、現時点でHTML5では非推奨ではなくなっているようなので、使うことは問題ないかもしれません。

→ol要素は「HTML:要素リファレンス:ol」をご覧下さい。

PageTop

横罫線を引く

これはテキストの表現ではありません。
横に罫線を引くための要素で、hr要素を使います。
HTML4.01では横罫線を視覚的にひいているだけ、という意味合いだったのが、HTML5では、文脈の区切りという役割が持たされているようです。

<hr style="width:100px;">


サンプルでは、横幅100pxの区切り線を引いています。
横幅などは、CSSで設定することができます。

→詳しくは「HTML:要素リファレンス:hr」をご覧下さい。

PageTop

その他の文書構造の表現の仕方

ここまでの要素を使えば、HTML文書のテキストを表現することは可能です。
以下の要素は、連絡先など特別な意味合いを持たせるための要素です。

連絡先

address要素を使います。
address要素中に書かれた内容は、そのページの制作者の連絡先や問合せ先を示していることになります。
名前、住所、電話番号、メールアドレスなどを記述しましょう。
通常ブラウザではイタリック体(斜め文字)で表示されます。

<address>このページの連絡先
作者名 TEL xxx-xxx-xxxx</address>

address要素はブロックレベルで表示されるので、内部にブロックレベルの要素を配置することはできません。

→詳しくは「HTML:要素リファレンス:address」をご覧ください。

引用文

引用には短い引用と長い引用の2種類があります。

短い引用

q要素を使います。
q要素はインライン要素なので、文章の一部をq要素で囲って、その部分が引用であることを示すことができます。

q要素にcite属性を指定すると、その引用したもとのHTML文書のURLを明示できます。

このように<q>文書の途中で、その箇所が引用であることを示すときにq要素を使う</q>ことがW3Cによって定義されています。

→詳しくは「HTML:要素リファレンス:q」をご覧ください。

長い引用

blockquote要素を使います。
blockquote要素は、ブロックレベルで引用文であることを示します。つまり、p要素など、段落をまとめて引用文として使っている場合などに用います。

<blockquote>blockquote要素は、段落全体が引用であることを示す要素です。</blockquote>

→詳しくは「HTML:要素リファレンス:blockquote」をご覧ください。

出典(参照)

cite要素で表現します。
cite要素で囲った部分には、出典や参照先のタイトルや名前を記述します。

この文書の出典は<cite>W3C</cite>の公式文書をご覧ください。

→詳しくは「HTML:要素リファレンス:cite」をご覧ください。

略語

その部分が略語であることを示します。略語の表現には、単純に略語にした場合と、頭文字のみで言葉にした略語の2種類があります。

略語

abbr要素を使います。
abbrは、頭文語以外の略語である場合に使用します。
title属性には、正式名称を入力します。略語の上にマウスカーソルをあわせると、正式名称がポップアップ表示されます。

<abbr title="東京ディズニーランド">TDL</abbr>は遊園地です。

→詳しくは「HTML:要素リファレンス:abbr」をご覧ください。

頭文語

acronym要素を使います。
頭字語とは、単語の頭文字をつないで、それ自体で一つの言葉として読めるものをさします。単純に頭文字だけをつなげても、TDLのように各アルファベットを読み上げなければならない場合には、abbr要素を使います。

例えば、<acronym title="Association of South East Asian Nations">ASEAN</acronym>は一つの単語のように読めるので頭字語になります。

→詳しくは「HTML:要素リファレンス:acronym」をご覧ください。

追加と削除

文書を後から追加したり、削除したりして、その履歴を残したい場合に使います。
通常、間違えたりした場合、または情報が新しくなって今までの情報を更新したい場合には、前の文章を消して新しい文章を書き加えますが、「今まではこのような見解で、これからはこの見解になる」というような場合には、追加と削除の要素を使います。

追加

ins要素を使います。
ins要素で囲ったテキストは、その部分が後から追加されていることを示します。
ブラウザでは下線が引かれたりイタリック体(斜め文字)で表現され、その部分を目立たせます。

<ins cite="関連情報のURL" datetime="追加した日時">注意事項:この部分は後から追記したことを示します。</ins>

→詳しくは「HTML:要素リファレンス:ins」をご覧ください。

削除

del要素を使います。
del要素で囲った部分は、後から削除されたことを示します。通常、訂正した場合などはもとの文を消して新しい文言に差し替えてしまうものですが、修正したことを履歴として見せるためにdel要素を使います。
del要素で囲った部分は、通常ブラウザでは取り消し線が引かれます。

<del cite="関連情報のURL" datetime="削除した日時">この部分は後から削除したことを示します。</del>

→詳しくは「HTML:要素リファレンス:del」をご覧ください。

用語説明

用語であることを示す

dfn要素を使います。
dfn要素で囲んだテキストが、その後に続く説明文の対象となる用語であることを示しています。
ブラウザでは、イタリック体(斜め文字)で表示されます。これは英語の書籍などで、はじめて出てきた重要な単語などがイタリック体で表現されることに由来するのではないかと思います。

<dfn>dfn要素</dfn>は、その後に続く説明文の対象となっている用語であることを示します。

→詳しくは「HTML:要素リファレンス:dfn」をご覧下さい。

用語集を表示する

dl要素の範囲内に、dt要素とdd要素を使って、用語とその説明からなる、用語集をつくります。
dt要素は用語名、dd要素はその説明を示します。これらは対応している必要はなく、dt要素とdd要素の数が対応していなかったり、dd要素がdt要素の先に来ても問題ありません。
また、dl要素はブロックレベル要素になるので、p要素など、ブロックレベルの途中では使えません。
なお、ブラウザの表示では、dd要素はインデントされて表示されます。

<dl><dt>用語名</dt>
<dd>用語の説明文</dd> </dl>

→詳しくは「HTML:要素リファレンス:dl」をご覧下さい。

プログラム

キーボードから入力する文字であることを示す

kbd要素を使います。
kbd要素は、その文字がキーボードなどから入力する文字であることを示します。
ブラウザでは通常、等幅フォントで表示されます。

<kbd>enter</kbd>と入力してください。

→詳しくは「HTML:要素リファレンス:kbd」をご覧下さい。

出力サンプルを示す

samp要素を使います。
samp要素で囲ったテキストは、プログラムから出力されるテキストのサンプルとして扱われます。
ブラウザでは通常、等幅フォントで表示されます。

<samp>出力サンプルです。</samp>

→詳しくは「HTML:要素リファレンス:samp」をご覧下さい。

ソースコードを示す

code要素を使います。
code要素は、内包するテキストがプログラムコード(HTML、CSSでも可)であることを示します。
ブラウザでは通常、等幅フォントで表示されます。

<code><p>これはHTMLのソースコードです。</p></code>

→詳しくは「HTML:要素リファレンス:code」をご覧下さい。

変数・引数であることを示す

var要素を使います。
var要素は、囲ったテキストがプログラムで使われる変数や引数であることを示します。
ブラウザでは通常、イタリック体(斜め文字)で表示されます。

変数<var>iltt</var>に数値を代入します。

→詳しくは「HTML:要素リファレンス:var」をご覧下さい。

ルビを振る

ruby要素を使います。
ruby要素で囲んだテキストにフリガナをふります。
ルビを振りたい言葉をrb要素で囲み、フリガナをrt要素で示し、ルビに対応していないブラウザの場合にカッコ表示にするのがrp要素です。

<ruby><rb>東雲</rb><rp>(</rp><rt>しののめ</rt><rp>)</rp>の物流センターに荷物を送ります。

→詳しくは「HTML:要素リファレンス:ruby」をご覧下さい。

コメントアウトする

コメントアウトとは、そこに書かれているテキストは本文とは関係ないことを示すものです。ブラウザにはその部分は何も表示されません。

<!-- コメントアウトです -->

<!--から、-->までの間はブラウザ等では無視されます。

PageTop

フォントの設定を変える

フォントの設定は、文書構造に意味を与えるものではなく、見栄えを定義するものなので、basefont要素やfont要素などで設定できますが、基本的にはCSSで設定するべきです。

ページ全体のフォントを設定する

basefont要素を使う場合

basefont要素で囲った部分のフォントの種類、色、サイズを一括指定できます。

<basefont size="5" color="#FF0000">文字のサイズと色を設定。</basefont>

→詳しくは「HTML:要素リファレンス:basefont」をご覧下さい。

ただし、basefont要素は、非推奨要素なので、body要素にCSSを適用するようにしましょう。

<p style="font-size:18pt;color:#ff0000;">CSSで文字のサイズと色を設定。</p>

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

個別にフォントを設定する

font要素で囲った部分のフォントの設定を変更することができます。

<font color="#0000ff" size="5">font要素で文字の色とサイズを設定。</font>

→詳しくは「HTML:要素リファレンス:font」をご覧下さい。

ただし、font要素は非推奨要素なので、CSSで設定するようにしましょう。

<span style="font-size:18pt;color:#0000ff">CSSで文字の色とサイズを設定。</span>

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

リンクテキストを設定する

body要素に設定できます。

<body link="未キャッシュの色" vlink="既キャッシュの色" alink="アクティブリンクの色">~</body>

  • 未キャッシュの色とは、まだアクセスしたことがないリンク先へのリンクの色
  • 既キャッシュの色とは、既にアクセスしたことがあるリンク先へのリンクの色
  • アクティブリンクの色とは、リンクをクリックしたときのリンクの色

ただし、テキストの色をHTMLで指定するのは非推奨とされているので、CSSによって設定するべきでしょう。CSSであれば、適用範囲を細かく設定することが可能です。

a:link{ // 未キャッシュの色
  color:#0000FF;
}
a:vlink{ // 既キャッシュの色
  color:#00FF00;
}
a:active{ // アクティブリンクの色
  color:#CCCCCC;
}
a:hover{ // マウスオーバー時の色
  color:#FF0000;
}

→詳しくは「CSS:テキストを修飾する」をご覧下さい。

PageTop

特殊文字の表示方法

「<>"&」や、「©」といった文字は、特殊文字と言われます。
これらの文字は、普通に入力して表示すると、例えば「<」ならば、要素の開始(終了)タグとブラウザが誤認することがあります。
こういったことを避けるために、ソースコード上では「&○○;」と書くと、それに割り振られた文字が出力されるようになっています。これを実体参照といいます。
以下にはよく使う特殊文字の、実体参照での書き方を示します。

文字 実体参照
数値文字参照 文字実体参照
" &#34; &quot;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
&#9824; &spades;
&#9827; &clubs;
&#9829; &hearts;
&#9830; &diams;
© &#169; &copy;
® &#174; &reg;

→詳しくは、「Information:特殊文字一覧表」をご覧下さい。

PageTop

テキストの表示に関する操作

表示位置の指定

中央に表示する

center要素または、CSSのtext-align:centerを使います。
center要素で囲ったテキスト等を中央揃えに表示します。
ただし、center要素は非推奨なので、CSSを使った方がいいでしょう。

<center>中央に表示</center>

→center要素は「HTML:要素リファレンス:center」をご覧下さい。

→text-alignプロパティは「CSS:プロパティリファレンス:text-align」をご覧下さい。

行における表示位置

横位置を指定する場合は、align属性または、CSSのtext-alignプロパティを使います。
縦位置を指定する場合、valign属性または、CSSのvertical-alignプロパティを使います。
align属性やvalign属性は非推奨とされているので、なるべくCSSを使いましょう。

align="left" align="center" align="right"
valign="top" valign="middle" valign="bottom"

→詳しくは「CSS:プロパティリファレンス:text-align」をご覧下さい。

→詳しくは「CSS:プロパティリファレンス:vertical-align」をご覧下さい。

行間・字間の設定

行間や字間を変える要素はありません。
これらの文書の見栄えを左右するものは、CSSによって実現します。

行間は、line-heightプロパティ、字間は、letter-spacingプロパティで設定します。

行間を250%、字間を2にしてみると、
このような表示になります。

→line-heightプロパティは「CSS:プロパティリファレンス:line-height」をご覧下さい。

→word-spacingプロパティは「CSS:プロパティリファレンス:letter-spacing」をご覧下さい。

関連リンク

よく読まれている記事

UpDate:2009-11-7