クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法
Art and web design by Matthew James Taylorというサイトで、 「Equal Height Columns with Cross-Browser CSS & No Hacks」 というエントリーがあがっていたので読んでみた。 高さを揃える方法っていろいろあるのですが、 この方法もクロスブラウザに対応しているので、なかなか便利かもしれないです。 カラムの数だけdivの入れ子 ここで紹介されている方法は、カラムの数だけ入れ子にして、 それぞれをずらして背景を表示させるという方法である。 ↓図にしてみると、こんな感じ。 ↓HTMLはこんな感じ(3カラム) <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト
ブロックレベル要素 ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。 HTML4.01 Strictでは次の要素がこれにあたります。 p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。 CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。 インライン要素 ブロックレベル要素に対し、文中の一部
CSS におけるマージン相殺について | Blog | weeeblog+
CSS におけるマージン相殺というのは、子要素の上の margin が親要素の上の margin と相殺されてしまうことです。CSS は javascript や Perl などのプログラミング言語と違い、変数に格納されている値を表示させればいつかそのうちデバッグ完了、なんてことにはならないので、いくら要素に border を表示させたところで、動作仕様を理解していなければ多大な時間を費やすことになります。特にこのマージン相殺はバグではなく、標準的な動作仕様であるため、余計な時間を使わないためにも知っておいた方がよいでしょう。 回避策 親要素に border または padding を指定することで回避することができます。 HTML タグ 以下のようなマークアップを行なった場合について考えます。マージン相殺が行なわれる場合とそうでない場合を比較するため、二つのボックスを作成します。 <di
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
