cssの最近のブログ記事

備忘録。スクリプトを色分けするためのjavascriptライブラリを導入しました。

いくつかあるようですが、googleから提供されている「google-code-prettify」をなんとなく選んでみました。

cssは添付のものをそのままつかっていますが、外枠に関する定義はコメントアウトして、カラーリングのみを利用しています。

また、font-familyの指定は、font-family: "Courier", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Courier New", "メイリオ", "MS ゴシック", monospace;としてみました。OSXはCourier+ヒラギノ角ゴシック、VistaはCourier New+メイリオ、XPはCourier New+MS ゴシックで表示されているはずです。

トップページをxhtml(XHTML 1.0 Transitional)で書き直したら、中に埋め込んだ全画面表示のFlashが表示されなくなってしまいました。

ちょっとググったら、原因はすぐわかりました(ホントにすぐに。改めて、検索は便利だなぁ......)。

高さおよび幅が 100 パーセントに設定された Macromedia Flash Player ムービー (SWF) が以下のブラウザで正常に表示されないことが確認されております。

(中略)

XHTML コードで定義されている doctype および DTD がブラウザのレンダリングに影響を与えているのが原因です。

(中略)

回避策としては、HTML ファイルの上部に以下のような XHTML コードがあります。この XHTML コードを削除して対処してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

メモ: この回避策を適用したファイルは、XHTML に準拠したファイルでなくなりますのでご注意ください。

Adobe - Flash TechNotes : 100 パーセントに設定されている Flash Player ムービーが正常に表示されない

おいおい 、Adobeがそれでいいのか......。

いろいろ調べてみたら、 swffit を使えば、簡単に全画面表示ができるようでした。使ってみると確かに解決しますが、 swfobject日本語訳 )とあわせてふたつ、たかだかswfを埋め込むだけのために使うのもスマートでない気がしたので、もう少し調べると、cssに追加で記述すれば回避できることがわかりました。

cssにこちらを追加することで、あっさり解決しました。

body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

以上です。

調べる途中でこちらのサイトも参考にさせてもらいました。

(OSXの)Firefox 3には期待しています。

今回のバージョンアップで日本語のレンダリングも若干変わったようです。

<strong>などによる、太字表現が、疑似ボールドではなく、きちんとフォントファミリーの上位ウェイトで表示されるようになりました。

従来のFirefoxでは、


と、太字が疑似ボールドでしたが、新しい3.0(b2)では、


と、太字がきちんと上位ウェイト(W3→W6)になります。

(参考:htmlによる表示)

ヒラギノ角ゴシック Pro W3

ヒラギノ角ゴシック Pro W3の太字

ヒラギノ角ゴシック Pro W6

※説明用の記述なので、Safariなどでは意図通りに表示されません。

フルフォントネームによるfont-family指定で表示されるようなので、フォントの認識の方式が変わったようです。

引き続き、検証したいと思います。

今回のバージョンアップで、Safari、Operaに続き、Firefoxからも疑似ボールド表示がなくなりました。

OSXってやっぱりいいなぁ。

答え:メイリオ

前回のエントリー、「フォント名はいくつある」の続きです。

TTEditで調べてみたところ、
Windows(Vista)の新しい日本語フォント、「メイリオ」には、結局2つしか名前がありませんでした。

主要なブラウザは「フルフォントネーム(日)」であるところの「メイリオ」で指定されたfont-familyを認識します。

標準本文組み。

文字サイズ10pt(13.333...px) 行間1.6(21.333...px)。

文字サイズ9pt(12px) 行間1.8(21.6px)。

なんか段間狭いな……。現在調整中。