miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ~ } div#content div.entry { ~ } div#content div.entry p { ~ } div#content div.entry ul { ~ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id
inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;
2004年11月8日にリリースされたFirefox 1.0は、2004年4月12日にMOZILLA_1_7_BRANCHとして開発サイクルからブランチ(枝分かれ)して以降、開発の本流からは分かれて専ら安定化作業が行われてきました。これに対してTrunk(開発木の幹)と呼ばれている開発の本流では引き続き16ヶ月以上に渡り意欲的な開発が進められました。 2005年11月30日にリリースされたFirefox 1.5は、2005年8月13日にMOZILLA_1_8_BRANCHとして開発サイクルからブランチするまでの、長期間の開発の結果が反映されているため、Firefox 1.0で知られている様々なバグが修正されています。その中でもここでは特に、ブラウザとしての基本性能であるウェブページの描画機能、その根本であるCSSへの対応がどれだけ進んだかを取り上げたいと思います。 また、motohiko氏の
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
記事制作 2006/07/10 訂正追加 2006/09/26 修正 2007/01/29 Windows版SafariとFirefox2.0.0.4を追加 2007/06/29 Windows版IE7を追加 2008/04/08 Windows版Google Chrome 0.2.149.27とFirefox3.0.1、 Mac版Firefox2.0.0.16を追加 2008/09/03 DOCTYPE宣言 標準モード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 互換モード <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。 absolute size キーワードで指定、フォントサイズはUAに依存 ex.)small, medium relative size 親要素に対しての相対指定 ex.)smaller, larger length 正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」 ex.)10pt, 1em percentage 親要素に対してのパーセント(%)指定 ex.)100%, 120% この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。 フォントスタイルは、上から「メイリオ」「MS Pゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「MS Pゴシック
HTML5対応版clearfix(予告) » 最近、あるサイトのソースをXHTML1.0からHTML5に書き換えていて、私家版clearfixに不具合があることを発見した。近... [read more] clearfixの決定版を作る -Mac IE編- » 前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがな... [read more] clearfixの決定版を作る -IE編- » 今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか... [read more] inline-blockの奇妙な世界 » inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く