入力したとおりに表示させる

入力したとおりに表示させる入力したとおりに表示させる表示例

HTMLで入力したとおりに表示させたいときには<pre> ~ </pre>で記述します。<pre> ~ </pre>で指定された範囲のテキストは、HTML/XHTML文書内の改行や空白文字、インデントなどがブラウザ画面にそのまま反映されます。このサイトではHTMLやCSSのコード記述例の部分が<pre> ~ </pre>で指定されています。

HTML/XHTML

<p>ここから&lt;p&gt;タグで記述</p>
<p>body {<br />
	font: 80% verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo","MS Pゴシック","MS PGothic",Sans-Serif;<br />
	margin: 0px auto;<br />
	text-align: center;<br />
	background: #F0F0F0 url(css-image/header-bg.gif) repeat-x 0px 0px ;<br />
}<br />
a {<br />
	color: #069;<br />
}<br />
a:hover {<br />
	color: #C00;<br />
}</p>
<p>ここまで&lt;p&gt;タグで記述、ここから&lt;pre&gt;タグで記述</p>
<pre>body {
	font: 80% verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo","MS Pゴシック","MS PGothic",Sans-Serif;
	margin: 0px auto;
	text-align: center;
	background: #F0F0F0 url(css-image/header-bg.gif) repeat-x 0px 0px ;
}
a {
	color: #069;
}
a:hover {
	color: #C00;
}</pre>
<p>ここまで&lt;pre&gt;タグで記述</p>

入力したとおりに表示させる表示例
表示のされ方が違うことがわかります。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録