Webページにソースコードを表示するために～HTML編～

Ads by Google

-- / -- / -- ( -- )

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサードリンク

-- : -- : -- | スポンサー広告 | page top↑

Webページにソースコードを表示するために～HTML編～

2008 / 02 / 22 ( Fri )

Webページにプログラムのソースコードを載せる際に生じる問題

Webページにプログラムのソースコードを載せようとした場合、いくつか困ることがあります。

インデントのためのタブやスペースが無効化されてしまう。
文字が等角フォントでない。
< と > で囲まれた文字列がHTMLタグと見なされ画面に表示されない。

これらの問題を解決する方法を紹介します。

1. タブやスペースに関する問題

これは空白文字（スペース）を   と記述することによって回避することができます。

2. フォントに関する問題

これは、<CODE></CODE>タグを使うことで対応できます。このタグで囲まれた文章はプログラムのソースコードと見なされ、等幅フォントで表示されます。

次の例をご覧下さい。上の例は文章をそのまま書いてあり、下の例は文章を<CODE></CODE>タグで囲んであります。

printf("hello, world!\n");
printf("hello, world!\n)";

下の例は等幅フォントで表示されており、ソースコードが読みやすくなっていると思います。

3. < や > に関する問題

これまでの問題は見た目の問題でしたが、この問題は情報そのものが失われてしまうという点で非常に深刻です。&

これを回避するためには2通りの方法があります。

1つはタブやスペースに関する問題と同様に、 < を < 、 > を > と記述することです。

もう1つは < や > の前後にスペースを入れることです。

#include <stdio.h> /* NG: HTMLタグと見なされて表示されない。*/
#include < stdio.h > /* OK: スペースを入れることで回避できる。 */

しかし、この方法は本来表現したい文字列を少し変えてしまという問題があります。

問題1,2を同時に解決する<PRE></PRE>タグ

これまでWebページにプログラムのソースコードを載せるときに生じる3つの問題についてそれぞれそれぞれ回避策を紹介しました。しかし、これら3つの問題を別々に対処するのは少々面倒です。3つの問題すべてに有効な方法はないものでしょうか？

3つすべて…というのは無理ですが、問題1と2に関しては<PRE></PRE>タグを使うことでこれを実現できます(*1)

<PRE></PRE>タグで囲まれた文章は、スペース、インデント、改行などがすべてそのまま等幅フォントで表示され、 < と > で囲まれた文字列もタグとみなされることもありません。

<PRE></PRE>タグの問題点

しかし、<PRE></PRE>タグを使うと1つ困ったことが起こります。<PRE></PRE>タグで囲った次のコードをご覧下さい。

#include <stdio.h>
int main() {
  printf("hello, world!\n");
  return 0;
}

確かに、インデントが維持されており、等幅フォントにもなっているのですが、フォントが小さくて少々読みづらいのではないでしょうか？

次回の記事「Webページにソースコードを表示するために～CSS編～」で、デザインをCSSによって指定する方法を紹介しようと思います。

Webページにソースコードを表示するために

この記事には後編があります。

Webページにソースコードを表示するために～HTML編～
Webページにソースコードを表示するために～CSS編～

HTMLに関する書籍

できる大事典 HTML & CSS (できる大事典)
	佐藤和人できるシリーズ編集部インプレスジャパン 2006-04-27 売り上げランキング : 1773 おすすめ平均 Amazonで詳しく見る by G-Tools

*1: 「Web標準」にのっとって<pre><code></code></pre>で囲むべきという主張も存在するようですが、ここではそのことについては議論しないことにします。

スポンサードリンク

テーマ:web制作 - ジャンル:コンピュータ - ソーシャルブックマーク:

00 : 47 : 50 | HTML/CSS | トラックバック(0) | コメント(0) | page top↑

<<Webページにソースコードを表示するために～CSS編～ | ホーム | Googleのフレーズ検索>>

コメントの投稿

トラックバック

トラックバックURL
→http://networkprogramming.blog18.fc2.com/tb.php/18-2c03f853
この記事にトラックバックする(FC2ブログユーザー)

| ホーム |

プロフィール

Author:TBVector

プロフィール

メールフォーム

記事検索

過去の記事

タグランキング

リンク

私のサイト

ブックマークとRSS

友達のサイト

情報科学を学ぶ大学生のブログ

Ads by Google

Webページにソースコードを表示するために～HTML編～

Webページにプログラムのソースコードを載せる際に生じる問題

1. タブやスペースに関する問題

2. フォントに関する問題

3. < や > に関する問題

問題1,2を同時に解決する<PRE></PRE>タグ

<PRE></PRE>タグの問題点

Webページにソースコードを表示するために

HTMLに関する書籍

プロフィール

記事検索

最近の記事

人気の記事

過去の記事

カテゴリー

タグランキング

リンク

最近のコメント

最近のトラックバック

アクセスカウンタ