過去にもfont-sizeの問題について考えた事があったのですが、 今回はfont-sizeのパーセント表記一覧 - Webtech Walkeを読んで、 今後のfont-size指定、自分はこうしようと思うのを書いておきます。 ブラウザによって文字の大きさが変わる pxやptでの指定だと、IEでは文字拡大に対応しなくなるし、 em指定だとバグが発生するらしいし、 ％でもブラウザによって大きさが変わるなど、 なんだかいろいろ問題の多いfont-sizeの指定。 いろいろなことについてかかれているのが、 「英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ - TRANS [hatena]」 Yahoo! UI Libraryを使うって手もありますが、 それだと設定が13pxが初期設定になるから、なんだか使い辛い。 ではどうしたらいいか？ 基本はpx、IEはハックで対応

mixiのとあるコミュニティの質問にて、 画像を左下に配置して、テキストを回り込ませる方法は？ というような質問があがってた。 確かに"float:left"させただけだと、回り込みはするものの、 一番上に配置されてしまうし、marginとかpaddingとかをつけたとしても、 その部分にテキストは流れこまずに、空白となってしまう。 どうやればできるんだ？ というわけで考えてみた。 img→テキストの順でfloat:leftさせてみる 通常の配置方法というわけではないけど、こんな風になる。 ■サンプル１（height:200px） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキ

ネタ元：font-familyの憂鬱 - Webtech Walker 以前から気づいていたのですが、 ％でfont-sizeを指定していると、 IEだけなぜか他より少し大きくなっていた。 フォントの問題なんだろうなって思っていたけど、 こればかりはどうしようもないなとあきらめていた。 文字コードがUTF-8で、日本語フォントを指定しないと、IEはフォントサイズ11px相当の文字を12px相当の大きさで表示させてしまします。 font-familyの憂鬱 - Webtech Walker そんな時にネタ元のエントリーを見つけたのだが、 本当にそれだけで変化するのか！？ と不思議に思ったので検証してみることにした。 CSSの設定など 今回のCSS設定は日本語フォントの指定ありと無しを用意した （fontの部分だけ抜粋） ◎日本語フォント指定無し body{ font-size: 10px;

CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこないようにする 写真の横に文字をもってきて、その文字が多ければ 写真の下にも文字をもってくる・・・というような場合は、 単純にimgにfloatをつけるだけでできるのですが、 コンテンツが下に来ないようにしたい場合はどうしたらいいか。 ■例１ー１（imgにのみfloat:left、下に回り込む） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキス

jQueryのロールオーバーもたくさん出ていますが、 多くで使われているのは、画像のsrcを変化させるものだと思います。 例えばyuga.jsでのロールオーバーもsrcを変化させるものだ。 僕もそのスクリプトをを今まで使っていたが、 それだとIE6などでは何度も画像をダウンロードしにいってしまう。 また、場合によっては他のブラウザでもちらつきなどが起きる場合もある。 特に問題はないのだけど、気になる人もいるという話を聞いて、 ちらつきが起きなかったり、何度も読みに行かないようにするスクリプトを 考えて作ってみることにした。 ロールオーバーサンプル ◆スクリプト $(function(){ $('.over').each(function(){ //srcセット rolloverSrc = $(this).attr('src').replace(/(\.gif|\.jpg|\.png)$/,

ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を

Webサイトの背景画像をカッコよく、でもなるべくラクに作りたい。そんなときに活躍するツールといえば、やはりPhotoshopだ。中でも、世界中のWebサイトで大量の素材が配布されているブラシファイルを活用すれば、巷で見かける流行のデザインも手軽に取り込める。 今回は海外のWebサイトを中心にネット上で配布されているブラシの中から、特に背景画像に使いやすそうなものをセレクトしてみた。実際の使い方の一例も手順を追って紹介する。なお、ここで取り上げたブラシファイルを自分のWebサイトで利用する場合には、あらかじめ配布元サイトで利用条件を確認してほしい。 Sui Generis Brushes v.3 1つ目に紹介するのは、「Brusheezy」という専門サイトで人気の高い「Sui Generis Brushes v.3」だ。特にグラデーションを組み合わせると非常に美しい背景画像が作れるブラシが全