チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は

フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは

CSS3で何ができるのかという「CSS3で何ができるの？　という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？　ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を

画像でのナビゲーションをフェードで切り替えるのに以前はプラグインとか使っていたけど、最近は自分で作るので備忘録としてメモ。 まずナビゲーション部分のHTML。 <!– navi –> <ul id="navi"> <li class="navi01"><a href="#"><img src="/sample/fadenavi/imgs/navi-01.gif" width="120" height="30" alt="Navigation1" /></a></li> <li class="navi02"><a href="#"><img src="/sample/fadenavi/imgs/navi-02.gif" width="120" height="30" alt="Navigation2" /></a></li> <li class="navi03"><a href="#"><i

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー

table と caption の margin 2008-08-13 0 0 XHTML/CSS caption, CSS, table, XHTML Firefox，Safari，Opera は IE に比べるとだいぶWeb標準に準拠してレンダリングされます。しかし，仕様に詳しく定められていないところは（追記参照）ブラウザごとのクセがあり，表示結果が微妙に違ったりします。以前，table に caption を入れたとき，margin を合わせるのにちょっと苦労した経験があったので，改めて調べてみました。 caption は表題を示す要素です。table の子要素になり，table の開始タグの直後に記述します。 table の margin-top が入る位置 <p>テキストテキスト</p> <table> <caption>サンプル（ここがcaption）</caption> <t

以下のような指定をすると、 body{ font-size:80%; line-height:1.4; } ページの中の要素が全て少し小さめの、font-size:80%で表示される。しかし、DOCTYPEの指定が互換モードだったり、どうやっても標準モードになってしまうIE5, IE5.5では、下のように、table内の文字は、ブラウザのデフォルト値の通り、でかいままになる。 これを防ぐためには、font-size:inheritを指定すれば、親のfont-sizeが継承されそうだが、IE6ではinheritは（たぶん）未対応なため、inheritを指定しても文字はでかいまま。しかし、以下のような指定をすれば、回避できる。 table{ font-size:1em; } tableにfont-size:1emを指定することで、親のfont-sizeと同じ大きさになる。これでtableの中も

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>

cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か

上の画像のような高さの違う2つの要素を、縦中央に並べる方法をご紹介します。 サンプルでは画像とテキストですが、テキスト同士、画像同士でも 同じことができます。確認ブラウザ　IE6～8、FF2、3 まずはXHTML <div id="box">     <span class="item_l"><img src="sample.jpg" width="171" height="173" alt="sample" /></span>     <div class="item_r"><p>何かに使おうと思って描いたイラストです。<br />ネットワークっぽいイメージ。</p></div> </div> .item_l {   display: -moz-inline-box;   display: inline-block;   vertical-align: middle; } .item_r

サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。