IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
吹き出しを作るCSSのテスト。（追記、修正あり） - NOBODY:PLACE - MUTTER
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 吹き出し処理無しのblockquote。 「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」 「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」 「気持ち良かったですねえ。ほぼ、いきかけました」 吹き出し処理ありのblockquote。 「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」 「もう苦しいところか
リスト全体の余白を調整する
margin の値には auto（自動）を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン（外側の余白）を指定する ボックスのパディング（内側の余白）を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u
IE7用のハック（*+html body）で指定したスタイルがOperaにも適用される - Webtech Walker
解決方法 そういうわけでXML宣言を入れてる場合にIE7のみ適用させたいスタイルがある場合は「*:first-child+html」を使用したほうよいです。このハックで指定したスタイルだとXML宣言の有無に関わらず、Operaには適用されないのを確認しました。 なのでIE7のみに適用させたいスタイルがある場合は以下のように書くとよいです。 body { background: blue; } *:first-child+html body { background: green; } まとめ とりあえず今回のことでわかったのは、何が起こるかわからないのでハックは極力しないほうがいいということです。当たり前のことですが、改めて思い知りました。 もしかしたら他にも要因があるのかもしれなし、Operaのバージョンによって現象がでないとかいうこともあるかもしれません。詳しく知っている方は教えてくだ
CSS技研：ロールオーバーボタンで吹き出しを表示する - builder by ZDNet Japan
カーソルを重ねたときに吹き出しを表示する 今回のサンプルではリンクを設定したボタンにカーソルを重ねると、ボタンの下に吹き出しを表示するように設定した。カーソルの動作によってボタンとは別の場所に何かを表示する場合、一般的にはJavaScriptを利用するが、ここではCSSだけで設定している。 a{ display: block; width: 120px; height: 30px; overflow: hidden; } span{ display: block; width: 193px; height: 112px; background-image: url(home.png); background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; } #movie span{background-image: ur
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Stu Nicholls | CSS PLAY | Cross browser concertina menu using only css
CSS MENUS › Concertina menu Date : 28th June 2008 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. The Concertina Corporation Inc. Who we are What we do Where to find us How to contact us Why you should use us This is the menu most requested by visitors to CSSplay. It has been a little while coming but better late than never. The Concertina The c
CSSで罫線を角丸で表示する（１）：FirefoxとSafariのCSS徹底検証 - builder by ZDNet Japan
前回、前々回でブラウザと標準規格の動向を見てきたが、今回からは、Firefox 3やSafari 3が新しく対応したHTML/XHTMLやCSSを紹介していきたい。 最初に紹介するのは、Safari 3が新しく対応した、罫線の角を丸く表示するスタイルシートだ。角丸のデザインは、Webページではよく利用されているが、現状では画像を使って表現するしかなく、HTML/XHTMLソースも複雑になるといった問題がある。スタイルシートだけで設定する機能は制作者の多くが待望している機能の1つと言えるだろう。現在のところ、Safari 3とFirefoxが対応しているが、OperaやInternet Explorerは対応していない。 -webkit-border-radiusプロパティ Safari 3が新しく対応した-webkit-border-radiusプロパティでは、半径を指定することで罫線の角
CSSで罫線を角丸で表示する（2）：FirefoxとSafariのCSS - builder by ZDNet Japan
オリジナルコンテンツが満載！ 意外と知らないNutanix HCI の情報を集約 読めばわかる！いまHCIが注目される理由 RPA見直される”業務”と”人”の関係 人的リソースを単純作業から解放！ 高付加価値業務への転換のために 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 50年の経験を持つアイネットが提供 ユーザー企業の使いやすさを第一に考えた ワンストップで使えるマネージドクラウド 新OSのWin11はどう進化したか ビジネス上の役割、開発の要因と Win11が目指した5つのポイントを紹介 Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 全世界22万以上の企業・組織で採用 DX時代の顧客価値創出に大きな役割を担う CI/CD環境の現実解を紐解
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
clearfix - 10press
floatするボックスを含む親ボックスの背景表示 floatプロパティを用いて段組をしたときに、Internet Explorer以外のブラウザだと親ボックスの背景色や背景画像、borderが途切れることがあります（サンプルHTML）。 これは作成者の立場からするとIEの挙動がありがたいのですが、CSSの仕様を見るとfloatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまうと言うのが正しい挙動のようです。 親ボックスの背景を表示させるための一工夫 親ボックスの背景を表示させるには以下の方法があります。 親ボックスの幅を指定する 親ボックスの高さを指定する 親ボックスにvisible以外のoverflowを指定する 親ボックスの最後に完全な「クリアされた」要素を置く 1.の方法ではIEだけしか背景を表示することが出来ません。
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
MizillaとSafariのCSSサポートを組み合わせればCSSだけでboxのドロップシャドウができる - オケラボブログの避難所跡地
と思ったんだけど、組み合わさってないんだからできないわけで。アイディアだけ。 Mozillaではborder-colorに複数色を設定すれば、例えばグラデーションのかかったborderを作ることができます。(てっきりCSS3公式なのかと思ったら、CSS3背景、ボーダーモジュール(邦訳)を読むとどうも違うような気がする。) 他方、CSS3のRGBAColorを使えば半透明色を指定できます。 両者を組み合わせれば、徐々に薄くなるborderが作れるってわけです。 border-colors(仮)はMozillaのみ、RGBAには(たぶん)WebKitだけが対応している状況なので、両者を組み合わせるのは少なくとも現時点では残念ながら不可。(今調べたら-moz-rgbaなんてのがあるみたいだけど動作しない。どうやらFirefox3で導入されるみたい。) というわけで、いつか動くかもしれないサンプル
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
Writing Efficient CSS - MDC
この記事は、Mozilla Japan 翻訳部門もしくはその関連グループによりすでに翻訳済みのものを移行してきました 移行元の文書。英語版と内容が異なる場合や、MDC の他の記事と整合性のとれていない場合があります。 以下の文書では Mozilla の UI で使用する CSS ファイルの最適化についての規則を概説します。最初の節では Mozilla のスタイルシステムにおけるルール分類の要について書きます。このシステムについて理解してもらった上で、続く節では Mozilla のスタイルシステムの力を最大限に発揮するルールの書き方を説明します。 【訳注: CSS スタイルのマッチング処理に於いては、ルール集合のうち各要素に対してマッチするものがないか順に全て調べていく必要があり、単純計算では (要素数)×(ルール数) 回のマッチング処理が必要になってしまいます。如何にしてこれを効率化するの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sakurachiro.com
http://www.cubic4.net/blog/37-css/52-csshack.html
http://d-lover.com/css/hack.shtml
Blogger