[CSS]pre要素で実装されたコードを美しくデザインするスタイルシート

Styling Code Snippets with CSS demo デモでは、ノートスタイルが二種類と視認性に優れたブラックタイプが一種類紹介されています。 三種類ともHTMLはシンプルで、クラスを記述するだけでデザインを適応できます。 グリーンのノート <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; over

[naoh16]

プログラムコード用のcss例

[XIAORING]

ノート風background-imageのtextのstyle

[mitchikeuchi]

pre要素で実装されたコードを美しくデザインするスタイルシートをSoh Tanakaから紹介します。デモでは、ノートスタイルが二種類と視認性に優れたブラックタイプが一種類紹介されています。三種類ともHTMLはシンプルで、クラスを記述するだけでデザインを適応できます。

[ku_marin]

pre用　個人的にはSyntaxHighlighter好きだけど、、

[Nagise]

このスタイルシート、あちこちで見かけるけど元ネタがどこだか知らなかったな。

[wackey]

コード用

[pitworks]

ノートっぽい画面を作りたい時にチェック

[yssk22]

あとで

[monjudoh]

ノートにコードが書かれているみたいに見せる。単純だけど素敵。

[paranod]

pre要素で実装されたコードを美しくデザインするスタイルシート