ソースコードを記述する
プログラムなどのソースコードを記述するには、<code>〜</code>にて囲む事で、述した内容がソースコードである事が認識されます。
通常は等幅フォントにて表示されます。
また、ソースコードを表示する場合には、見やすくする為にスペースや改行位置も正確に表示(整列)したいものです。その場合には<pre>〜</pre>を使用する事で、改行なども使用した整列されたものを表示する事が可能になります。
TOP > 文章や文字 > 改行やスペースを入力した通りに表示させるを参照して下さい。
↓ 指定しない場合 ↓
↓ 指定した場合 ↓
body {
background-color:#ffffff; /* 背景色を白 */
color:#000000; /* 文字色を黒 */
}
↓ <pre>も指定した場合 ↓
body {
background-color:#ffffff; /* 背景色を白 */
color:#000000; /* 文字色を黒 */
}
<code>〜</code>に対して、<pre>〜</pre>を使用するには、
<code><pre>〜</pre></code>の順番で記載するのではなく、
<pre><code>〜</code></pre>の順番で記述します。
<pre><code>
body {
background-color:#ffffff; /* 背景色を白 */
color:#000000; /* 文字色を黒 */
}
</code></pre>
ホームページ作成TOP > 文章や文字 > 文字同士の間隔(等幅フォントにて) > このページのTOP ▲
スタイルシートの場合<code>〜</code>に対応するものはありませんので、
フォントを等幅フォントにして設定し、さらにwhite-space:pre;も設定して入力した通りの表示にする事で、整列されたものを表示する事が可能になります。
フォントを等幅フォントにするには、TOP > 文章や文字 > 文字同士の間隔(等幅フォントにて)を参照して下さい。
white-space:pre;で入力通りに表示するには、TOP > 文章や文字 > 改行やスペースを入力した通りに表示させるを参照して下さい。
ホームページ作成TOP > 文章や文字 > 文字同士の間隔(等幅フォントにて) > このページのTOP ▲
ワンランクUP講座
ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。
スタイルシートの使い方のバリエーションを知る事ができる1冊。