HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで整形済みテキストを追加するには？preタグの使い方を解説

HTMLの<pre>タグとは

HTMLで整形済み（preformatted）のテキストを追加するには、<pre>タグを使用します。<pre>タグは、あらかじめ整形されたテキストをそのままの形で表示するための要素です。プログラムのソースコードなどをマークアップする場合には、<code>タグと組み合わせて使われることも一般的です。

<pre>タグの表示特性

ブラウザは通常、<pre>タグ内のテキストを等幅フォント（fixed-pitch font）で描画します。さらに、以下のような特徴があります。

  • 半角スペースなどの空白がそのまま保持される
  • 改行も入力どおりに反映される
  • 自動的な折り返し（ワードラップ）が行われない

これにより、ソースコードやASCIIアートなど、レイアウトが崩れては困るテキストを正確に表示できます。

サンプルコード

以下のコードを実行して、<pre>タグの基本的な使い方を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML pre Tag</title>
   </head>
   <body>
      <pre>
         This text is
         in a fixed-pitch
         font, and it preserves
         both spaces and line breaks
      </pre>
   </body>
</html>

このコードをブラウザで開くと、<pre>タグで囲まれた部分が、入力した通りの改行とスペースを保持したまま、等幅フォントで表示されます。通常の段落要素では無視されてしまう連続した空白や改行も、<pre>タグ内では忠実に再現される点がポイントです。

  1. HTMLのbdoタグとは？テキストの表示方向を指定する方法と使い方を解説

    HTMLのタグは、テキストの表示方向を明示的に指定するための要素です。「bdo」は「Bi-Directional Override（双方向オーバーライド）」の略称で、通常の文字方向の自動判定ルールを上書きし、開発者が意図した方向にテキストを強制的に表示させることができます。 bdoタグで使える属性 タグでは、以下の属性を使用します。 dir：テキストの表示方向を指定します。指定できる値は以下の2つです。 ltr：左から右へ（left-to-right）表示します。日本語や英語など、多くの言語で標準的な方向です。 rtl：右から左へ（right-to-left）表示します。アラビア語やヘブラ

  2. HTMLのbigタグとは？使い方とサンプルコードを解説

    HTMLの<big>要素は、デフォルトのフォントサイズよりも大きなテキストを表示するために使用される要素です。 注意：<big>要素はHTML5ではサポートされていません。現在は非推奨となっており、同様の表示を実現したい場合は、CSSのfont-sizeプロパティを使用することが推奨されています。 使用例 それでは、実際に<big>要素をHTMLで実装した例を見てみましょう。 <!DOCTYPE html> <html> <body> <h2>Demo Heading</h2> &l