!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
DIV要素で構造を補強 - 3ping.org
弟 *ガチャ* なぁなぁ兄ちゃん、ちとHTMLの参考書貸してや。 兄 お、どしたん、参考書見るなんて珍しいやん。 弟 はっはは！俺もちょっと本気で勉強したくなってんて！ 兄 ほぉーええことや。ほなら壁際の本棚の1段目にHTML関連の参考書あるから、適当にもってってええよ。 弟 おー、ありがとなー。 それにしても兄ちゃんの部屋は綺麗に整理整頓されてるわー。 弟 お、これやな。ふむふむ。何やら難しそうやなぁ。 兄 HTMLの何が勉強したいん？ 弟 んとな、DIV要素を使った構造の補強っていうのがなんかええみたいやねんけど、何の事かようわからんねん。 兄ちゃん暇やったら教えてや。眞鍋かをりの新しい写真集みせてあげるから。 兄 暇ちゃうけど写真集は見たいな。ちと持ってきて。 弟 あかんｗ ちゃんと俺に構造の補強っての教えてからな！それまでお預けや。 兄 偉そうやなー・・。まぁええわ。ほんならお前の
drry @->Weblog - IE7 Beta 2 における XHTML の標準準拠モード切替えについて
IE7 の標準準拠モードでは CSS で position プロパティの fixed を解釈してくれるようになった。そして、IE6 のジレンマだった XML 宣言を含んだ XHTML 文書を後方互換モードで扱ってしまうバグも修正された。つまり、IE 7 からは valid な XHTML に対して position: fixed を始めとした標準準拠モードによる多くの恩恵を望むことができる。 ところが、これらの条件を満たしているにもかかわらず position: fixed を設定した要素が、viewport に固定されない。CSS の記述ミスを疑ったけれど、結局のところ原因は IE7 ( Beta 2 ) のバグだった。 XML 宣言の認識にバグがあり、XML 宣言の書き方によっては後方互換モードになってしまうのだ。具体的には、XML 宣言が "<?xml " で始まっていなければ後方互
hxxk.jp - HTML や SGML における開始タグ・終了タグの省略
記事データ 投稿者 望月真琴 投稿日時 2006-05-02T23:50+09:00 タグ DTD HTML SGML XHTML XML メモ 仕様 実践 Web Standards Design 概要 SGML では「要素によっては開始タグや終了タグを省略することができる」ということはある程度知られていることだと思います。他の記事でそのことに触れますので、ここで一度解説を書いておきます。 リプライ リプライはまだありません。 何故終了タグを省略できるか 今回の解説では ul 要素および li 要素を例にとってみます。 HTML のベースとなる SGML では省略タグ機構という仕組みが定められており、それは SGML宣言で OMITTAG YES と宣言されている時に限って有効 となっています。 HTML においても OMITTAG YES と宣言されており、いくつかの条件を全て満たして
絶対配置要素の位置の基準
『ザ・ルールズ・オブ・スタイルシート』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の右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
WD Live! Web標準時代に求められるサイト構築法
Web標準時代に求められる サイト構築法 木達一仁 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア Web Standards Projectメンバー k-kidachi@mitsue.co.jp / kidachi@kazuhi.to 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア（2004年2月～） Web標準準拠サービスの立ち上げ/運用 Web標準Blogの運営 W3C Advisory Committee Representative 海外のWeb標準関連書籍和訳版の監修 Web Standards Project（WaSP）メンバー mixiにてWeb標準コミュニティを主催（2006年5月25日現在3260人が参加） 7月15日「Web標準の日」開催
Web 標準志向 XHTML / CSS リファレンスのための５つの改善要素 - 我的春秋
今日は、ちょっと逃避で、大分前の書きかけ（未公開）エントリーを引っ張り出してきてみました。ちょっとここ数日、落ち着かなくて..。 最近、つくづくよく思うのは、"Web 標準コーダーのための XHTML / CSS リファレンス" みたいな感じの、携帯に便利でコンパクトなリファレンスブックが欲しいなということです。今でもたくさんの HTML / CSS リファレンスは出版されているわけですが、イマイチしっくり来るモノがないというのが実感です。ぶっちゃけ、既製品には、ユーザビリティ的に色々と顔をしかめたくなる点が多くて..。従来品との相違点でいえば、大体、次の５つのポイントに集約できるかと思います。 非推奨要素・属性・属性値は排除したい 読み方、原語を明記してほしい 規格と実装は区別して！ 非対応ブラウザ側を表示する 非対応ブラウザ対策の提示 非推奨要素・属性・属性値の排除 XHTML リファ
IFRAME を使わない方法の補足 | WWW WATCH
phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。 人気エン... XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。 iframe 要素は、HTML4.01 Strict 及び XHTML1.0 Strict では未定義 （Transitional、Frameset では定義済み）、XHTML1.1 では廃止されていますので、Strict でコーディングする際に外部オブジェクトを (X)HTML によって読み込むには object を使うことになりますね。 で、object 要素の DTD はどうなっているかというと、（XHTML1.0 Strict） <!ELEMENT object (#PCDATA | param | %bl
覚え書き@kazuhi.to: Web標準ワークフロー
Web標準ワークフロー タイトルを目にしたときからその内容が気になって予約注文してまで購入した書籍「Web標準ワークフロー―XHTML+CSSによるWebサイト制作を制作現場の視点で考える」をだいぶ前に読み終えていましたが、今更ながらその感想など。 第一に、ワークフローというタイトルからそのトピックスに特化した情報を期待して買ってしまうと、がっかりしてしまうのではないかと思います（僕がそうでした）。ページ数のほぼ半分は狭義のWeb標準準拠、つまり(X)HTML＋CSSでコンテンツを実装するための基本的な知識、さらには双方の仕様の解説に割かれているからです。もちろんそういったところの理解がワークフローの理解にとって必須と著者がお考えになったからこその構成だとは思うのですけど、個人的には微妙かなぁと思いました。もちろん、細かな文法的知識が不十分なディレクターさんですとか、逆にそういうところは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hxxk.jp - ガチガチよりもさらりが良い ?
hxxk.jp - text/html と XHTML 1.1
Amazon.co.jp: Web標準ワークフロー―XHTML+CSSによるWebサイト制作を制作現場の視点で考える: COMPLEX: 本
Amazon.co.jp: セオリー・オブ・スタイルシート: 技術評論社編集部: 本
詳解 HTML & XHTML & CSS辞典: 本: 大藤 幹
Amazon.co.jp： 世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル: 本: 大藤 幹
Amazon.co.jp: スタイルシートサンプルブック: 大藤幹: 本
Amazon.co.jp: 標準Webデザイン講座 スタイルシート: 大藤幹: 本
