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を作る人としては押さえておきたいところです。 以下、サンプル文章代わりの雑文です。 海外で小さい文字のサイトってありますよね。でね、そのサイトが妙にイカしたデザインに見えたりだとか。実際、ぱっと見は綺麗です。文字が小さくなるにつれて文章ではなくて模様だとかパターンの塊に見えるためだと思うのですが、そういったサイトの文字サイズを日本語に適用するとちょっとまずい。 例え

 403 Forbidden nginx

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

A site that showcases cool experiments for both JavaScript and web browsers.The Wilderness Downtown Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering... this Chrome Experiment has them all. "The Wilderness Downtown" is an interactive interpretation of Arcade Fire's song "We Used To Wait" and was built entirely with the

“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のサービスをご愛顧くださいますよう、よろしくお願いいたします。

アクセスアップ、SEO、HTML、CSS、JavaScript の覚書。WEB管理のプロが制作過程で対策を記録、初心者も納得のホームページ作成ノウハウ。 ■border-color：ボーダーの色を指定 border-colorプロパティは、上下左右のボーダーの色をまとめて指定できる。 上下左右を異なった色にしたい場合は、スペースで区切って複数の値を指定。 値を1つ指定した場合： [上下左右]がその色になる。 値を2つ指定した場合： 記述した順に[上下][左右]の色になる。 値を3つ指定した場合： 記述した順に[上][左右][下]の色になる。 値を4つ指定した場合： 記述した順に[上][右][下][左]の色になる。 色の値 色：#000000などの記述またはカラーネームで色指定。 transparent：ボーダーの色を透明に指定。 border-style: solid; borde

HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。 スタイルシートは、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナンスがずっと容易になります。 目次： スタイルシート：文書の論理と表現を分離する カスケーディング・スタイルシート（CSS） スタイルの定義場所 クラス、idによる定義の局所化 文脈セレクタと一括設定 カスケーディングと継承 スタイルのタイプ指定 取り上げる要素： style スタイルシート：文書の論理と表現を分離する 本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表

前ページでは同じ行の中に文字列とインラインフレームが含まれている場合の位置関係を指定しました。この時、あくまでインラインフレームと文字列は同じ行の中にありますので、非常に大きいインラインフレームが行の中に含まれていた場合でもインラインフレームと同じ行には1行分の文字列しか表示されません。 次の例を見てください。 <p> <iframe src="inline.html" width="300" height="80"></iframe> インラインフレームと文字列の関係について記述しています。長い文章と インラインフレームが同じ行にある場合の位置関係はalign属性を使って 設定します。 </p> このような記述があるHTML文書をブラウザで表示すると次のように表示されます。 画像とインラインフレームは同じ行に含まれていますので、インラインフレームがどれだけ大きくてもインラインフレームと同