[31] code要素 と pre要素 でソースコードを表示しよう

最終更新日:2017年11月05日  (初回投稿日:2012年01月17日)

<code>要素は、ソースコードの断片を示す要素です。
例えば HTML や CSS などのソースコードなどを示すときに使います。
<code>要素はインラインレベルの要素です。

<pre>要素は、整形済みテキストを表示する要素で、改行やスペースを書いたとおりに表示します。
<pre>要素はグルーピングのための要素なので、ブロックレベルです。

ソースコードを表示するとき、改行や字下げをそのまんま表示したいですよね。そんなときに <pre>要素を一緒に使うと最適。
W3Cも <pre>要素と <code>要素をセットで使うことを推奨しています。

使用する要素 <code> 〜 </code>
<pre> 〜 </pre>

2017年11月:記事をHTML 5.1 - 2nd Edition」を参考に書き換えました。

参考:
The code element - HTML 5.1 - 2nd Edition | W3C Recommendation
The pre element - HTML 5.1 - 2nd Edition | W3C Recommendation

<code>を使ってみよう

<code>要素 要素名、ファイル名、コンピュータープログラム(ソースコード)など「コンピューターが認識する文字列」をマークアップする時に使います。
「code」はそのまま「コード」の意味です。

このように使います。

<p> <code>code</code>要素は、ソースコードの断片を表します。</p>

プレビューするとこんなかんじ

code要素は、ソースコードの断片を表します。

<code> 〜 </code>で囲んだ部分は、ブラウザのデフォルトスタイル等幅フォントになります。

もう1つサンプルです。

ページの読み込みが完了し、DOM の構築が完了した時点で function()内が実行されます。

HTMLはこちら。

<p> ページが読み込み完了し、DOMの構築が完了した時点で <code>function()</code>内が実行されます。</p>

<pre> の中に <code> を入れて使ってみよう

<pre>要素は、整形済みテキストを用事する要素です。
「スペース」や「改行」をそのままプレビューさせることができます。

「pre」は preformatted text(整形済みテキスト)の略です。

W3C の仕様書では、現代詩(独特のスペースや改行をもつ)の表示や、アスキーアートの表示にも <pre>要素が使えるとしています。
ただし「その整形(改行やスペース)を失ったらどうなるか考慮すべき」とも言及しています。
音声読み上げソフトなどを使っているユーザーのアクセシビリティを考慮すべきということです。

<pre>要素は、字下げ(インデント)や改行をそのまま表示してくれるので、ソースコードの表示に最適です。
ソースコードの表示をするなら <code>要素と一緒に使います。

ソースコードの字下げ(インデント)とは、プログラムの構造を明確にするためのインデントスタイル(Indent style)のこと。ネスト(入れ子)構造をわかりやすくするため、入れ子になっているソースコードほど字下げをする書き方。いわゆる プログラミング作法です。
字下げは「半角スペース」を使うのが一般的です(タブスペースも使われています)

サンプルのプレビューです。

div.entry_body ol li {
    list-style: decimal outside;
    margin-left: 2em;
    }

ソースはこちらです。

<pre><code class="language-css">div.entry_body ol li {
    list-style: decimal outside;
    margin-left: 2em;
    }</code></pre>

改行に<br>を使っていません。字下げは半角スペース4個分ですが、そのままプレビューされていますね。

また、サンプルでは <code>要素に class名で「language-css」と入れています。
W3C の仕様で <code>要素にプレフィックス " language- " を付けた class を加えることで「構文をハイライトするスクリプト」が正しく機能するようにできるとしています。
「シンタックスハイライト」用のスクリプト内で、 language-プレフィックスが使えるということ。

私は「Prism」を使っていますが、これは <code>要素に「class="language-◯◯"」と指定することで、言語(html, css, js など)の表示を切り替えることができます。

pre要素は samp要素 や kbd要素とも組み合わせても

<pre>要素を <samp>要素と一緒に使えば、コンピューターの出力のブロックを表すことができます。
また、<kbd>要素の中に <pre>要素を入れれば、ユーザーが入力するべきテキストであることを示すことができます。

これらについては、[32] その他のプログラム関連要素 kbd と samp と var で触れます。

次回予告

次回は、<pre>要素と同じような表示をする、CSSの「white-space : pre」について紹介します。
現代詩などを表示するときは、この CSSでスタイルを整えるほうが良いと思います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.