なつみかん。

アニメを見て気が向いたときに聖地巡礼しています。

脱力系フォントのまとめ

エロゲや同人で使えそうな脱力系フォントを集めてみました。主に

  • OpenTypeまたはTrueType
  • 漢字も結構入ってるもの

を中心に選んであります。他にもたくさんあると思いますが、とりあえず。なお、リンク先のサイトさんには他にも素敵なフォントがたくさんあります。

あくびん




**萌萌可愛字體あくび印**
もえたんで一世を風靡(?)した「あくびん」。その他にも多数の可愛い系フォントが揃ってます。

みかちゃん




オリジナルフォント【みかちゃん】
おそらく最も有名な手書きフォント。

あくあフォント




Teardrops in Aquablue
これも有名。

S2G海フォント・S2G月フォント




:::STUDIO twoG:::

えれーな




ロシア風素材とフォント☆コサック☆

ふい字




ふい字置き場

あずきフォント・うずらフォント




あずきフォント

キャパニト・アニト




タイプラボ
これもかなり有名。本職の方だけあってどのフォントもクオリティが高いです。
お試し版は教育漢字1006文字まで。

あいでぃーぽっぷまる




idfont 井上デザイン
フォントは上部のフレームから。

さなフォン




★沙奈の文字箱★Sana'sOriginalFontBox

KFひま字




KF STUDIO: フォント:KFひま字

DFPクラフト遊




これだけ市販のフォントです。ダイナフォントは安くて種類が多いので、とりあえず持っておくといろいろ使えると思います。

DynaFont OpenType 100 Standard for Windows
DynaFont OpenType 100 Standard for Windows

関連


姉は一級建築士 〜イケない構造設計〜 恋愛AVGゲーム 公式サイト

※元ネタは太宰治 走れメロス(青空文庫)より。

| WebDesign | このエントリーをはてなブックマークに追加

ページの読み込みと同時にフォームを選択する方法



はてなやGoogleへログインしようとすると、ページを開いた瞬間にフォームが選択されています。この方法はものすごく単純な割にあまり普及していないようなので、「何を今さら…」と言われるとは思いますがあえて書いてみます。

フォームとinputタグに名前を付けて

<form name="login" action="login.php">
<input type="text" name="handle_name">
<input type="password" name="pass">
</form>

onLoadイベントで呼び出し。

<body onLoad="document.login.handle_name.focus();">

以上です。つまり

<body onLoad="document.フォーム名.項目名.focus();">

たったこれだけの作業ですが、ログインページなど確実にフォーム入力するような所に書いておくとユーザーの負担を1クリック減らすことができます。少しでもユーザビリティを向上させたい人はぜひ。

| WebDesign | このエントリーをはてなブックマークに追加

cssだけでテーブルをセンタリング/右寄せ/左寄せ

table をセンタリングする時、

<table align="center">

は最も確実な方法ですが strict ではなく、また align="left" や align="right" を指定するとその下にテキストがある場合は回り込んでしまいます。

で、センタリングと言えば margin : auto ; ですが

<table style="margin : 0 auto">

これだとIEの場合、標準モードでもなぜかセンタリングされません(他は多分これでOK)。div など他のブロック要素では問題がないにもかかわらず、です。

で、なぜか一括指定がマズいらしく、

/* センタリング */

table.center{
margin-left : auto ;
margin-right : auto ;
}

このように別々に指定するとうまくいくようです。「それがIEの仕様だ」としか言えませんが。

同様に右寄せ、左寄せは

/* 右寄せ */

table.right{
margin-left : auto ;
margin-right : 0 ;
}

/* 左寄せ */

table.left{
margin-left : 0 ;
margin-right : auto ;
}

と、寄せたい方向に margin : 0 、 反対側に margin : auto を指定することで align を使わず cssだけで右寄せ/左寄せができます。また class は半角スペースを空けることにより2つ以上指定できるので、装飾用と位置調整用の class は別に指定しておいて、

