タグ

ブックマーク / www.lucky-bag.com (5)

  • Lucky bag::blog: IE で min-width を指定する方法

    IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの2種類の方法がある。 実際に試してみたサンプル IE5.5 と IE

  • CSS Flamework -CSSによる段組レイアウト-

    CSS による段組レイアウト 文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。 以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。 実際に使用する際には、style 要素ではなく link 要素で core.css などにリンクして、そこに defaultReset.css などとともに layout.css としてインポート。 この文書の詳細については、「CSSによる段組レイアウトのフレームワーク」を参照してください。 2 カラム 文書構造は以下の通り。メイン、サブの順番。 div.container -div#head -div.content --div#mainContent ---div.section --div#subContent

  • Firefoxで今見ているページを右クリックからIETesterで開く方法 - lucky bag

    今見ているページを、右クリックからIETesterでバージョン指定して開けたらなあと思ってTwitterで呟いたら、akzさんに「Launchy」で出来そうって教えて頂いた。 @e_luck URLを外部アプリに渡す拡張だったらLaunchyってのがあったんですけどもう開発止まってるみたいですね https://addons.mozilla.org/ja/firefox/addon/81 @e_luck あとバージョン指定は引数渡してやればいけそうです http://tinyurl.com/cd8a2f それ頂きっす!ということで、Launchyを使って今見ているページをIETesterで任意のIEバージョンを指定して開く方法をメモっとく。 Launchyのインストール Launchyは、リンクなどを任意のアプリケーションを指定して開けるようにする拡張。3年ほど開発止まってるみたいだけど、

  • 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 を作成する際のお約束

    CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦

  • 1