CSSハックとは Webサイト制作において各ブラウザ間におけるCSSのサポートが若干違うため、出来る限り表示を同一にするためのテクニックの一つです。 古くはIE5.5以前のボックスモデルの解釈の違い等、一部のブラウザの表示を直すために使われてきました。 しかし積極的に利用するのは問題があるんです。それは、CSSハックのいくつかはバグを逆手にとった手法 ...個別CSSハック ブラウザ間での表示がことなってしまう原因が分かったところで、まずは代表的なIEの各バージョンに対応したCSSハックを見てみましょう。 IE6に適用 値の先頭にアンダースコア「 _ 」を付与 body{_color : yellow ;} IE7に適用 値の先頭にアスタリスクを「 * 」を付与 body{*color : green ; } IE8に適用 値の末尾に「 \9 」を付与 body{color :

CSSで行間（ line-height ）と文字サイズの確認用ツールです。画面右の項目を変更してご利用ください。 このページでは、段落（P要素）まわりのCSSで重要だと思われる文字サイズ、行間、左右マージン、段落間隔（P要素の下マージン）を実際に変更し、確認できます。 CSSでのレイアウトデザインにおいて、最も重要な基本事項といえば文字の可読性です。最近ではブログの普及もあって、極端に読みにくいページは少なくなりましたが、WEBを作る人としては押さえておきたいところです。 以下、サンプル文章代わりの雑文です。 海外で小さい文字のサイトってありますよね。でね、そのサイトが妙にイカしたデザインに見えたりだとか。実際、ぱっと見は綺麗です。文字が小さくなるにつれて文章ではなくて模様だとかパターンの塊に見えるためだと思うのですが、そういったサイトの文字サイズを日本語に適用するとちょっとまずい。 例え

robots.txt checker This tool validates /robots.txt files according to the robots exclusion de-facto standard. Checks are done considering the original 1994 document A Standard for Robot Exclusion, the 1997 Internet Draft specification A Method for Web Robots Control and nonstandard extensions that have emerged over the years. The robots.txt validator checks the syntax and structure of the document

“Back to Top” links considered (mostly) harmful Web pages often contain links to the start of the page, typically named “Back to Top” and possibly accompanied with icons such as an arrow pointing upwards. This document explains why such usage is mostly bad practice, especially for accessibility reasons. It also discusses the techniques creating such links in a manner that minimizes the damage. Suc

マウスオーバー時の画像切り替えのアクションは、CSSが主流になる前まではjavascript等で実現していたのですが、 最近はほとんどCSSで切り替えるテクニックが使われているように思います。 代表的な例が、text-indent にマイナス値を入れてテキストをどっかに飛ばし（隠し）、 background にオンとオフをひとまとめにしたボタン画像を埋め込み、:hover でスライドさせるテク。 Dave Woods - HTML, CSS, Web Design - [サンプル] 実装が簡単なうえ、オンとオフ２つのボタンが一つの画像ファイルになっているのでサーバへのアクセス負荷軽減等のメリットがあります。 じゃあ、デメリットは？ ブラウザ設定で画像を非表示にした状態で見ると、画像どころかテキストさえも表示されません。 もしこれがサイトにおける重要なメニューだとしたら、最悪です。 代替方法

Account Suspended This Account Has Been Suspended

バナー等の画像にリンクを設定すると青い枠が表示されます。これをCSSを使って消去する方法を何通りかご紹介します。 消去前 消去後 １．スタイルシート（styles-site.css）に設定 まず、タイプセレクタで img 要素に枠線を与えない設定を行います。 img { border-style:none; } または、子孫セレクタで a 要素の子孫要素である img 要素に設定を与える方法です。上記の場合は全ての画像にスタイルが適用されますが、この方法であればリンク画像のみにスタイルの設定を与えることができます。 a img { border-style:none; } さらに、img 要素に class 属性 または id 属性を与えて、クラスセレクタ・一意セレクタで指定すれば画像によってリンクのあり・なしを振り分けることができます。以下はクラスセレクタの例です。 .no_border

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