【CSS】preとcodeのfont-familyとカラーバリエーション

2019年6月12日CSS,CSSデザイン

Google Code Prettifyやプラグインでシンタックスハイライトをせずとも<pre>と<code>のCSSだけで見やすいCSSに出来ればちょっとでもページを軽くできていいですよね

font-family指定

メイリオ

font-family:"メイリオ", sans-serif;

cursive

font-family:cursive;

fantasy

font-family:fantasy;

monospace

font-family: monospace, sans-serif;

[CSS]等幅フォントにするためのおすすめのfont-family指定にて紹介されているfont-family指定

font-family: Consolas, 'Courier New', Courier, Monaco, monospace;

ブラック

このブログのいま適用している<pre>と<code>のCSS

font-familyは使っているエディタのAtomのデフォルトフォントと同じフォント指定らしく、適用してみたら良かったので使っています

pre{
	padding:1em;
	background-color:#000;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ダーク・ブルー

pre{
	padding:1em;
	background-color:#00008b;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ミッドナイト・ブルー

pre{
	padding:1em;
	background-color:#191970;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ダーク・グリーン

pre{
	padding:1em;
	background-color:#006400;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ダーク･スレート･グレイ

pre{
	padding:1em;
	background-color:#2F4F4F;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

マロン

pre{
	padding:1em;
	background-color:#800000;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

アンティーク・ホワイト

pre{
	padding:1em;
	background-color:#ffffdc;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ライト・イエロー

pre{
	padding:1em;
	background-color:#ffffe0;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ラベンダー・ブラシ

pre{
	padding:1em;
	background-color:#FFF0F5;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

アイボリー

pre{
	padding:1em;
	background-color:#fffff0;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ライト・グレイ

pre{
	padding:1em;
	background-color:#d3d3d3;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ゴースト・ホワイト

pre{
	padding:1em;
	background-color:#f8f8ff;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ハネデュー

pre{
	padding:1em;
	background-color:#f0fff0;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

アリスブルー

pre{
	padding:1em;
	background-color:#f0f8ff;
	color :#FFF;
}
code{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

2019年6月12日CSS,CSSデザイン

Posted by Yousuke.U