[CSS]pre要素で実装されたコードを美しくデザインするスタイルシート
Post on:2009年2月4日
sponsors
pre要素で実装されたコードを美しくデザインするスタイルシートをSoh Tanakaから紹介します。
Styling Code Snippets with CSS
demo
デモでは、ノートスタイルが二種類と視認性に優れたブラックタイプが一種類紹介されています。
三種類ともHTMLはシンプルで、クラスを記述するだけでデザインを適応できます。
グリーンのノート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="css" cols="60" rows="5"> pre { font-size: 12px; padding: 0; margin: 0; background: #f0f0f0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; line-height: 20px; background: url(pre_code_bg.gif) repeat-y left top; width: 600px; overflow: auto; overflow-Y:hidden; } </textarea> |
イエローのノート
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> background: url(pre_code_bg_ylw.gif) repeat-y left top; border: none; </textarea> |
ブラックタイプ
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> background: url(pre_code_bg_blk.gif) repeat-y left top; border: none; color: #fff; </textarea> |
共通
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> pre code { margin: 0 0 0 40px; padding: 18px 0; display: block; } .code { margin: 20px 0; } </textarea> |
「イエローのノート」「ブラックタイプ」を単独で使用する場合は、「グリーンのノート」のbackgroundとborder以外の指定が必要です。
sponsors
