4-17-1a 整形済みテキスト(pre)

ソース中にある文章の空白や改行をそのまま等幅フォントで掲載する方法です。 <pre> 要素を使用致します。(このタグはブロックレベル要素です)。

このタグはアスキーアート(ASCII Art : 文字や記号で書かれた物。テキストアート・文字絵とも)やCGIやJavaScriptのコードを記載する際にとても重宝致しますが、 <や>、& は特殊文字として認識されてしまうので、それぞれ &lt; や &gt; や &amp; と置き換える必要があります。

ちなみに<pre> とは 『Preformatted Text(整形済みテキスト)』 の略です。

4-17-1b 整形済みテキストの見本

HTML

<body> ~ </body> 内に記述して下さい。

<pre>
これはJavaScript の見本コードです。

<SCRIPT type="text/javascript">
<!--
alert("こんにちは、いらっしゃいませvv")
//-->
</SCRIPT>

と、HTML文章のheader部分に書き込みすると
小さなウィンドウが立ち上がりお客様をお出迎えしてくれます。
</pre>

表示結果

これはJavaScript の見本コードです。

<SCRIPT type="text/javascript">
<!--
alert("こんにちは、いらっしゃいませvv")
//-->
</SCRIPT>

と、HTML文章のheader部分に書き込みすると
小さなウィンドウが立ち上がりお客様をお出迎えしてくれます。

ちなみにプログラムのソースコードを表すタグに <code> という物があります。 このタグはインライン要素で、仕様書によると(外部リンクです) 「CODE : Designates a fragment of computer code.(コンピュータ・コードの断片を指定します)」とあります。

ソースコードをマークアップする際、行内で短く収まる場合は<code>のみで、 複数行に渡る場合は <pre> と <code> の併用、もしくはソースの中身次第で <ul><li><code>(<ol><li><code>)等を利用されているケースがあるようです。

※ ただしこの項目はウェブでも色々な方法が議論されており、実際に利用される時は最新の情報を知る為にもGoogle等の検索サイトを利用される事をお勧め致します。

[ 関連事項 : HP-TIPS > HPの作り方 > マークアップとは ]
[ 関連事項 : Bookmark > Search関連 ]