buena suerte!

漢字が使えるフリーの和文フォント242種類をまとめてみた。

自分用にまとめのまとめみたいな感じです。

同じフォントでも、等幅、プロポーショナル、太さの種類が複数ある等々のものは、どれも同種としてカウントしたつもりです。ただ、漢字部分は同じで、ひらがなカタカナ部分だけ違うとか、英数字部分だけ違うとか、微妙な違いのフォントがあるので、似たようなのがカウントされてたりするかもしれない。
それでも、かなり古いものから、定番もの、最近リリースされたもの、最近更新されたものまで、まともに使えないのもあるけど、単純にリストの数かぞえたら、番外編抜いても242種類もありました。多すぎて整理できてないのはあれですが。

自分なりに注釈付けてますけど、間違いがあるかもしれないんで、（特に商用）利用する前には、必ず規約やライセンス、付属のテキストをよく確認して下さい。また、ライセンス上無保証であるものも多いので、いずれも自己責任での利用をお願いします。

2012/02/18 追記： 書いてから随分経っていますので、ライセンス等の変更があったり、文字種や収録漢字が増えていたり、逆に配布停止なったフォントやデッドリンクになっている配布元があるかもしれませんので、あわせて注意して下さい。

サンプルは、大きいほうが16pt、小さいほうが10pt、字間は若干調節してあります。アンチエイリアスが掛かっていないのは、有効にしたらうまく表示できなかったものかビットマップフォントです。あと、使えない漢字の部分を平仮名にしているのもあります。

分かりにくいところ以外は、素材サイトとかもあるので、トップページにしかリンクしていません。では、続きからどうぞ。

Read more...

図形とかアイコンっぽいものを画像を使わずに CSS で描いてみた。

CSS を使って描かれたモノといえば Opera のアイコンや、ホーマー・シンプソン、ドラえもんなんかが有名ですが、今回はシンプルな図形、そしてシンボルアイコンっぽいものを、画像もテキストもなしで CSS だけで描いてみようという試み。

動作確認

Chrome 7.0.517.44, Safari 5.0.2, Firefox 3.6.12, Opera 10.63 で確認。 Firefox と Opera でうまく表示されないのがあります。

デモサイト ／ Demo Site

HTML

図形では1つ（立体は3つ）まで、アイコンでは4つまでの要素で描いてます。要素数の縛りがなければいくらでもいけそう。

<span class="squ"></span>
<div class="apple"><span></span></div>

デモでは無駄に擬似要素の ::before ::after を使ってるけど、下みたいに書いたほうがいいかも。ただ、要素の初期位置と順番が変わるので注意。というか順番とか全く意識しないで書いてた……

<div class="squ">
	<span class="el1"></span>
	<span class="el2"></span>
	<span class="el3"></span>
</div>
<div class="apple">
	<span class="el1"></span>
	<span class="el2"></span>
	<span class="el3"></span>
	<span class="el4"></span>
</div>

CSS

Mayer's CSS Reset でリセットしてます。
一つ一つ説明入れるの大変なので全部一度に貼っていきます。

図形 ／ Shapes

shapes

図形はきれいに並んでいるように見せるためにマージンとかで微調整してるのがあるので、修正が必要かと。

Read more...

いろんなパンくずリストを画像を使わずに CSS で再現してみた。

CSS Triangle を使ったパンくずリストを見てて、この方法だと単色はともかく、グラデーションかけたい時、ボーダーで作った三角がネックでうまくいかないだろうなっておもった。

前回、 iPhone Buttons を再現した際に使った方法でグラデーションかけられそうなので試してみた。

オリジナルの詳しい解説は既にコリスさんにありますので割愛。
大分書き進めた後に気づいたけど、コメントにあった span を使う方法のがパッと見簡単やないかな……こっち使うほうがいいかもしれんね……

動作確認

Chrome(7.0.517.41) で確認。もしかすると、ウィンドウ幅が小さいと崩れるかも。横幅 1024px で最大化して確認してます。

同じ webkit の Safari でも表示されますが、微妙に動作が違います。他のブラウザ用のプロパティは機会があれば。も追加してみた。こっちに貼ると長すぎて拒否されるので、デモのスタイルシート見てください。クロスブラウザ難しいなこりゃ……

デモサイト／Demo Site

HTML

<h2>custom</h2>
<div id="custom">
<ol class="custom">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li>1989 VW Westfalia Vanagon</li>
</ol>
</div>

