preタグの使い方【HTMLリファレンス】

2024-06-01

この記事では、HTMLのpreタグについて詳しく解説します。

preタグは、テキストのフォーマットをそのまま保持して表示するために使われる便利なタグです。

この記事を読むことで、preタグの基本的な使い方や具体的な使用例、スタイリング方法、注意点、そして他のタグとの違いについて理解することができます。

目次から探す

preタグとは

preタグの基本概要

preタグは、HTMLにおいてプレーンテキストをそのまま表示するためのタグです。

通常のHTMLでは、複数のスペースや改行は無視されますが、preタグを使用すると、テキスト内のスペースや改行がそのまま表示されます。

これにより、コードスニペットや詩、ASCIIアートなど、フォーマットを保持したまま表示したいテキストに適しています。

preタグの基本的な使い方

シンタックス(構文)

preタグの基本的な構文は以下の通りです。

<pre>
  表示したいテキスト
</pre>

この構文の中に記述されたテキストは、スペースや改行を含めてそのまま表示されます。

基本的な例

以下に、preタグを使用した基本的な例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>preタグの例</title>
</head>
<body>
  <pre>
    これはpreタグの例です。
    スペースや改行がそのまま表示されます。
    
    例えば、コードスニペットを表示するのに便利です。
  </pre>
</body>
</html>

このコードをブラウザで表示すると、以下のように表示されます。

preタグの属性

preタグにはいくつかの属性がありますが、最も一般的に使用されるのは以下の属性です。

class: CSSクラスを指定します。
id: 一意の識別子を指定します。
style: インラインスタイルを指定します。

例えば、class属性を使用してスタイルを適用する場合の例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>preタグのスタイル例</title>
  <style>
    .code-block {
      background-color: #f4f4f4;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <pre class="code-block">
    これはスタイルが適用されたpreタグの例です。
    背景色とボーダーが追加されています。
  </pre>
</body>
</html>

このコードをブラウザで表示すると、preタグ内のテキストに背景色とボーダーが適用されます。

以上が、preタグの基本概要と基本的な使い方です。

次のセクションでは、preタグの具体的な使用例について詳しく見ていきます。

preタグの具体的な使用例

コードの表示

preタグは、特にプログラミングコードを表示する際に非常に便利です。

コードのインデントや改行をそのまま保持して表示するため、読みやすさが向上します。

HTMLコードの表示

HTMLコードを表示する場合、preタグとcodeタグを組み合わせることが一般的です。

以下はその例です。

<pre><code>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
</body>
</html>
</code></pre>

このコードをブラウザで表示すると、以下のように見えます。

CSSコードの表示

CSSコードも同様にpreタグとcodeタグを使って表示できます。

<pre><code>
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
    text-align: center;
}
</code></pre>

このコードをブラウザで表示すると、以下のように見えます。

JavaScriptコードの表示

JavaScriptコードも同様に表示できます。

<pre><code>
function greet() {
    alert('こんにちは、世界！');
}
greet();
</code></pre>

このコードをブラウザで表示すると、以下のように見えます。

テキストのフォーマット保持

preタグは、テキストのフォーマットをそのまま保持して表示するため、詩や歌詞、ASCIIアートなどの表示にも適しています。

詩や歌詞の表示

詩や歌詞のように、特定のフォーマットを保持したい場合にpreタグを使用すると便利です。

<pre>
春はあけぼの
やうやう白くなりゆく山際
少しあかりて
紫だちたる雲の細くたなびきたる
</pre>

このコードをブラウザで表示すると、以下のように見えます。

ASCIIアートの表示

ASCIIアートもpreタグを使って表示することで、フォーマットを崩さずに表示できます。

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

このコードをブラウザで表示すると、以下のように見えます。

このように、preタグはコードの表示や特定のフォーマットを保持したテキストの表示に非常に有用です。

次のセクションでは、preタグのスタイリングについて詳しく見ていきます。

preタグのスタイリング

preタグは、デフォルトではブラウザによって特定のスタイルが適用されますが、CSSを使ってカスタマイズすることができます。

ここでは、preタグのスタイリング方法について詳しく解説します。

CSSを使ったスタイリング

フォントの設定

preタグ内のテキストのフォントを変更するには、CSSのfont-familyプロパティを使用します。

以下は、preタグ内のテキストを等幅フォントに設定する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>preタグのフォント設定</title>
    <style>
        pre {
            font-family: "Courier New", Courier, monospace;
        }
    </style>
</head>
<body>
    <pre>
        これは等幅フォントで表示されるテキストです。
        1234567890
        ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </pre>
</body>
</html>

背景色とテキスト色の設定

preタグの背景色やテキスト色を変更するには、background-colorやcolorプロパティを使用します。

