codeタグのスタイル改善

   2012/11/11

こんちは、サイト管理人イガジーです。

先日、<code> タグを使って記事を書いたのですが
表示結果が思わしくなくて、<pre> タグでごまかしました。

思わしくない、というのは

  • 空白/タブが出ない(文字がツマる)
  • 行間が開きすぎる
  • 背景色が薄い

といった事です。

style.css の code定義を見てみると

code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

と、フォントだけを定義している模様。
少々追加して以下のようにしてみました。

code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
        line-height:80%;
        display: block;
        width: 93%;
        overflow: auto;
        white-space: pre;
        padding: 4px 10px 4px 8px;
        margin: 4px 0 2px 5px;
        border: 1px solid #bbb;
        background-color: #eed;
}

これで、まずまずでしょうか?

しかし、style.css と戯れるのも勉強には良いのですが
ある程度知識が得られたあとは、評判の良いテーマを
探してくる方が安全、確実、で効率的に思えてきました。

いくつか無料のものも見てみたのですが、やはり
有料のものの方がしっかりしていて良さそう。

という訳で思案中であります。

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。