HTMLで＜code＞タグを使ってコードをサイトに表示させる方法

※本ページにはプロモーション(広告)が含まれています

HTMLを使って、サイトにソースコードを表示するにはどうしたらいいのでしょうか。サイトにソースコードを表示したい場合は、codeタグを使えば解決します。ここでは 「HTMLで＜code＞タグを使ってコードをサイトに表示させる方法」 について、紹介いたします。これからHTMLを勉強しようと考えている方や、Webサイトを作ってみたい方は、参考にご覧ください。

１.codeを使ってソースコードをサイトに表示させる方法

ここでは、codeのHTMLタグを使ってソースコードをサイトに表示させる方法について、紹介します。

１.codeタグとは

codeタグとは、computer codeの略です。ソースコードがあることを示すための要素であり、使用するとブラウザ上では等幅フォントでソースコードが表示されます。一般的にはcodeタグだけでなく、preタグの中にcodeタグを入れて使うことが多いです。

２.preタグとは

preformatted textの略です。タグの範囲内にタブやスペースがないことを意味し、インデントや改行を表示させる場合に使います。ブラウザ上にソースコードを表示したい場合は、codeタグとセットで使ったりします。

３.codeタグを使ってコードをサイトに表示する

HTMLを使ってコードをサイトに表示させるためにはcodeタグを使います。＜code＞〜＜/code＞で使い、タグで囲まれた部分に表示したいコードを記述します。これにより、codeタグで囲まれた部分のコードがサイトに表示されます。また、インデントや改行も表示させる場合は、＜pre＞〜＜/pre＞タグでさらに外側を囲みます。

２.<と>を文字列として表示させる方法

codeタグを用いる事でソースコードであることを示すことができますが、このままでは < と > をタグとして認識してしまい、ブラウザに正しいソースコードを表示させることができません。

いくつかの対処法がありますので順番に見ていきましょう。

１.特殊文字を用いる

一つ目は 特殊文字を使う方法 です。直接記述できない文字や記号を文字列として表示させるために使われる手法となります。

今回のケースで言えば < と > ですね。HTMLコードと同じように記述すると、タグとして認識されてしまいます。この現象に対処するために < と > を特殊文字コードに置き換えて記述します。

特殊文字コードは「実体参照」や「エンティティコード」とも言われています。

辞書登録する

特殊文字は、普段入力しないような文字列ですから入力にも時間がかかってしまうかと思います。タグを毎回特殊文字に置き換えるのは億劫に感じてしまう方も多いかと思います。

そのような時には パソコンの辞書に登録 してしまうのが良いでしょう。「単語」と「よみ」にそれぞれ対応する文字を登録すれば簡単に記述することができるようになります。

辞書は タスクバーのIMEアイコンを右クリック→単語登録 で起動します。それぞれ入力が済んだら OK をクリックしましょう。入力を誤ったり不要になった辞書は ユーザ辞書の編集 から編集・削除することができます。

２.xmpを用いる

htmlタグを無視してそのまま表示させる xmpタグを使う方法 もあります。xmpタグで囲った部分にHTMLタグが含まれていてもタグとしては機能せずただの文字列として扱われてブラウザの表示されます。

一見すると特殊文字を使うより簡単なように思えます。しかしIEでは強制的に改行が入ってしまったり、Operaではうまく表示されなかったりと、ブラウザによって挙動が変わってしまう特徴があります。

どのような環境においても表示を統一させることが大切なので、xmpタグはあまり推奨されない方法とされてきました。

xmpタグはHTML4.0で廃止されている

xmpタグはHTML4.0の時点で廃止されています。HTML5においても廃止されたままとなっております。一部ブラウザでは機能することもあるようですが、基本的に使用は推奨されていません。

３.WordPress限定

WordPressはウェブサイトを運営管理する時に便利なサービスです。ビジネスはもちろん個人で利用している方も多いかと思われます。

WordPressでもHTMLタグを文字列として表示できない問題がありまして、これに対処する方法がいくつかあります。

ビジュアルエディタで入力する

WordPressには「ビジュアル」と「テキスト」という二つのエディタが用意されています。基本的にはどちらのエディタを利用しても問題はないのですが、大きな違いは HTMLコードを書くか書かないか の違いです。

「ビジュアル」ではエディタ上部に設置されているボタンを使って装飾を行うエディタです。エディタ画面でも視覚的に反映されるようになり、ブラウザに表示される画面を確認しつつ作業を進めることができます。

「テキスト」はHTMLタグを直接記述することができるエディタです。編集中の画面ではHTMLコードや文字列しか表示されず、装飾などはプレビュー画面を見つつ確認することになります。HTMLタグをある程度把握している方におすすめです。

プラグインを使う

WordPressには機能を拡張させるプラグインが多数あります。htmlタグをそのまま表示させるために便利なプラグイン「Crayon Syntax Highlighter」が提供されています。

わざわざプラグインを入れなくても特殊文字で十分間に合うという意見もあるかと思いますが、ソースコードの使い方を紹介するようなサイトを運営している方は、日常的にタグについて書くことが多くなるかと思います。

1行2行ならまだしも、これが複数行に渡るコードだと考えるとかなりの手間になってしまいます。手段の一つとしてプラグインの利用を検討してみてください。

またタグや定型文を登録しておくことができる 「AddQuicktag」 というプラグインもあります。WordPressの編集中に多用する定型文を登録しておくことで作業時間を大幅に短縮させることができるようになります。

３.HTML・CSSを勉強する際のおすすめの本

ここでは、HTML・CSSを勉強をする際に役立つ、初心者・中級者向けのおすすめ本を紹介します。

１.HTML５＆CSS３デザインブック

HTML５＆CSS３デザインブックは、は実際にパーツを組み立てながら学ぶことができます。しっかりと 基礎から学べ、勉強が苦手な方でも、Webサイトを 楽しみながら作れる ため勉強に取り組みやすいです。HTML・CSS初心者向けの本です。構成内容：Webページにおける段組み／Webページを作成する準備／ブログ・ニュース系サイトのトップ＋コンテンツページ／ビジネスサイト風のトップ＋コンテンツページなど

２.HTML５＆CSS３標準デザイン講座

1 2