スポンサード リンク

スポンサーサイト

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

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

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

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

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

CSSの定義

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

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

  • 背景色(background-color)
  • 枠線(border)
  • フォント(font-family)
  • フォントサイズ(font-size)
定義(CSS)
pre {
	background-color: #FFCCFF;
	border: solid 1px #320099;
	font-family: "courier new";
	font-size: 100%;
}
使用法(HTML)
<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ページにソースコードを表示するために

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

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

CSSに関する書籍

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips市瀬 裕哉 福島 英児 望月 真琴


おすすめ平均 star
star迷える「CSSデザイン学習者」の救世主。
starWeb標準採用のためのガイドライン
star結局、これが一番良い。
starボックスハックで泣かされた方に
star基本から応用までしっかりサポート!

Amazonで詳しく見る
by G-Tools

スポンサード リンク

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

23 : 19 : 01 | HTML/CSS | トラックバック(0) | コメント(0) | page top↑
<<Javaで学ぶデータ構造入門01-スタック(1/3)-基本操作の実装 | ホーム | Webページにソースコードを表示するために~HTML編~>>
コメント

コメントの投稿














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

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

プロフィール

TBVector

Author:TBVector

プロフィール

メールフォーム

記事検索

Google

最近の記事

人気の記事

過去の記事

カテゴリー

タグランキング

リンク

最近のコメント

最近のトラックバック

アクセスカウンタ

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