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

pre要素で実装されたコードを美しくデザインするスタイルシートをSoh Tanakaから紹介します。

デモのキャプチャ

Styling Code Snippets with CSS
demo

デモでは、ノートスタイルが二種類と視認性に優れたブラックタイプが一種類紹介されています。

三種類ともHTMLはシンプルで、クラスを記述するだけでデザインを適応できます。

グリーンのノート

イエローのノート

ブラックタイプ

共通

「イエローのノート」「ブラックタイプ」を単独で使用する場合は、「グリーンのノート」のbackgroundとborder以外の指定が必要です。

sponsors

top of page

©2024 coliss