スポンサード リンク

スポンサーサイト

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

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

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

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

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

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

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

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

これは空白文字(スペース)を &nbsp; と記述することによって回避することができます。

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

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

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

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

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

3. < や > に関する問題

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

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

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

もう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ページにソースコードを表示するために

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

  1. Webページにソースコードを表示するために~HTML編~
  2. Webページにソースコードを表示するために~CSS編~

HTMLに関する書籍

できる大事典 HTML & CSS (できる大事典)
できる大事典 HTML & CSS (できる大事典)佐藤 和人 できるシリーズ編集部

インプレスジャパン 2006-04-27
売り上げランキング : 1773
おすすめ平均star


Amazonで詳しく見る
by G-Tools

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


スポンサード リンク

テーマ:web制作 - ジャンル:コンピュータ - ソーシャルブックマーク: この記事をクリップ! Yahoo!ブックマークに登録

00 : 47 : 50 | HTML/CSS | トラックバック(0) | コメント(0) | page top↑
<<Webページにソースコードを表示するために~CSS編~ | ホーム | Googleのフレーズ検索>>
コメント

コメントの投稿














管理者にだけ表示を許可する

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

プロフィール

TBVector

Author:TBVector

プロフィール

メールフォーム

記事検索

Google

最近の記事

人気の記事

過去の記事

カテゴリー

タグランキング

リンク

最近のコメント

最近のトラックバック

アクセスカウンタ

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