タグ

ブックマーク / www.yomotsu.net (5)

  • IE で Web Fonts を使う方法 (eot ファイルの作り方) | ヨモツネット

    IE では Web fonts を使うことができます。ただし、現在は Microsoft WEFT などで作成した .eot のファイルにしか対応していません。また、この記事で紹介する手順中の Enter ther URL address of your Web page and click ‘Add’ で入力した URL 配下でしかこの eot ファイルを使うことができませんのでご注意ください。 IE の Web fonts を確認するための demo を用意しました。Windows の IE 5.5 以降で確認することができます。 WEFT についてをまとめたドキュメントはほかにも存在しますので合わせてお読みいただくとよいと思います。 一松書院 : Webページでのいろいろな한글フォントの利用について 雛形倶楽部情報データベース : eotファイルの作成方法(フォント埋め込み技術) R

  • 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

  • CSS で簡単に上下中央揃えを実現する | ヨモツネット

    概要 CSS のみで、table 要素のような上下中央揃えを実現するための方法と解説です。 たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。 対応 Web ブラウザ Firefox 1, 2 Netscape 6, 7.1 Safari 2, 3 Opera 9.2 IE 5.01, 5.5, 6, 7 ( inline-block で実現) で意図した通りに表示されることを確認しました。 解説 中央揃えにしたい要素に対して、display:table-cell; を指定します。( table-cell が指定された要素には vertical-align が有効になります。) div.sample1 div { display:table-cell; } ただし、 IE 6, 7 に

  • Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット

    概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi

  • 書籍などに紹介されていない display : inline-block について

    display : inline-block をつかったレイアウト 初版 : 2008 年 7 月 5 日 アップデート : 2008 年 10 月 16 日 小山田 晃浩 株式会社メタフェイズ 矢印キーの左右でスライドを切り替えることができます。

  • 1