[31-1] code と pre でソースを表示しよう

<code>は、コンピュータ用のソースコードであることを示す要素です。
例えばHTMLやCSSなどのソースコードや、HTMLの要素名ファイル名など「コンピュータが認識可能な文字列」を示すときに使います。
<pre>は「整形済みテキスト」を表示する要素で、改行やスペースを書いたとおりに表示したいときに使います。これはかなり便利です。

ソースコードをHTMLで表示するとき、改行や字下げをそのまんま表示したいですよね。そんなときに<pre>は最適。ですので、<pre>の中に<code>を入れてセットで使う場合が多いです。

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

「code」は computer code(コンピュータコード)の略、
「pre」は preformatted text(整形済みテキスト)の略です。

<code>を使ってみましょう

<code>はワンフレーズ(HTMLの要素名、ファイル名など)に使う時は、<pre>と一緒でなく、単独で使います。

<p>
<code>code</code>要素は、コンピュータが認識可能な文字列を示すときに使います。
</p>

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

code要素は、コンピュータが認識可能な文字列を示すときに使います。

<code></code>で囲んだ部分は、等幅フォントになっていますね。

<pre>の中に<code>を入れて使ってみましょう

<pre>は、スペースや改行をそのままプレビューします。また<code>と同じく等幅フォントで表示します。
まずはサンプルプレビューを見てみましょう。

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

ソースはこちらです。

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

6行のソースですが、改行に<br>を使っていませんね。3行目と4行目は、複数の半角スペースによって字下げされていますが、そのままブラウザでプレビューされています。普通は半角スペースを複数入れてもブラウザに2つ以上は無視されますが、<pre>は書いたまま表示します。

<pre>はソースコード用じゃなく「整形済みテキスト」用

<pre>は「整形済みテキスト」を表示させます。
ですので、<code>とセットでソースコードを示すだけじゃなく、他のいろんな用途にも使います。

例えば アスキーアートとか、「詩(現代詩、和歌、俳句、川柳)」など、スペースや改行が重要なテキストを表現するのに最適な要素です。
サンプルプレビューです。枕草子の冒頭です。

春はあけぼの。
             やうやう白くなりゆく山際、少しあかりて、
                                                               紫だちたる雲の細くたなびきたる。
夏は夜。
   月の頃はさらなり。
                    闇もなほ、蛍のおほく飛びちがひたる。
                              また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。
                                                                                         雨など降るもをかし。

このソースはこちら

<pre>
春はあけぼの。
        やうやう白くなりゆく山際、少しあかりて、
                                    紫だちたる雲の細くたなびきたる。
夏は夜。
  月の頃はさらなり。
              闇もなほ、蛍のおほく飛びちがひたる。
                         また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。
                                                           雨など降るもをかし。
</pre>

<pre></pre>で囲んだら、改行もスペースもプレビューされますね。

注目すべきは、開始タグ<pre>と本文1行目の位置関係。
<pre>は開始タグ直後の改行は無視されるので「<pre>春はあけぼの。」と、くっつけて書かなくても、1行目は空かないんです。
終了タグ</pre>は、直前での改行が反映されていますね。

<pre>要素を使う時の注意点

<pre>は「整形済みテキスト」が表示できて、ビジュアル的にとても便利です。
ですが、W3Cは<pre>について、「ウェブ制作者は、整形済みテキストが、その整形(改行やスペースの具合)を失ったらどうなるか考慮すべき」と言っています。
「音声読み上げブラウザ」「点字ディスプレイ」などを使ってるユーザーのことも考えて、という意味です。(アクセシビリティの観点です。)

<pre>は、やはり<code>と組んで、ソースコードを表示する時に使うのががベスト。
そのほかの用途で多用するのは控えた方がいいと思います。
HTMLやCSSなどのソースコードは、改行や字下げなんか無くてもコンピュータは読み取れます。
<pre>によって改行や字下げを再現するのは、人間が読みやすいから。

詩歌などをアートな表現にするなら、<pre>は使わず、CSSを使った方が良いと思います。

次回予告

次回は、<code>の他にも色々ある「プログラム用テキストを表示する要素」をまとめます。
出力サンプルを示す<samp>、変数や引数を示す<var>、入力するテキストを示す<kbd>です。

追加訂正です。次回は、
<pre>要素と同様な動作をする、CSSの「white-space : pre」について紹介します。
→[31-2] pre 要素と同じ効果のCSS「white-space : pre」

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

質問

><code>は、コンピュータ用のソースコードであることを示す要素です。
なのに、
<code>はワンフレーズ(HTMLの要素名、ファイル名など)に使う時は、
なのですか?

Re: 質問

晶子さん、
返信がすごく遅くてゴメン。(見るかな〜これ)

ご質問の文章がわかりづらかったのですが、
たぶん「コンピューター用のソースコードなのに、ワンフレーズでもアリ?」と聞いているのかな?
そのつもりで返信を書いてます。

ソースコードを書いて説明するようなシーンで、サイトを見てる人に「ココはソースですよ」と示したい時にcode要素を使うってことです。
ワンフレーズの「code」とか「index.html」とかでも、相手にソースコードとして見て欲しいシーンで使います。
ソースコードとして表現したい部分は、b要素とかspan要素とか使わずに、code要素を使おう、という決まり事なわけです。code要素は、言ってみれば単にそれだけの役目です。

ソースコードそのものは、入れ子になっている場合が多く、字下げなどでわかりやすく表示することが多いので、HTML上で表現する時は、pre要素と一緒に使うと具合がいい。
でも、ワンフレーズの場合は字下げなどないので、pre要素なしで単独で使えるというわけです。

No title

細かい指摘でスイマセン。

> ソースコードは結局、改行や字下げなんか無くてもコンピュータは読み取れます。
> <pre>によって改行や字下げを再現するのは、人間が読みやすいから。

上記の記述はちょっと誤解があります。

ソースコード(形式言語)には、改行や字下げを無視できる、いわゆる「フリーフォーマット形式」の言語(HTML、JavaScript、Javaなど)ばかりとは限りません。

古くからある形式言語は非フリーフォーマットが多いですし
最近流行りの言語には「字下げ」(インデント)の深さをブロック単位として構文解析するものがあります。(たとえばPython,CoffeeScript,Haskellなど。オフサイドルールと呼ぶそうです。)

Re: No title

tadさん、コメントありがとうございます。

本ブログの主旨はタイトルのとおりで、
HTMLやCSSといったマークアップ言語(そしてせいぜいjavaScriptがたまに登場する程度)の整理用メモブログです。
このブログに登場するそれらの言語をザックリまとめるつもりで「ソースコード」と書きました。
(いずれこのブログでもminifyについてメモを書く予定ですので、スペースや改行などは「ヒト用」だと前振りをしています。)

このページで「ソースコード」というコトバを使用しても、それが指す言語は、このブログに登場する程度の初歩的なモノであってご指摘の「Python」「CoffeeScript」「Haskell」などのプログラミング言語にまで言及してのことではないと、記事本文の流れで読者には十分伝わっていると思います。

ただ、本記事の冒頭の「例えばHTMLやCSSなどのソースコード...」という書きかたのように、あまり「言い切らないかんじ」が良いかもしれないですね。
ご指摘の箇所を「HTMLやCSSなどのソースコード」と書き直しておきます。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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