はじめに
HTML では、<pre> タグを使用してフォーマット済みのテキストを表示します。これは、HTML ファイルに記述されている通りに Web ページに表示されます。このタグ内で使用される空白文字は、記述通りに表示されます。<pre> タグの間に記述されたテキストは、固定幅のフォントで表示されます。通常とは異なるフォーマットを使用する場合や、コンピュータコードの一部を記述したい場合には、<pre> タグを使用することをお勧めします。
この実験では、Web ページでフォーマット済みのテキストを表示するために <pre> タグをどのように使用するかを学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
HTML ファイルの作成
好きなテキストエディタで index.html ファイルを作成し、次の基本的な HTML コードを追加します。
<!doctype html>
<html>
<head>
<title>Using the HTML Pre Tag</title>
</head>
<body>
<h1>Using the HTML Pre Tag</h1>
</body>
</html>
Web ページにコンテンツを追加する
<pre> タグを使用してフォーマット済みのテキストブロックを作成するには、<body> タグの間に次のコードを追加します。
<pre>
This text
will be
displayed
in a
fixed-width font
</pre>
cols 属性を使用する
cols 属性を使用して、フォーマット済みのテキストブロックの 1 行に表示する文字数の目安を設定するには、<pre> タグの間に次のコードを追加します。
<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>
width 属性を使用する
width 属性を使用して、フォーマット済みのテキストブロックの 1 行に表示する文字数の目安を設定するには、<pre> タグの間に次のコードを追加します。
<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>
wrap 属性を使用する
wrap 属性を使用して、テキストが次の行に改行することを示すには、<pre> タグの間に次のコードを追加します。
<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>
Web ページにコンピュータコードを追加する
フォーマット済みのテキストブロックにコンピュータコードを表示するには、<pre> タグの間に次のコードを追加します。
<pre>
<html>
<head>
<title>Using the HTML Pre Tag</title>
</head>
<body>
<h1>Using the HTML Pre Tag</h1>
</body>
</html>
</pre>
フォーマット済みのテキストブロックを装飾する
フォーマット済みのテキストブロックにスタイルを適用するには、<head> タグの間に次の CSS コードを追加します。
<style>
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
border: 1px solid black;
padding: 10px;
}
</style>
index.html ファイルに加えた変更を保存し、Web ブラウザで開いて結果をプレビューします。
まとめ
おめでとうございます。あなたは、実験を成功裏に完了し、Web ページでフォーマット済みのテキストを表示するために <pre> タグを使用する方法を学びました。フォーマット済みのテキストブロックの 1 行に表示する文字数の目安を cols および width 属性を使用して設定する方法、および wrap 属性を使用してテキストが次の行に改行することを示す方法を学びました。また、フォーマット済みのテキストブロックにコンピュータコードを追加する方法、および CSS を使用してフォーマット済みのテキストブロックにスタイルを適用する方法も学びました。
