タグ

CSSに関するsayaemonのブックマーク (68)

  • [CSS]気をつけたいIE 7のバグ -CSS-Discuss

    CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意: バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例: body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small

    [CSS]気をつけたいIE 7のバグ -CSS-Discuss
    sayaemon
    sayaemon 2009/09/12
    IE7のバグ。こんなにあったのか…
  • [CSS]1ピクセルの画像で、リストの構造をビジュアル化するスタイルシート

    サイトマップなどによさそうな、1ピクセルの背景画像を使用してリストの構造をビジュアル化するスタイルシートをCSS-Tricksから紹介します。 Style a List with One Pixel demo 構造化は入れ子のリストにも対応しており、上記デモでは三階層分のリストとなっています。 構造化を明示する罫線は1x1ピクセルのグレーの画像で、横線と縦線は背景を繰り返して配置しています。

    sayaemon
    sayaemon 2009/09/11
    サイトマップとかに使えそう
  • Firefoxでスクロールバーの有無によるセンターの位置のずれ|ConneLog|ConneCre

    Firefoxではスクロールバーの有無によるセンターの位置のずれが生じます。 スクロールバーのでない短いコンテンツでもセンターの位置がずれないようにするスタイルシートの指定方法のメモ。

    sayaemon
    sayaemon 2009/09/11
    忘れがち。
  • [CSS]スクリプトやテーブルや条件付きコメントやハック無しで実装するドロップダウン型のナビゲーション

    CSS Hack、IEの条件付きコメント、table要素、JavaScriptを使用しないで、ドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Two CSS menus - NO hacks, NO conditional comments, NO tables and NO javascript. demo ドロップダウンを表示するトリガーはhoverとclickの二種類があり、どちらもハック無しで実装されています。 二つとも、active時にはドロップダウンがキープされます。 ナビゲーションはリスト要素で実装されており、各親階層ごとにul要素が使用されています。 また、dl要素版も公開されています。

    sayaemon
    sayaemon 2009/09/11
    ハック無しでドロップダウンナビ。
  • floatプロパティのテスト - 3ping.org

    Comments:7 MaKOTO 2007年11月15日 01:27 こういう授業を受けている生徒さん達が羨ましいです。 web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、 ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。 ※役所関連の仕事ではネスケ4.xが対象ブラウザに入る可能性がなきにしもあらずですが・・・。 wu 2007年11月15日 12:59 MaKOTOさん、お久しぶりです! 生徒たちは「ふーん」という顔で淡々と勉強しています。(笑 テーブルデザインを知らない人は、逆にすごい素直にHTMLCSSを覚えられるようです。 「おじさんが勉強した頃は大変だったんだぞ」みたいな時代になるのでしょうか‥ ガコブル。 sf 2007年11月21日 03:10 答えは? wu 2007

    sayaemon
    sayaemon 2009/09/11
    floatの基本、テスト形式。float苦手なんだよなあ
  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

    sayaemon
    sayaemon 2009/09/11
    CSSでデザインするボックス、しかしIE6除外。角丸いいなあ早く普及してほしい
  • Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker

    Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
    sayaemon
    sayaemon 2009/09/11
    footer固定、ライトボックス使いたい
  • [CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート

    CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と

    sayaemon
    sayaemon 2009/09/11