http://blog.ishiro.com

2007/2/13 火曜日

メイリオ

Filed under: HP作成, css — ishiro @ 23:23:46

Vistaに標準添付のメイリオですが使ってみたいなと思ってgoogleで「メイリオ XP」と検索したらすぐにでてきました。なんだ、もう普通に手に入るのですね。

http://nextxp.net/meiryo.lzh

マイクロソフトの公開情報 “JIS X 0213:2004対応と新日本語フォント「メイリオ」について” ではXP用のフォント配布はしていなかったのでVistaが来るまで待っていようと思っていたのですが拍子抜けです。

【MS P ゴシック】

MS P ゴシック

【メイリオ】

メイリオ

このメイリオですが個人的には好きです。何が良いってアンチエイリアス化されたことです。これには賛否両論あるでしょうが、デザイナさんたちは喜ぶ人が多いのではないでしょうか。しかしMacintoshではOSXになった時から既に完全に実現していたわけでWindowsは何年遅れを取ったことか。

さて、これからどんどんと普及していくであろうこのメイリオですが、デザインでこのフォントに正式に対応しているサイトはものすごく少ないですね。Machintosh環境も考慮すると次のようにフォント指定するのが現時点では無難になります。このページもメイリオ対応にしておきました。

font-family: “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,Osaka,”メイリオ”,Meiryo,”MS Pゴシック”,sans-serif;

自分のブラウザにメイリオを設定しても対応しているサイトが少なくてイヤだと思っている人はIEの「ツール」→「インターネットオプション」→「全般」→「ユーザ補助」にある「Webページで指定されたフォントスタイルを指定しない」をチェックすることで強制的にメイリオを使用できます。

設定を完了したのにFirefoxでアンチエイリアス化されないとお嘆きのあなたには「デスクトップで右クリック」→「デザイン」→「効果」と選択して「次の方法でスクリーンフォントの縁を滑らかにする」を「Clear Type」とすれば見れるようです。

2007/2/5 月曜日

行の高さ指定

Filed under: HP作成, css — ishiro @ 9:07:32

CSSでline-heightを指定する場合、1.5と指定した場合と、150%と指定した場合は全く同じだと思っていたのですが、次の違いがあることを知りました。

line-height:1.5の場合→子ノードに対しても1.5が継承される

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん子ノードテスト。

line-height:150%の場合→子ノードに対して行の高さを計算された結果のピクセル数が継承される

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん子ノードテスト。

つまりline-heightは子ノードの継承を考えると%やpxなどの単位は使わない方が良いという結論です。早速修正しておきましょう。

IE6,IE7専用のスタイル指定

Filed under: HP作成, css — ishiro @ 8:54:48

今までIE6だけに適用したいスタイルを書く場合、次のように書いていました。

* html #hoge {
  padding: 10px;
}

この方法にはちゃんとした名前がついていたんですね。「Star HTML Hack」というのだそうです。知らずに使っていました。

また、今後確実に増えるであろうと思われるIE7だけにスタイルを適用する方法は、次の通りです。

*:first-child+html #hoge {
  padding: 10px;
}

これも同様に「Start HTML Hack」と呼ぶのでしょうね。

2007/1/27 土曜日

RSSアイコン

Filed under: HP作成 — ishiro @ 10:51:30

RSSリーダに登録したいサイトがあった時にRSSフィードを探すのに苦労したことはありませんか?特にIE6だとページ中に「RSS」や「ATOM」という文字を探すのに苦労した記憶があります。

僕の場合FFにRSS Panelというプラグインを入れてからは苦労することはなくなりましたが探すのが面倒だなと思ったことがある人もいると思います。実はもっと良い方法があるのかもしれないですけどね。良く知りません(笑)

そこでこのページのRSSアイコンは大きく目立つようにしてみよう!と思いました。RSSアイコンはFirefoxで使われていたものが事実上の標準になっており、IE7でも採用されたほどです。確かにもうこのアイコンに見慣れてしまいました。

このアイコンはFEED ICONSから入手できます。ピクセルデータのみならずベクトルデータまで提供してくれています。そこでそのまま使うのも面白くないので、僕の場合feedburnerを使っていることもあり、ちょっと手を加えてみました。

RSS 2.0

これでfeedburner経由だということがわかるかな?(笑) これだけRSSアイコンが目立つサイトも見たことがなく面白いのでしばらくこのまま貼り付けておこうと思います。ちょっとウザイけど(^-^;

This Page Is Valid XHTML 1.0 Transitional

Filed under: HP作成 — ishiro @ 9:04:45

このページのXHTMLとCSSがW3Cの推奨する形式で正確に書かれているのかチェックしてみました。

W3C Markup Validation Service

出てきたエラーを修正し無事に合格を頂きました。これからのWebは確実にDocTypeの意識と指定が必要になりますし(というか既になっていますね)、Webページを作成する業務に携わっている人は全てこのサイトでチェックしておくべきですね。

This Page Is Valid XHTML 1.0 Transitional

合格アイコンを頂きましたのでページに貼っておきます。

追記

ブログコンテンツにFlashオブジェクトを貼ったらNot Validって怒られました。embedタグにflashvarsやsrcなんて属性はないって言われるのです。これはプラグインの独自拡張属性だから仕方ないですね。

次のページ »