フォントサイズを指定する際、絶対単位を使う人は少ないと思います。絶対単位で指定すると、IEでフォントサイズの変更ができなくなるためです。そこで、フォントサイズに関するCSSハックをまとめてみました。 今まではユニバーサルセレクタですべてのフォントサイズを100%に揃え、そこを基点に指定を行っていました。 * { font-size: 100%; } p { font-size: 80%; } これでも問題はない...
Patrick Burtのエントリーから、スタイルシートの装飾のみでデザインした８つのロゴデザインを紹介します。 8 Examples of Logos Using Only CSS 指定は、左上から順に下記のように [...]
ごもっとも。 はてなブックマーク - turing_patternのブックマーク / 2008年07月29日もし可能ならば Vista&IE7 にもフレンドリーにしていただけないでしょうか VistaのIE7でsans-serifがGulimになる - 三日坊主と呼ばせない！日記自宅マシンをVistaに入れ替え、本運用を開始してから2週間くらいたつわけなのだけれど、今日たまたまとあるサイトを表示したときに？？？な事態に。 続きを読む
IE との兼ね合いで，font-size は%で指定しておくのが，いちばん無難だと思うのですが，IE6, 7 にちょっと痛いバグがありました。 小さなサイズの文字が指定どおりの大きさにならないのです。 11px以下のフォントが指定より大きくなる まず，font-size のページを IE6 または IE7 でご覧ください。 順にフォントサイズが小さくなっていくはずなのですが，74%から72%あたりの日本語のフォ...
自分用のメモです。font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で...
スタイルシートで font-family: "メイリオ"; と指定しているサイトをちょくちょく見かけるが これは今の時点ではやめておいた方がいいんじゃないかと思う。 確かに Windows XP にもメイリオを入れられるようになったが、 こないだ書いたように Windows XPでメイリオを使う方法まとめ - 頭ん中 メイリオをダウンロードして XP に入れるだけでは 綺麗な縁で表示されない。 から。 ブラウザ...
『 CSSであまり使われていないが使った方がいいフォント8選『8fontsyouprobablydon'tuseincss,butshould』｜CREAMU 』
Browser CSS Hack/Filter supportは、IE4, Ns4から、IE8, Fx2, Op9.5, Safari3など、多くのブラウザのCSS Hack/Filterの対応をまとめたサイトです。 Browser CSS Hack/Filter support
CSS 3やHTML 5で提案されている諸機能への対応が進んだSafari 3.1。今回はその中からWeb Fontに関する機能を見ていこう。 現在、Webページで利用できるフォントはユーザーの環境にインストールされたものだけで、文字の表現の幅は非常に限られている。しかし、Webフォントの機能を利用できるようになれば、制作者がサーバー上に用意したフォントでWebページを表示できるようにな...
Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実― この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Safariの登場など、環境が複雑化している現在、下手にfont-familyは指定しないほうがいいなと思って、ブログでのフォント指定をやめてみた。 ただ、メイリオで表示してもらいたい場合、文字コードがUTF-8では、欧文フォントが「メイリオ」、日本語フォントは「MS...
使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。 実際の状況を確認出来るように、デモページもご用意しました。 必要あるか分かりませんがダウンロードも出来るようにしときました。 拡張子がshtmlとかなってるので、htmlにして下さい。 ハックのデモページ デモページのファイル一...
Webコンテンツ制作時にフォントの細かな指定に悩んだことは無いだろうか？文章を中心とするコンテンツであれば、フォント（font-family）、フォントサイズ（font-size）、行間（line-height）といった部分には気を使いたい。...
様々なハックを使えばIE5.0移行のブラウザなら同じように見せるのは比較的簡単なのですが、ハックのコードだらけのCSSファイルになってしまうこともしばしば。今後、古いブラウザのシェアは低くなっていくことを考えるとハックしていないクリーンなCSSファイルにしておきたいものです。そこでブラウザごとに異なるCSSファイルを指定するわけですが、従来のやり方だとJavaScrip...
『 ポイント、ピクセル、パーセント、emの変換した際の近似値チャート。 』
「ブラウザ毎の処理を吸収したパーセント数値」、つまり共通のフォントを使う数値指定をすればよいんじゃないか、ということになったので、以上の表の中で好きなサイズ（笑）を選ぶ分には、ユーザーの設定状況が同じ（96ppi/12pt で ＭＳ Ｐゴシックがデフォルト）であれば、ほとんどそろいます。揃ってくれ！ ところで 同じポイント相当の指定が複数ある点にお気づきだと...
もあります（普及はしていない）。これらの低解像度、高解像度ディスプレイは、多数ではないものの相当数のユーザーが存在します。 標準のマックで、1インチ程度の大きさのつもりで、72pxと指定したものを、windowsで17型UXGAで見ると、約0.61インチになります。元がこれぐらい大きい文字なら問題はありませんが、これを、10pxなんかですとえらいことになります。自分のMacでは3....
チェック対象は、HTML文書内のstyle要素内のCSSの指定と外部CSSファイルです。今回はカウント7以上の全てのフォントをひっくるめて載せてます。 左側の数字は調べた範囲での出現数、右側がフォント名です。 あくまでもCSS中に出現したフォントを数えたもので(一つのファイル内での重複は省いて数えています)、世の中のパソコンにインストールされてる割合ではありません。 こ...
CSS Font and Text Style Wizardサイト上でCSSによるフォントスタイルを確認できる便利ツール...
CSSで上記のようなレイアウトをしたい場合に、必ずといっていいほど直面するバグについて。その具体例と知っておくと便利な回避方法です。 このレイアウトを行う場合、普通なら次のようにスタイルの定義を考えます。 #parentBox { width:100%; } #childBoxL { float:left; width:50%; } #childBoxR { float:right; width:50%; } ※marginとpaddingの設定はここでは考えない。 一見これで何も問題ないように思え...
、何か妙なものが混じっていました。前に下線の付いたプロパティがあったり、同じようなセレクタに対して同じプロパティを指定していたり。 「ブラウザごとの差の吸収をします。」 先ほどはこの一言で終わりましたが、まさしくその部分です。 CSSにおける「ハック(Hack)」とは、各ブラウザのバグを利用して、そのブラウザにおける微調整を行おうというものです。よって、...
個人的にも、業界的（どの業界!?）にも需要が高い、CSSハックのまとめサイトをいくつかまとめてみました。 CSS Filters (dithered.com) いつのまにか消えていましたが、こっそりと移転していました。 一番情報量が多い、頼りになるサイトです。 centricle : css filters (css hacks) いろいろとまとまっています。一覧表になっていて見やすいです。ですが、少し情報が古いかな、と感じます。 Fu...