<table class="hoge right">

という使い方が実用的かもしれません。


ただし、この方法は margin : auto を使うためにIE5系には全く通用しないのが難点です。_| ̄|○ IE5対策としては<table>を<div style="text-align : center">で囲ったり、大人しく align="center" を使うなどがありますが、どう見てもこのエントリは無意味です。本当にありがとうございました。

IE7が出たらIE5のシェアは減るんでしょうか…。

| WebDesign | このエントリーをはてなブックマークに追加

徳永聖一郎『ビジュアルカラーコーディネート』

ビジュアルカラーコーディネート
ビジュアルカラーコーディネート

その配色に違和感を感じるとしたら、理由はただ一つ。それは、それが自然界に存在しない配色だから。

自然の配色は、動物も植物も風景もそのほとんどが「ブルーをベースにした配色」「イエローをベースにした配色」で構成されている…というのが本書の概要。

例えば、植物をみると花びらが青みがかった赤なら、葉や茎も青みを含んだ緑なのです。これは植物に限らず、動物(もちろん人間)や自然の風景も同様です。美しいと感じる自然の造形物の配色は、ほとんどがどちらかのグループ同士で構成されているのです。


そして、この配色をそれぞれ「ブルードミナントカラー(BDC)」「イエロードミナントカラー(YDC)」と名付けています。詳しくはこのページにあるカラーパレットを眺めてほしいのですが、例えば同じ赤でもBDCならワインレッド、YDCならトマトレッド。黄色ならBDCはレモンイエロー、YDCはそれ以外のややくすんだ黄色。

ブルードミナントカラー(BDC)




イエロードミナントカラー(YDC)




この両方が混ざった色を「ミックスカラー」と呼び、自然界には毒ヘビや毒キノコぐらいにしか存在しない、あまり心地よい配色ではないのですが、スパイスとして「真っ赤」あるいは「ブルーグリーン」を少し混ぜると全体が調和するらしい。この2色をマジックカラーと呼んでいますが、例えば香港の街並みには中国特有の「赤」が所々で使われているので、雑然とした中にも秩序が生まれているのだとか。

実はこれ6年前に出た本なのですが、ふと思い出して著者名で検索してみると50件しか出てこなくてあまりに不憫なのでエントリしてみました。しかし今でもこれ以上の色彩理論はないと思っています。ファッション、ヘア&メイク、インテリア…などどちらかというと女性向けの内容ですが、色に関わる全ての職業の人に読んで頂きたい本です。特にWebやDTP関連の人はぜひ一度目を通して頂ければ…と思います。最近は色彩ジェネレーターみたいなのもたくさんありますが、どんな配色が心地よく感じるのかという理論を知っておけばきっと役に立つはず。

色で悩む全ての人に全ての人におすすめです。
そういえば、未だファッションには応用できていませんが…。_| ̄|○

JCM研究所

| WebDesign | このエントリーをはてなブックマークに追加

CSSを使った画像プリロード

A Simple CSS Image preloading technique(Specere Blogs)より転載。
説明は不要だと思います。

CSS



#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

HTML


<div id="preloadedImages"></div>


プリロードでこれほどスマートな記述は初めて見ました。しかも

the image will load instantly from cache.


という点も見逃せない。

以前から画像プリロードに JavaScript を使ったりとか <img src="image.gif" width="1" height="1"> のような方法には違和感を感じていたので、これは気に入りました。ul を使った横並びのメニュー※などと併用すると良いかも。


※一応書いておきます

li{
display : inline ;
}

li a {
display:block;
background-image:url(img/bg_menu.gif);
width : 50px ;
height : 20px ;
border : 1px solid #ccc ;
}

li a:hover{
background-image:url(img/bg_menu_hover.gif);
}

| WebDesign | このエントリーをはてなブックマークに追加

使いづらい list-style-image

リスト項目である li は ul や ol の中にあります。
ではリストを示す「・」の部分、マーカーはどこにあるかというと ul の外側です。



で、この外側にあるマーカーとリストの中身( ul や ol )の距離はどこで指定するのか…と思ったら今の所不可能のようです。marker-offset プロパティはCSS2.1から削除されてますし。

素の ul、というかマーカーが「・」で十分な場合は特に問題はないのですが、マーカー部分に画像を使いたい時、特にサイドバーなど横幅の限られた場所で list-style-image を使う場合は大抵うまくいきません。マーカーとの距離を指定できないばかりか、ブラウザによっては縦方向にズレる場合があります。

  • 項目1
  • 項目2
  • 項目3

list-style-image では画像は指定できますが位置が指定できません。
結局、マーカーに使いたい画像を背景として指定するという方法が多くのサイトで採用されているようです。


ul{
list-style : none ; /* マーカー無し */
}

ul li{
background-image : url(img/list.gif) ;
background-position : left center ; /* 位置は左端の真ん中 */
background-repeat : no-repeat ; /* 背景だけど繰り返し表示しない */
padding-left : 15px ; /* 「画像の横幅+マーカーとの距離」を左方向に空ける */
}

  • 項目1
  • 項目2
  • 項目3

この場合あまり説得力はありませんが、マーカーとの距離を0pxからピクセル単位で指定できるのが狭い場所では便利です。もちろん ul に限らず dl , dd , dt などにも使えます。他に背景を指定できないのはやや痛いですが。

あと ul、li ともに margin と padding は上下左右きっちり指定しておいた方が良いです。ブラウザによってかなり異なるので。

この方法はCSSとしてあまり美しくないかなとも思いますが、CSSが多少アレでもHTML文書で論理構造を明確にする方が重要かなと。SEO的にも。というわけで最近は<p>と<br>で済むような所にも list-style : none を指定して ul で書くようにしています。そうすると何かソースが美しくなったような気がするのですが、無駄な努力ですかそうですか。

| WebDesign | このエントリーをはてなブックマークに追加

font-family のお約束

1行目に @charset を必ず入れる


後述する日本語フォント指定のため。IE や Safari などのメジャーなブラウザでは書かなくても問題ありませんが、その他のブラウザ( Firefox や Camino、Netscape など)では書かないと無効になるそうです。この宣言は一番最初に、ではなく必ず1行目に(改行不可)。@charset の前に /* charset */ など半角英数字だけでコメント入れるのも不可です。

@charset "Shift_JIS";

UTF-8 なのか EUC-JP なのか Shift_JIS なのかはmiなどの各種エディタでご確認下さい。

日本語でもフォント指定する


主にMacの問題ですが、

font-family: "Hiragino Kaku Gothic Pro"

と半角英数でのフォント指定はあくまでSafari用みたいです。Firefox や MacIE などSafari以外のブラウザに配慮するのであれば

font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3";

と日本語表記も忘れずに。なお、太字をキレイに表示するためには

font-family: "Hiragino Kaku Gothic Pro W3"

とウェイトを付けない方が良いみたいです。太字部分には font-family を指定せず font-weight: bold のみで(Caminoなどで「ヒラギノ角ゴ Pro W6」を指定するとさらに太くされてしまうため)。

あと稀なケースですが、Safariは半角英数字でのフォント名しか認識しないので、

font-family:"ヒラギノ角ゴ Pro W3", "MS Gothic" ;

と日本語しか書かないと、MSゴシックを入れてるMac(Safari)ユーザーにはMSゴシックが優先されてしまいます。見た目とてもMacとは思えなくなるほど美しくなくなるので、できれば先頭に Hiragino Kaku Gothic Pro も入れてください…(泣)。

sans-serif だけで十分?


と言うか、そもそも

font-family : sans-serif ;

だけで十分な気がするのですが、 sans-serif だけだと文字化けしてしまうブラウザも一部あるようなので(WinIE 5.5など)一応フォント名も入れておいた方が無難かと思われます。

