【HTML Living Standard】pre要素の使い方
pre要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
preオブジェクトは、整形済みテキスト（preformatted text）を表すオブジェクトです。この要素は、ウェブページ上で空白文字（スペース、タブ、改行）やテキストのレイアウトを、ソースコードに記述されたとおりに保持して表示するために使用されます。通常のHTML要素では、連続するスペースは一つにまとめられたり、テキストが自動的に改行されたりしますが、pre要素の内部では、記述されたとおりの改行や連続する空白がそのままブラウザに表示されます。また、テキストは通常、等幅フォントで表示されます。
主に、プログラミング言語のソースコード、シェルスクリプトの出力、アスキーアート、詩など、テキストの正確なフォーマットが非常に重要な情報を表示する場合に利用されます。例えば、ウェブサイトでコードスニペットを共有する際に、インデントや改行が崩れることなく、開発環境で見たままの形でコードを表示するために非常に役立ちます。
セマンティックな意味をより明確にするために、pre要素の中にcode要素を含めることで、表示される内容がコンピューターコードであることを示すことができます。これにより、検索エンジンや支援技術がコンテンツの性質をより正確に理解できるようになります。また、pre要素内のテキストが長くなりすぎると、画面からはみ出して横スクロールが必要になる場合があります。このような場合、CSSのoverflow-x: auto;プロパティなどを適用することで、ユーザーがコンテンツ全体をスムーズに閲覧できるように配慮することが推奨されます。
公式リファレンス: <pre>: The Preformatted Text element
構文(syntax)
1<pre> 2これは整形済みテキストです。 3スペースや改行が、 4記述したとおりに 5 そのまま 6 表示されます。 7</pre>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません