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

Ads by Google

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

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

スポンサードリンク

2008 / 02 / 23 ( Sat )

前回のエントリ「Webページにソースコードを表示するために～HTML編～」で、ブログにソースコードを載せようとするといくつか問題が生じ、それを回避するためには<PRE>タグや<CODE>タグを用いるとよいということを紹介しました。

しかし、<PRE>タグには表示される文字のフォントが小さくなってしまうという副作用があるのでした。今回のエントリではそれをCSSによって回避する方法を紹介します。

フォントサイズを大きくするためにCSSのfont-sizeを指定します。今回のようにフォントを標準的なサイズに戻したいだけの場合は、font-size: 100%;とするのがよいと思います。

ここでは、例として<PRE>に以下の4つの要素を指定します。

pre {
	background-color: #FFCCFF;
	border: solid 1px #320099;
	font-family: "courier new";
	font-size: 100%;
}

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

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

しかし、<PRE>タグはソースコード以外にも適用する可能性があります。例えば、出力結果はコマンドプロンプトのように黒い背景に白い文字で表示したいと思うかもしれません。

そのような場合は、<PRE>タグのクラス"dos"を定義します。

pre.dos {
	background-color: black;
	border: solid 3px ActiveBorder;
	color: white;
	font-family: "MSゴシック";
	font-size: 100%;
	padding: 3px;
}

<pre class="dos">
$ ./a
hello, world!
</pre>

$ ./a
hello, world!

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

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
	市瀬裕哉福島英児望月真琴おすすめ平均迷える「ＣＳＳデザイン学習者」の救世主。 Web標準採用のためのガイドライン結局、これが一番良い。ボックスハックで泣かされた方に基本から応用までしっかりサポート！ Amazonで詳しく見るby G-Tools