IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
[CSS]ハック無しでIE6でmax-widthを実現するスタイルシート
CSS HackもJavaScriptもIEの条件付きコメントも無しで、IE6でmax-widthを実現するスタイルシートをCSSplayから紹介します。 'max-width' for Internet Explorer IE6 demo: center 実装のポイントとなるのは左右に配置されたdiv要素で、それぞれマイナスマージンを指定します。 コンテンツを配置するdiv要素には「overflow:hidden;」を指定します。 デモでは上記のmax-widthのコンテンツをセンターに配置したものと左右に配置したものがあります。 'max-width' centered 'max-width' left 'max-width' right
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
[CSS]フロートしたナビゲーションを中央に配置するスタイルシート
リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。 ナビゲーションのwidthは指定無しの成り行きです。 Centering Float Left Menus デモでは、CSSハックやinline-block, table/table-cellを使用せずに実装されています。 下記に、それをシンプルにしたデモをアップしました。 シンプルにしたデモ IE6/7/8beta2, Fx3, Op9.5, Safari3, Chrome1で正常に動作しました。IE5.5, Fx2はダメでした。 追記：その1 リストを内包するdivに「text-align:center;」をしたら、上記ブラウザ＋Fx2に対応できました。 なんで、きくのだろう、、、？ シンプルにしたデモ（Fx2対応） 追記：その2 「ふ」さんのコメントにより、Saf
CSS2/DOM - Styling an input type="file"
Credits wholly go to Michael McGrady, who invented this technique. A browser must support opacity to support this technique. Therefore it doesn't work in Explorer 5.0 on Windows, Explorer 5 on Mac and Opera. A reader suggested adding a keyup event to the real input box so that you can copy the text the user types to the fake one. This page has been translated into Chinese and Italian. Of all form
レイクって主婦でも申し込めるの？ | 現金が必要な時に一番便利なネットキャッシングで即日借入【ネポ】
レイクってよくCMでも目にするし、消費者金融を何か利用してみようかなって考えたときには候補として考えている人もいますよね。やっぱりいくら条件が良くても全く知らない消費者金融よりは、名前を知ってて利用者が多い方が安心できます。でもレイクって主婦でも申し込みできるのでしょうか？申し込める人と申し込めない人、どういう決まりになっているのでしょうか？ レイクにはもちろん申し込み条件がありますが、20～65歳までという年齢の条件があることと、きちんと収入があることの2点だけです。つまり、主婦でも収入があれば申し込むことができるんですね。主婦の収入といえばパートということになりますが、毎月きちんと収入を得ることができていれば、正社員や派遣社員などでなくても大丈夫なのです。 レイクはレディースレイクという女性専用商品を扱っています。対象が女性というのはもちろん、レイクの担当者も全員女性というもので、借り
スタイルシートをめぐる冒険
HTML5対応版clearfix（予告） » 最近、あるサイトのソースをXHTML1.0からHTML5に書き換えていて、私家版clearfixに不具合があることを発見した。近... [read more] clearfixの決定版を作る －Mac IE編－ » 前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがな... [read more] clearfixの決定版を作る －IE編－ » 今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか... [read more] inline-blockの奇妙な世界 » inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」
IE6のバグのまとめ - Webtech Walker
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い･･･多すぎるよ！逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
フッターの背景をコンテンツが少ない時でも下まで表示させる
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
あとで絶対活用してみたいと思いましたので一応書いておきます。 『誰でも使っていいよ！』との事なので興味のある方に。 CSSハックをしない、JavaScriptを使わないというもの。 参考：CSSハックってなんぞえ？ 詳細は以下に。 テンプレート色々 基本はダウンロードファイルは見つからなかったので各ページでソースを表示して参考にする感じ。 英語がわかる人は作者サイトから見た方が早いかも。 作者サイトは以下から。 Art and design by Matthew James Taylor 3カラム中央メインタイプ ピクセル割りem割りパーセント割り 3カラム左メインタイプ ピクセル割りem割りパーセント割り 2カラム右メインタイプ ピクセル割りem割りパーセント割り 2カラム右メインタイプ ピクセル割りem割りパーセント割り 2カラム均等割り パーセント割り このほか1カラムのタイプや、マ
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
マージンの相殺について：CSS | Tech de Go
漬物は料理において重要なアクセントを提供します。 その酸味が、食事の味わいを引き締め、新たな深みを加える役割を果たします。 例えば、酢漬けの漬物は、独特の酸味と爽やかさで料理全体を軽やかにし、油っぽさを中和します。 これにより、食べ手の口の中をさっぱりとさせるだけでなく、食欲を増進させる効果も期待できます。 また、塩漬けの漬物もまた重要です。 塩の効果で野菜から水分を抜き、旨味を凝縮させることで、料理に深いコクと風味を加えます。 この塩味は料理全体のバランスを整え、食事を豊かにしてくれます。 漬物の酸味が生む料理のアクセントは、料理の種類や季節によっても異なります。 夏にはさっぱりとした酢漬けの漬物が、冬には塩漬けの漬物が特に重宝されます。 季節感や地域の食材と漬物の組み合わせを工夫することで、料理の魅力がさらに引き立ちます。 漬物は単なる付け合わせではなく、食事の一部としてその重要性を増
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
CSS Spriteを活用しよう - DesignWalker