CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
Lucky bag::blog: CSS Reboot に見るウェブデザインのトレンド
以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになっている。ちなみに、CSS Reboot のその場でクリックするだけで評価できる vote 機能は、シンプルで良いな。送信した後に、Total score も表示されるし。 んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。 1024px の幅 Silk Icons の使用 暗い背景に明るい色のテキスト 大きめのフッタ 1024px の幅
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
