IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
[CSS]基本的なレイアウトやリセットなどが設定されたスタイルシートのフレームワーク集
Hidden Pixelsのエントリーから、タイポグラフィ・フォーム・グリッドやシンプルなレイアウト・リセットなどが設定されたスタイルシートのフレームワークを紹介します。 CSS Frameworks
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス
YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。 Blueprint YAML YUI Tripoli meyerweb warpspire christianmontoya crucialwebhost 下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。 Blueprint Blueprint Based:Reset Reloaded <textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
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
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
萌え理論Blog - CSSまとめ
解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。CSSを使わなくてもHTMLで直接デザイン*3できなくはないですが、CSSを使った方が標準的で効率的です。例えば100枚のHTMLファイルを一つのCSSで一括して指定できます。また、はてなダイアリーもそうですが、ブログのデザイン指定にも使います。 基本 スタイルシートの基本 -- ごく簡単なHTMLの説明 よく使うCSSの話|基本編 CSS Nite Vol.7: Web制作現場の対立を解消する！ XHTML+CSSガイドライン作り [1] 一覧 とほほのスタイルシート入門 【HTMLタグの簡単検索】TAG index - Web制作情報 レイアウト CSSによる段組（マルチカラム）レイアウト講座 スタイルシートによる崩れない 2カラム 3
フリーのCSSテンプレート＆テンプレート配布サイトまとめ:phpspot開発日誌
Free CSS Layouts And Templates | Smashing Magazine As a web-developer you don’t have to re-invent the wheel all the time.フリーのCSSテンプレート＆テンプレート配布サイトまとめ。 いろんなXHTMLテンプレートやレイアウトのためのCSSテンプレート集。 サイトデザインに役立ちそうです。自分にあったサイトを探して開発を効率化させましょう。 (X)HTML- and CSS-Templates Open Source Templates OSWD OSWT Maxdesign CSSplay Tinderbox Changingman Mollio Six Shooter Media Yahoo! UI Library: Grids CSS CSS Design Templ
hereticanthem co.,ltd. » CSSやJavaScriptを使ったオシャレな技やサンプルが解説＆配布しているサイトのまとめ
パチンコの遊び方と攻略 – 成功のための戦略を発見しよう！パチンコの遊び方をマスターしよう！プロのテクニックを習得して勝者に！パチンコの楽しさを体験しよう！成功のための戦略を発見しよう！戦略を鍛えてより高い勝率へ！
CSSの小技集、20個:phpspot開発日誌
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
CSSデザイン格付けサイトいろいろ - GIGAZINE
CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ
参考になる CSS 集
テンプレートいろいろ 特定の文書構造とセットの CSS ばかり。まあ、「テンプレート」ですからね、私の不満はいちゃもんに過ぎないのでしょう。これからはスタイルシートでデザインする時代だ、なんていってみても、レイアウト用の div 要素などはたくさん書いても、本文のマークアップには無頓着な人がほとんど。だからきちんと HTML の主要な要素について装飾を指定したスタイルシートには需要がない。 個人的には、以下のリストに示すスタイルシート群の方がずっと「参考になる」と思うのだけれど……。 Appendix > CSS List - outsider reflex CSS カタログ 「言葉 言葉 言葉」スタイルシートギャラリー スタイルシートライブラリ - W.F.N. CSSギャラリー ちなみに私の書くスタイルシートは、自分が使わない要素の装飾についてまともな指定がなされていないので、あまり汎
プロパティから CSS 仕様書へのリンク集を作ってみた - lucky bag
CSS プロパティの仕様が確認できる OS X の Dashboard 用ウィジェット「SeeSS」が便利そう。例えば、ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりする。そこで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。まぁ、「Appendix F. Full property table」のシンプル版って感じ。 プロパティから CSS 仕様書へのリンク プロパティから CSS 仕様書（邦訳）へのリンク 一応、邦訳版へ勝手にリンクした物も作ってみたんだけど、不都合があった場合には削除するかもしんない。あと、リンク切れや漏れがあるかもしれないんで、なんか見つけたらコメントでご報告いただけたらありがたいっす。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
userchrome.css - Mozilla Firefox まとめサイト
CSSでクールなボタンを作るまとめ:phpspot開発日誌
CSS Juice - Design, Tutorial, Showcase and more » 25 Rounded Corners Techniques with CSS
Dynamic Drive CSS Library- Practical CSS codes and examples
スッキリかんたんスタイルシートへ