CSS

Mayer's CSS Reset でリセットしてます。

custom
グラデーションかかってないように見えるけど、かかってます。 hsl だと同系色の色指定楽だね。でも要領がわからない。

/* custom
----------------------------------*/
.custom {
	list-style: none;
	overflow: hidden;
	font: 18px Helvetica, Arial, Sans-Serif;
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,95%,1)),
		color-stop(0.49,hsla(34,85%,90%,1)),
		color-stop(0.5,hsla(34,85%,80%,1)),
		to(hsla(34,85%,85%,1)));
	-webkit-border-radius: 5px;
}
.custom li {
	float: left;
	line-height: 50px;
}
.custom li a {
	color: white;
	text-decoration: none;
	padding: 0 15px 0 35px;
	background: brown;
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,50%,1)),
		color-stop(0.49,hsla(34,85%,45%,1)),
		color-stop(0.5,hsla(34,85%,35%,1)),
		to(hsla(34,85%,40%,1)));
	display: block;
	float: left;
}
.custom li a::after {
	position: relative;
	display: block;
	margin-top: -25px;
	margin-left: auto;
	margin-right: -25px;
	height: 25px;
	width: 20px;
	content: " ";
	-webkit-transform: skew(-30deg);
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,35%,1)),
		to(hsla(34,85%,40%,1)));
	border-right: 1px solid white;
}
.custom li a::before {
	float: right;
	display: block;
	margin-bottom: -25px;
	margin-left: auto;
	margin-right: -25px;
	height: 25px;
	width: 20px;
	content: " ";
	-webkit-transform: skew(30deg);
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,50%,1)),
		to(hsla(34,85%,45%,1)));
	border-right: 1px solid white;
}
.custom li:first-child a {padding-left: 20px;}
.custom li:nth-child(2) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,60%,1)),
		color-stop(0.49,hsla(34,85%,55%,1)),
		color-stop(0.5,hsla(34,85%,45%,1)),
		to(hsla(34,85%,50%,1)));
}
.custom li:nth-child(2) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,60%,1)),
		to(hsla(34,85%,55%,1)));
}
.custom li:nth-child(2) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,45%,1)),
		to(hsla(34,85%,50%,1)));
}
.custom li:nth-child(3) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,70%,1)),
		color-stop(0.49,hsla(34,85%,65%,1)),
		color-stop(0.5,hsla(34,85%,55%,1)),
		to(hsla(34,85%,60%,1)));
}
.custom li:nth-child(3) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,70%,1)),
		to(hsla(34,85%,65%,1)));
}
.custom li:nth-child(3) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,55%,1)),
		to(hsla(34,85%,60%,1)));
}
.custom li:nth-child(4) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,80%,1)),
		color-stop(0.49,hsla(34,85%,75%,1)),
		color-stop(0.5,hsla(34,85%,65%,1)),
		to(hsla(34,85%,70%,1)));
}
.custom li:nth-child(4) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,80%,1)),
		to(hsla(34,85%,75%,1)));
}
.custom li:nth-child(4) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,65%,1)),
		to(hsla(34,85%,70%,1)));
}
.custom li:nth-child(5) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,90%,1)),
		color-stop(0.49,hsla(34,85%,85%,1)),
		color-stop(0.5,hsla(34,85%,75%,1)),
		to(hsla(34,85%,80%,1)));
}
.custom li:nth-child(5) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,90%,1)),
		to(hsla(34,85%,85%,1)));
}
.custom li:nth-child(5) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,75%,1)),
		to(hsla(34,85%,80%,1)));
}
.custom li:last-child {padding-left: 35px;}
.custom li:last-child a {
	background: transparent !important;
	color: black;
	pointer-events: none;
	cursor: default;
}
.custom li:last-child a::before {border: 0;background: transparent !important;}
.custom li:last-child a::after {border: 0;background: transparent !important;}
.custom li a:hover {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,40%,1)),
		color-stop(0.49,hsla(34,85%,35%,1)),
		color-stop(0.5,hsla(34,85%,25%,1)),
		to(hsla(34,85%,30%,1)));
}
.custom li a:hover::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,40%,1)),
		to(hsla(34,85%,35%,1)));
}
.custom li a:hover::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,25%,1)),
		to(hsla(34,85%,30%,1)));
}

続いて以前あちこちで取り上げられてた、パンくずリストをいくつか再現してみる。
※あくまでそれっぽくしただけです。

Read more...

↑