以下は、背景色をライトグレー、テキスト色を黒に設定する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>preタグの背景色とテキスト色の設定</title>
    <style>
        pre {
            background-color: #f0f0f0;
            color: #000000;
        }
    </style>
</head>
<body>
    <pre>
        これは背景色がライトグレー、テキスト色が黒の例です。
    </pre>
</body>
</html>

マージンとパディングの調整

preタグの周囲の余白(マージン)や内側の余白(パディング)を調整するには、marginやpaddingプロパティを使用します。

以下は、マージンとパディングをそれぞれ10pxに設定する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>preタグのマージンとパディングの調整</title>
    <style>
        pre {
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <pre>
        これはマージンとパディングが10pxに設定された例です。
    </pre>
</body>
</html>

スクロールバーの追加

preタグ内のテキストが長くなると、スクロールバーを追加して表示領域を制限することができます。

以下では、横スクロールバーと縦スクロールバーの追加方法について説明します。

横スクロールバーの追加

横スクロールバーを追加するには、overflow-xプロパティを使用します。

以下は、横スクロールバーを追加する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>横スクロールバーの追加</title>
    <style>
        pre {
            width: 300px;
            overflow-x: auto;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <pre>
        これは非常に長いテキストです。これは非常に長いテキストです。これは非常に長いテキストです。これは非常に長いテキストです。
    </pre>
</body>
</html>

縦スクロールバーの追加

縦スクロールバーを追加するには、overflow-yプロパティを使用します。

以下は、縦スクロールバーを追加する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>縦スクロールバーの追加</title>
    <style>
        pre {
            height: 100px;
            overflow-y: auto;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <pre>
        これは非常に長いテキストです。
        これは非常に長いテキストです。
        これは非常に長いテキストです。
        これは非常に長いテキストです。
        これは非常に長いテキストです。
        これは非常に長いテキストです。
        これは非常に長いテキストです。
        これは非常に長いテキストです。
    </pre>
</body>
</html>

これで、preタグのスタイリング方法についての解説は終了です。

CSSを使ってpreタグをカスタマイズすることで、より見やすく、使いやすい表示を実現することができます。

preタグの注意点とベストプラクティス

過剰な使用の回避

preタグは非常に便利なタグですが、過剰に使用することは避けるべきです。

preタグは主にコードやフォーマットを保持したいテキストを表示するために使用されますが、通常のテキストや段落には適していません。

過剰に使用すると、ページの読みやすさやデザインが損なわれる可能性があります。

例えば、以下のようにpreタグを使いすぎると、ページ全体が見づらくなります。

<pre>
これはpreタグの例です。
このようにフォーマットが保持されます。
</pre>
<pre>
しかし、過剰に使用すると
ページ全体が見づらくなります。
</pre>

このような場合、通常の段落タグ(pタグ)や他の適切なタグを使用することを検討してください。

アクセシビリティの考慮

preタグを使用する際には、アクセシビリティにも注意が必要です。

スクリーンリーダーを使用するユーザーにとって、preタグ内のテキストがどのように読み上げられるかを考慮する必要があります。

適切なラベルや説明を追加することで、アクセシビリティを向上させることができます。

例えば、コードブロックを表示する場合、codeタグと組み合わせて使用し、適切なラベルを追加することが推奨されます。

<pre>
<code>
function helloWorld() {
    console.log("Hello, world!");
}
</code>
</pre>

また、aria-label属性を使用して、スクリーンリーダーに対して追加の情報を提供することもできます。

<pre aria-label="JavaScriptの例">
<code>
function helloWorld() {
    console.log("Hello, world!");
}
</code>
</pre>

SEOへの影響

preタグの使用はSEO(検索エンジン最適化)にも影響を与える可能性があります。

検索エンジンはpreタグ内のテキストを通常のテキストと同じようにインデックスしますが、フォーマットが保持されるため、内容が適切に解析されないことがあります。

特に、コードや特殊なフォーマットのテキストが多い場合、検索エンジンがページの内容を正確に理解できない可能性があります。

そのため、preタグを使用する際には、重要なキーワードや説明を通常のテキストとして提供することが重要です。

例えば、以下のようにpreタグの前後に説明を追加することで、検索エンジンに対してページの内容を明確に伝えることができます。

<p>以下はJavaScriptの例です。</p>
<pre>
<code>
function helloWorld() {
    console.log("Hello, world!");
}
</code>
</pre>
<p>このコードは、コンソールに `Hello, world!` と表示します。</p>

このようにすることで、検索エンジンはページの内容をより正確に理解し、適切にインデックスすることができます。

preタグの代替手段

preタグは、テキストのフォーマットをそのまま保持して表示するために非常に便利ですが、他にも似たような目的で使用されるタグがいくつか存在します。

ここでは、preタグの代替手段としてよく使われるcodeタグ、kbdタグ、sampタグについて解説します。

codeタグとの違い

codeタグは、プログラムコードを示すために使用されるタグです。

preタグと組み合わせて使うことが多いですが、単独でも使用できます。

codeタグはインライン要素であり、preタグのようにテキストのフォーマットを保持するわけではありません。

例: preタグとcodeタグの組み合わせ

<pre><code>
function helloWorld() {
    console.log("Hello, World!");
}
</code></pre>

この例では、preタグがテキストのフォーマットを保持し、codeタグがプログラムコードであることを示しています。

例: codeタグの単独使用

<p>以下はJavaScriptのコードです: <code>console.log("Hello, World!");"</p>

この例では、codeタグがインラインで使用され、プログラムコードを示しています。

その他のタグとの比較

kbdタグ

kbdタグは、ユーザーが入力するテキストを示すために使用されます。

例えば、キーボードショートカットやコマンドラインの入力を示す場合に使われます。

例: kbdタグの使用

<p>保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押してください。</p>

この例では、kbdタグがキーボードショートカットを示しています。

sampタグ

sampタグは、プログラムやシステムからの出力を示すために使用されます。

例えば、エラーメッセージやコマンドの出力を示す場合に使われます。

例: sampタグの使用

<p>次のエラーメッセージが表示されました: <samp>File not found</samp></p>

この例では、sampタグがシステムからの出力を示しています。

よくある質問(FAQ)

preタグとcodeタグの違いは？

preタグとcodeタグはどちらもコードを表示するために使用されますが、それぞれの役割と特徴には違いがあります。

preタグ: preタグは preformatted text の略で、テキストのフォーマットをそのまま保持して表示します。

改行やスペースもそのまま表示されるため、コードや詩、ASCIIアートなどのフォーマットを保持したい場合に適しています。

codeタグ: codeタグは code element の略で、プログラムコードを示すために使用されます。

codeタグ自体はフォーマットを保持しませんが、通常はpreタグと組み合わせて使用されます。

<pre>
<code>
function helloWorld() {
    console.log("Hello, World!");
}
</code>
</pre>

このように、preタグとcodeタグを組み合わせることで、コードのフォーマットを保持しつつ、プログラムコードとして明示することができます。

preタグ内での改行はどう扱われる？

preタグ内での改行は、そのまま表示されます。

通常のHTMLでは改行は無視されますが、preタグ内では改行も含めてテキストがそのまま表示されるため、フォーマットを保持したい場合に非常に便利です。

例:

<pre>
これは
改行を
含むテキストです。
</pre>

実行結果:

このように、preタグ内での改行はそのまま表示されるため、テキストのフォーマットを保持したい場合に適しています。

preタグの中でHTMLタグを使うことはできる？

preタグの中でHTMLタグを使用することは可能ですが、注意が必要です。

preタグ内で使用するHTMLタグは、そのまま表示されることが多いため、意図しない表示になることがあります。

例:

<pre>
<p>これは段落タグです。</p>
</pre>

実行結果:

このように、preタグ内で使用したHTMLタグはそのまま表示されるため、通常のHTMLタグのように機能しません。

preタグ内でHTMLタグを使用する場合は、エスケープシーケンスを使用して表示することが一般的です。

例:

<pre>
<p>これは段落タグです。</p>
</pre>

実行結果:

このように、エスケープシーケンスを使用することで、preタグ内でもHTMLタグを正しく表示することができます。

olタグの使い方【HTMLリファレンス】

preタグの使い方【HTMLリファレンス】

preタグとは

preタグの基本概要

preタグの基本的な使い方

シンタックス(構文)

基本的な例

preタグの属性

preタグの具体的な使用例

コードの表示

HTMLコードの表示

CSSコードの表示

JavaScriptコードの表示

テキストのフォーマット保持

詩や歌詞の表示

ASCIIアートの表示

preタグのスタイリング

CSSを使ったスタイリング

フォントの設定

背景色とテキスト色の設定

マージンとパディングの調整

スクロールバーの追加

横スクロールバーの追加

縦スクロールバーの追加

preタグの注意点とベストプラクティス

過剰な使用の回避

アクセシビリティの考慮

SEOへの影響

preタグの代替手段

codeタグとの違い

例: preタグとcodeタグの組み合わせ

例: codeタグの単独使用

その他のタグとの比較

kbdタグ

例: kbdタグの使用

sampタグ

例: sampタグの使用

よくある質問(FAQ)

preタグとcodeタグの違いは？

preタグ内での改行はどう扱われる？

preタグの中でHTMLタグを使うことはできる？

他のコンテンツも見る

キーワードから探す

関連記事