CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）｜CSS HappyLife
3回続いた基本的なことも今回で最終です。 4回目の内容は、以下のことについて触れております。 んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。 スタイルの優先順位 セレクタの組み合わせ セレクタのグルーピング スタイルの優先順位詳細 スタイルの優先順位 スタイルのもっとも基本的な優先順位は、 「後から読み込んだスタイルを優先的に適用」します。 読み込む順序は、上から読み込まれていくので、、、 p { color:red; } p { color:blue; } のように書いたとしたら、color:blueが優先され、文字は青になります。 基本的な読み込み順序で最低限の部分は、コレだけです。 より詳細な優先順位については後述します。 セレクタは色んなセレクタを組み合わせて指定できます。 子孫セレクタ（空白文字区切り） 親要素に含まれるすべての子孫要素をターゲットにスタイルを適
文書型宣言についてのアレコレ
CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。 という事で、文書型宣言について自分なりのアレコレを書いてみます。（間違ってるトコあったらご指摘願います） XML宣言に関してのアレコレは前のエントリーで書いてます。 あ、文書型宣言ってのは、ウチのサイトの場合コレ↓です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XML宣言ってのはコレ↓です。 <?xml version="1.0" encoding="utf-8"?> アレコレの前に。 この
XML宣言についてのアレコレ
CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。 という事で、XML宣言について自分なりのアレコレを書いてみます。（間違ってるトコあったらご指摘願います） 文書型宣言に関してのアレコレは次のエントリーに。 あ、XML宣言ってのはコレ↓です。 <?xml version="1.0" encoding="utf-8"?> 文書型宣言ってのは、ウチのサイトの場合コレ↓です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XML宣言のアレコレ XML宣言
line-height に単位ありの指定は駄目？
最近、CSS の line-height プロパティに指定する値は単位なし （<number>） が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるので書いてみます。 で、そもそもなんで line-height の値は <number> で指定しておいた方がいの？ってところですが、その理由をわかりやすくまとめている Lucky bag::blog さんの記事をまずは紹介しておきます。 line-height の値には単位なしが良いとされる理由 ： Lucky bag::blog line-height の値には、 normal inherit <length> <number> <percentage> が指定できますが、ユーザーエージェントのデフォルト値を使用する normal と
link 要素を可視化してみる - double-team.org
今日はとても面白い1日だった。いや別に仕事とかプライベートとかじゃなく、ガリガリ CSS 書いてて楽しかった。 なんとなく「できるかなー」と思ってグリグリ2時間くらい費やした甲斐があった。でもあとで調べたらいい感じの記事があって、「こっち参照でいいんじゃない？」とも思ったが、せっかくなので残しておく。 と言うわけでまたここからで申し訳ないんですが、パンくずリストがベストとは限らない | WWW WATCH を見て「link 要素を可視化させちゃえば（ちょっとだけ）解決できるんじゃない？」と思ってやってみた。 XHTML の記述を例えばこんな感じに。 <link rel="start" href="index.html" title="最初のページへ" /> <link rel="next" href="next/index.html" title="次のページへ" /> <link r
絶対配置要素の位置の基準
『ザ・ルールズ・オブ・スタイルシート』PDF資料18,19ページのposition:absoluteに関する説明で、絶対配置要素の位置の基準について以下のように書かれているのですが、 これはあまり正確ではない。 position: absolute 包含ブロック（左上）からの移動距離 ただし、ブラウザ実装はbodyからの移動距離 包含ブロック（左上）からの移動距離というのは正しいのですが、 ただし、ブラウザ実装は～という表現から包含ブロックについて誤解があることを読み取れます。 包含ブロックとは単に親要素のことを指すのではありません。CSSの仕様で細かく場合分けして定義された用語で、 絶対配置要素の包含ブロックは「祖先要素のうち最も近い、positionの値がstaticでない要素のパディング辺。該当するボックスがなければ、初期包含ブロック」です。 PDF資料の例では、position:
XHTMLでは大文字のid属性でも大丈夫 - 徒書
よはくのところ。のXHTML でない理由（Strict ののろい）にて、XHTMLに移行しない理由として(HTMLにおけるid属性問題について、今更ながらを参照しつつ)「id属性を大文字にしている」ことを理由に挙げられていたのですが、結論から言えばXHTMLでid属性を大文字で書くのは全然問題ないです。 根拠を仕様から求めるのは少々ややこしいですが…… XHTML仕様においては、id属性の型は、(XML仕様で言うところの)ID型と定義されている。 参照先をXML仕様に移して、ID型の定義は以下のように定められています。 生成規則Nameに従う IDの値は要素を一意に特定しなければならない。 さらに生成規則Nameの定義は…… という風にに定義を次々と辿っていくと、BaseCharの定義の辺りで途方に暮れそうになってしまいますが、要は生成規則Nameには大文字([#x0041-#x005A]
clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
floatは「回り込み」ではない:てんぽ
てんぽ: floatは「回り込み」ではない CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
miniturbo::Blog DOCTYPEスイッチ
先日公開されたFirefox2(Fx2)や、待ちに待ったWindows Internet Explorer 7(IE7)が11月にローカライズ正式版をリリースなど、ブラウザの更新が目立っていますね。ましてや、現在の2強モダンブラウザなのだからなおさらですね。 ということで、「文書型宣言によって切り替わるモード一覧表」を書いてみました。これから作成するサイトや既存のサイトがどのモードで動いているのか、知っていると幸せになれるかもしれません。 代表的なものを中心にリストにしました。過去の物は一部まとめてあります。 文書型定義によって切り替わるモード一覧表 文書型定義 Fx2 IE7 IE6 Opera9 NN7 Safari MacIE5
asamuzaK.jp : counters()で悪戦苦闘中
ol要素のstart属性の代わりに、CSSのcounter-incrementとcounter-resetを使い始めたはいいが、Safariも現時点では対応してないつーじゃん。 SafariはAcid2テストを最初にパスしたと聞いていたので、てっきり対応してるものだとばかり思ってた。 KonquerorのサイトのCSS Support in KHTMLには、KHTML is one of the only browsers to support generated quotes and counters.と高々と謳っているのに。 これは困ったなぁ... CSS Hackでも使うしかないのかなぁ? そしてもう1つ。 こちらの方が本題というかこのところの悩みのタネになっているのが、Operaのcounters()の振る舞い。 テストケースを用意してみた。 テストケース1、テストケース2。 両者
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『実践Web Standards Design』を読み終えました
Mushline リニューアルします。 < Mushline
2003-11 < Mushline
http://car.s35.xrea.com/diary/200610.php
http://web.xii.jp/iec/xhtml/rule
http://hail2u.net/styles/font.css