トップページ  > HTML Living Standard  > <pre>

★HTML Living Standard リファレンス

<pre> …… フォーマットされたテキストを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<pre>タグは、フォーマットされたテキストのブロックを表す際に使用します。 pre要素の構造は、なかに配置される要素によってではなく、テキストの書式設定や記述形式によって示されます。

例えば、空白行や字下げなどで書式設定されたテキスト、ソースコード、アスキーアート、詩など を表示する際にpre要素を使用できます。

開始タグ <pre> の直後にある先頭の改行文字は、HTML構文では削除されます。

pre要素とcode要素・samp要素・kbd要素の併用

コンピューターコードを表す際には、pre要素とcode要素を併用できます。 コンピューター出力を表す際には、pre要素とsamp要素を併用できます。 ユーザーが入力するテキストを表す際には、pre要素とkbd要素を併用できます。

■使用例

以下のサンプルは、スクリプトのコードを表すために、pre要素とcode要素を併用しています。

HTMLソース

<p>これは <code>Panel</code> 関数です:</p>

<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
↓↓↓

ブラウザ上の表示

これは Panel 関数です:

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}

■使用例

以下のサンプルは、コンピュータ出力とユーザー入力を表すために、 pre要素とsamp要素kbd要素を併用しています。 コマンド入力でプレイするゲームの一場面を想定したものですが、 コンピュータからのメッセージをsamp要素、 ユーザーが入力するコマンドをkbd要素で指定しています。

HTMLソース

<pre><samp>あなたは大きな白い家の前にいます。
小さな郵便ポストがあります。

></samp> <kbd>open mailbox</kbd>

<samp>郵便ポストをあけました:
チラシが一枚あります。

></samp></pre>
↓↓↓

ブラウザ上の表示

あなたは大きな白い家の前にいます。
小さな郵便ポストがあります。

> open mailbox

郵便ポストをあけました:
チラシが一枚あります。

>

■使用例

以下のサンプルは、言葉の配置を保持する目的でpre要素を使用しています。 pre要素は、HTMLソース中のホワイトスペースや改行を保ってそのまま表示します。

HTMLソース

<pre>       ちいさな

       てのひら

         でも

      しあわせは

       つかめる
</pre>
↓↓↓

ブラウザ上の表示

       ちいさな

       てのひら

         でも

      しあわせは

       つかめる

pre要素の代替表現

pre要素を使用する際には、読み上げブラウザや点字ディスプレイなどで書式設定が失われた際に、 書式設定済みのテキストがどのように表現されるかについて、あらかじめ配慮しておくことが推奨されています。

例えば、アスキーアートは書式が失われると意味が分からなくなります。 そのような場合、テキストによる説明などの代替表現を用意しておくと、 より普遍的にユーザーがアクセスしやすくなるでしょう。

■関連項目

  • <pre> …… フォーマットされたテキストを表す
  • <code> …… コードを表す
  • <var> …… 変数を表す
  • <samp> …… コンピューターからの出力サンプルを表す
  • <kbd> …… ユーザー入力を表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