IE, Fx, Safari, Opera で Web Fonts を使う | ヨモツネット
先日Opera 10 の アルファ版がリリースされ、これでメジャーなWebブラウザーすべてで Web Fonts を使う準備が整いました。 実際に demo を作成してみました。IE 5.5 以降、Safari 3.1 以降、Firefox 3.1 b 以降、Opera 10 a 以降のいずれかの環境で確認できます。EOT ファイルは文字数を調整し、1.6 MB のフォントをダウンロードします。IE 以外の Web ブラウザーは 2.9 MB のフォントをダウンロードします。大きいファイルをダウンロードするので適用されるまでに時間がかかります。(転送量が気になりそうですね…) 動作確認用の demo IE 5.5 での Web Fonts 表示の様子。IE は EOT ファイルのみに対応しています。 Safari 3.1 での Web Fonts 表示の様子。問題なさそう。 Firefox
IE 7 の拡大時に余白ができたり、縮小時に食い込んでしまうバグの対策 | ヨモツネット
IE 7 のズーム機能を使用すると、position プロパティを指定している箇所の表示がおかしくなってしまうことがあります。IE 7 でズーム機能を使用すると崩れてしまうdemoを用意しました。 不具合再現用のdemo 通常時 (サンプル画像は 100% 時)には意図したとおりにレンダリングされています。 拡大時 (サンプル画像は 120% 時) は下部に意図しない余白ができてしまっています。 縮小時 (サンプル画像は80%時) には黒い枠がグレーの枠の要素に食い込んでしまっています。 この例のHTMLの構造は 黒い枠のついたdiv要素 薄グレーの背景のdiv要素(position:relative;) 濃いグレーの背景のdiv要素(position:absolute;) という入れ子の構造になっています。 この不具合の原因はおそらくpositionプロパティが適用された要素の入れ子
画像の下にテキストが回りこまないレイアウト | ヨモツネット
概要 画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。 さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。 また、画像がない場合でも画像分が詰められて表示されます。 これを応用すれば柔軟に対応できるコンポーネントをつくることができます。 動作確認用の demo 動作確認用の demo (左右逆版) 説明 display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
書籍などに紹介されていない display : inline-block について