結論としては

body{
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", sans-serif ;
}

.太字{
font-weight : bold ;
}

こんな所でしょうか。自信ありませんが…。_| ̄|○

参考:
HINAGATA:CSSの@charsetをご確認ください
Travellers Tale: スタイルシートでのフォントの名前

| WebDesign | このエントリーをはてなブックマークに追加

はてブコメント欄のスタイル

naoyaグループ - naoyaの日記 - うpしてみる。

何だか見にくくなってしまったはてブコメント欄について。

「コメントが先か、タグが先か」という問題ははてブの使い方の問題になってしまうので議論して収束するものではないと思う。『...』や [...] の有無、タグの色などを考えると壮大な「するよしないよ派閥樹形図」ができそうだ。いっそのことログイン後に自分の好きなスタイルに変更できるようにしたらどうかとさえ思うけど、実装はもちろんユーザーも面倒か。

で、条件としては

・ユーザー名、タグ、コメント欄がそれぞれ独立して見える
・タグもそれぞれが独立して見える

個人的には、

・重要度は「ユーザー名>タグ>コメント(>>>日付)」

と思うので、パターン9をベースにしてタグの色を変え、タグの下線は無し、コメントの『...』もアリというのを推してみたい(意外と『』ってコメントを示す記号として重要な気がする)。


(※Photoshop上で作ったので実際の見た目とは若干異なります。)

色とかは、

a.ユーザー名{
color : #0033ff ;/* やや淡い青(なんとなく) */
}

span.timestamp {
font-size: 80%; /* 今のままで */
}

a.user-tag {
color: #17AE2C ; /* やや淡い緑 */
text-decoration: none; /* 下線無し */
font-size: 100%; /* 本文と同じサイズが良いと思います */
font-family: Arial, Sans-Serif;
}

それより line-height というか、ユーザー1人分の<li>の上下に2〜5pxぐらい margin をとったら見やすくなるような気がするのですが、却下ですかそうですか。まあ、妄想するのは自由なので。

あと関係ないですが「Macのフォントはきれいだなー」って人がいて嬉しくなりました。最近naoyaさんが何かとMacの良さを宣伝してくれるのはとてもうれしい。で、何か良く分かりませんが、とりあえずここに Mac mini iMac 置いておきますね(←浅ましすぎ)。

Apple Mac mini 1.66GHz Intel Core Duo 512MB DDR2 80GB SD Intel GMA950 64MB MA206J/A
Apple Mac mini 1.66GHz Intel Core Duo 512MB DDR2 80GB SD Intel GMA950 64MB MA206J/A

Apple iMac 2GHz Intel Duo/20
Apple iMac 2GHz Intel Duo/20

| WebDesign | このエントリーをはてなブックマークに追加

margin-top にマイナスは危険?

CSSでこのようなboxを作るとします。



条件は以下の2つ。

・コンテンツ部分には余白を作る
・タイトルの背景と外枠の間には隙間(余白)ができないようにする

とりあえず box を3つ使って


<div class="box">
<h4>タイトル</h4>
<p>こんてんつ</p>
</div>

こうすれば問題はありませんが、box を3つ使う事もないので2つで作ります。
HTMLは、


<div class="box">
<h4>タイトル</h4>
こんてんつ
</div>

で、CSSは「コンテンツには余白」→「ただしタイトル背景には余白無し」と考えると


.box{
padding : 10px ; /* コンテンツ部分の余白。上下左右に10px */
width : 300px ;
background-color : #FFD0BD ; /* コンテンツ部分の背景色 */
color : #333333 ; /* コンテンツ部分の文字色 */
/*(以下略)*/
}

h4{
margin : -10px -10px 10px ; /* 上と左右に-10px、下には10px */
padding : 10px 0 ; /* タイトルの上下に10pxの余白*/
background-color : #FFF4E9 ;
text-align : center ;
/*(以下略)*/
}


