HTML

<pre> <code> <samp> <var> コード

詳細を開く 詳細を閉じる
ブロック要素 <pre> 整形済みテキスト 等幅フォント
インライン要素 <code> プログラミングコード
<samp> コンピュータからの出力
<var> プログラミング言語や数学の変数 イタリック体

整形済みテキスト : <pre>

<pre>要素は、

  • 文中の改行タブをそのまま表示します。
  • 一方、その他の要素(サンプルの<div>要素など)の場合、改行やタブは1つのスペースとして表示されています。
  • そのため、ソースコードや詩など、整形済みテキストを表示するために使われます。
  • 多くのブラウザでは等幅フォントで表示されます。
  • ブロック要素です。

別ウィンドウで表示

<pre>
#sample {
	color:  red;
}
</pre>

<div>
#sample {
	color:  red;
}
</div>
  • [補足] 他の要素の場合でも、CSSで「white-space: pre;」を指定することで、 改行やタブをそのまま表示させることはできます。

別ウィンドウで表示

<style>
	.pre {
		white-space:	pre;
	}
</style>
	
<pre>
#sample {
	color:  red;
}
</pre>

<div class="pre">
#sample {
	color:  red;
}
</div>

コード : <code>

<code>要素は、

  • 文中でプログラミングコードの一部を表示するために使われます。
  • 多くのブラウザでは等幅フォントで表示されます。
  • インライン要素です。

別ウィンドウで表示

<p>CSSは「
<code>
#sample {
	color:	red;
}
</code>
」のように記述します。
</p>

<p>CSSは「
#sample {
	color:	red;
}
」のように記述します。
</p>

出力 : <samp>

<samp>要素は、

  • 文中でコンピュータからの出力などを表示するために使われます。
  • 多くのブラウザでは等幅フォントで表示されます。
  • インライン要素です。

別ウィンドウで表示

<p>出力結果は「
<samp>Hello World!</samp>
」と、なります。
</p>

<p>出力結果は「
Hello World!
」と、なります。
</p>

変数 : <var>

<var>要素は、

  • 文中でプログラミング言語や数学の変数を表示するために使われます。
  • 多くのブラウザでは斜字体で表示されます。
  • インライン要素です。

別ウィンドウで表示

<p>PHPの変数は
<var>$var</var>
などです。
</p>

<p>PHPの変数は
$var
などです。
</p>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