miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ~ } div#content div.entry { ~ } div#content div.entry p { ~ } div#content div.entry ul { ~ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id
ブラウザのデフォルトスタイルをリセットする際にユニバーサルセレクタを使用すると、読み込みが遅くなるとか言う話があるんですけど、具体的にどれくらい遅くなるのかという話は聞いた事がありません。 なので、調べてみました。 ソース 使用したソースは以下の2種類です。 なお、2番目のソースはYUIで公開されている物を使用しました。 * { margin: 0; padding: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } それぞれを当サイトのcssファイルに書いて、Firebugでcssファイルの読み込み時間を100回づつ計測しました。 計測したのは、2007年9月2日の夜23時頃、ADSL回
回り込んだテキストの行端がずれる問題 IE6以下では、フロート要素にブロック要素を回り込ませると、回り込んだテキストの行端が揃わずにずれるという問題が発生する(参考リンク: beta2 05-01)。IE7でこの問題は修正されたが、下位互換を考慮すると対策が必要となる。 サンプルソース: 3-5-1 sample03-05-01.html #image {float:left} #text {margin-left:60px} <div id="image"><img src="image.png" width="50" height="50" /></div> <div id="text">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;
統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。 今まで統合ボーダーモデルを選んだ時のtableにかかるborderはtableの外にかかるものだと思い込んでた(苦)気になったのでborder-collapseをcollapse(統合ボーダーモデル)、tableとtd,thのborderに1px solidのプロパティを与え、各ブラウザでどのように表示されるか調べてみた。 Win Firefox...左に1pxはみ出す Win IE6...tableの内側に表示 Mac Safari...右に1pxはみ出す Mac Firefox...左に1pxはみ出す borderに1px以上のプロパティを与えてやるとWin IE6以外のブラウザは、ボーダーの半分
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氏の
CSS and HTML Source Code The box below shows example CSS and HTML source code. The code will update dynamically as you press the buttons above. You can select text in the box and then copy and paste the starter code. Compatibility Notes If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Inter
Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 Lucky bag::blog, line-height の値には単位なしが良いとされる理由 TRANS, YUI Fonts CSSのline-height: 1.22em;の謎を解く! 「line-height」の表示結果に関して、単位があるかないか(「line-height: 1.2;」なのか「line-hieght: 1.2em;」とするか)、そして全称セレクタから指定するかどうかで、得られる結果が微妙に違うと言う話について。 とりあえず検証してみました。以下のテスト・ファイルをどぞ。 bodyにline-heightなし bodyにline-height(単
「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
IE3はサポートしていない単位(em, ex), 単位のない実数を全てpxとして扱います。 外部ファイルを参照する場合、IE3ではBODY要素に対するbackground指定が無視されます。 相対URIはスタイルシートを基準にしなければならないのですが、NC4はHTML文書が基準です。 </TD>, </TH>, </P>等は省略可能なのですが、出来れば省略しない方が良いです。例えば、画像やテーブルにline-height指定が及ぶとブラウザによってはとんでもない表示になるので、分割するとします。以下のような場合、省略してしまうとブラウザによっては分割したのが無駄になります。 <P style="font-size: 12pt; line-height: 15pt">段落</P> <P><IMG src="x.gif" alt="画像"></P> IEはParagraph、NC4はTabl
文書の構造を示すことを目的とする。見た目の装飾に関わることを記述しない。 宣言 特に事情がない場合は,文字コードをUFT-8にして,XML宣言を省略する。 DOCTYPEは原則的にXHTML 1.0 Strict 。 ただし,更新スタッフの事情に合わせてXHTML 1.0 Transitional,HTML 4.01 Strict,HTML 4.01 Transitionalにする場合もある。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> head ページの性質を示し,UAに読ませることを目的とする。 最初に <meta http-equiv="Content-Type" content="text/html; ch
記事制作 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//
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く