こう組むのが自然だと思います。Firefox や Safari 、Mac IE では問題なく表示されます。

しかしコレだとWin IEboxの枠線が表示されないあらぬところにboxが表示される(なぜか増殖する)などの怪奇現象が続発するのです(IE6で確認しましたが、5.5でもダメな気が)。

なぜか。それは margin-top にマイナスの値を指定したことが原因です。
…って margin にマイナスは何ら不正ではないと思うのですが、それが Win IEの仕様だからやむを得ません。左右は大丈夫みたいですが縦、特に上方向へのマイナス margin 指定は避けた方が良いみたいです。大幅に崩れますので…。

で、横方向へのマイナス margin は大丈夫そうなので、HTMLはそのままで


.box{
padding : 0 10px 10px; /* 上への余白は0、左右と下には10px */
width : 300px ;
background-color : #FFD0BD ;
color : #333333 ;
/*(以下略)*/
}

h4{
margin : 0 -10px 10px ; /* 上には0、左右には-10px、下には10px */
padding : 10px 0 ; /* タイトルの上下に10pxの余白*/
background-color : #FFF4E9 ;
text-align : center ;
/*(以下略)*/
}

このように書けば Win IE でも崩れずに表示されるはずです。

HTMLやCSSをなるべくシンプルに記述しようとすると大抵Win IEで引っかかりますが、IE 7では少しは改善されているのでしょうか…。_| ̄|○

| WebDesign | このエントリーをはてなブックマークに追加

borderの幅はwidthに含まれるのか

borderの幅はboxの外側にあるのか、内側にあるのか。
これについては「URL入りのDOCTYPE宣言をした場合は外側に(標準モード)、そうでない場合は内側」と思っていた。padding についても同様に

標準モード:実際の幅 = width + padding + border
互換モード:実際の幅 = width ( padding および border を含む)

例えば

.hoge{
width : 300px ;
border : 2px solid ;
padding : 5px
}

の場合、実際の幅は

標準モード→ 300 + 2*2 + 5*2 = 314px
互換モード→ 300px(中身は自動計算)

です。

なので困った時は1行目に

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

とか書いておけば大抵のブラウザは許してくれると思っていた。

(参照→ブラウザ別 DOCTYPE 表示モード表

しかし例外があったようで。それがMac IE 5
何で開発もダウンロードもとっくに終了したブラウザの面倒を見なきゃならんのだ、とか思いますが、Mac IE5の場合は標準モードでも border の幅だけは width に含まれるようなのです。ピクセル単位でboxの幅を合わせたい時は結構キツイ。

このように width の中に padding も border も全部含めて表示するのを border-box 、widthの外側にpaddingとborderを作る(仕様書通り)のを content-box と呼ぶらしい。これはCSS3の box-sizing というプロパティなのですが、なぜかMac IE 5はコレに対応してるので

*{
box-sizing : content-box ;
-moz-box-sizing: content-box ; /* ネスケ対策 */
}

とか書いておけば前述のバグは回避できます(たぶん)。間違ってたらすみません。
ちなみに width に全部含めて表示して欲しい人は { box-sizing : border-box ; }で。

そんなわけで、9erの人は仕方ないとして、OS X を使ってて今でもIEを使ってる人がいたらぜひSafariCaminoに乗り換えて頂ければと思います。他に、WindowsでIE5.5を使ってる人がいたらIE6にアップデートしてほしい…。ぜひ(涙)。

| WebDesign | このエントリーをはてなブックマークに追加

SEARCH

RECENT ENTRIES

RECOMMEND

B071KZC6CY
「君の名は。」Blu-rayコレクターズ・エディション 4K Ultra HD Blu-ray同梱5枚組 (初回生産限定)

RECOMMEND

4041047803
新海誠監督作品 君の名は。 公式ビジュアルガイド

RECOMMEND

457531188X
この世界の片隅に 劇場アニメ公式ガイドブック

PROFILE

LINKS

RSS & CC