HTML&CSS マージンについて考える２〜相殺
marginの相殺
通常フローでmargin同士が重なった場合に相殺が起こります。相殺は、数値の大きい方が適用されます。ただし、水平方向（横方向）のマージンは相殺されません。
marginの相殺のサンプル
相殺は入れ子の状態で...
HTML&CSS HTML&CSS マージンについて考える 1〜margin-auto
マージンの挙動をしっかり理解できるとレイアウトをコーディングすることが楽になります。
ここではmargin:autoについて考えてみたいと思います。
margin:autoといえば、ブロック要素の中央揃えね。となりますが、少し掘り下げて...
HTML&CSS ボックスモデルについて考える CSS
(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。
ボックスモデルは上図のようなcontent(内容領域）、padding、border、marginの４つの領域で構成されています。
内容領...
HTML&CSS HTML リスト作成時の注意
リスト作成のとき、<ul>と<li>の間に全角のスペースが存在するとマージンの設定がおかしくなります。不要なマージンがついてしまいます。
見つけにくいエラーですから十分気をつけましょう。
たとえばこんな感じです。（□は全...
HTML&CSS 入れ子状態のブロック要素の上下マージンの困った挙動（マージンの相殺）
マージンの相殺について
上下のマージンは相殺される仕組みになっています。相殺によって、少ない方の数値が打ち消されます。
次のような例を考えてみましょう。
CSSの設定
HTMLの設定
上の例では最初...
HTML&CSS 画像を囲むボーダーの余計な空白
写真の下になぜかこんな空白が空いたらどうしますか？
解決方法はこれです。 vertical-align:bottom;をimgタグに指定します。
ブロック要素の中で画像を表示して、そのブロック要素にボーダーを設定すると下側にわず...
HTML&CSS line-heightの単位について
line-heightについて
line-heightプロパティは、行の高さを指定する時に使用します。
line-heightとは、 例えばfont-sizeを10pxとしてline-heightを20pxに設定します。 行の高さ20p...
HTML&CSS 各ブラウザでフォントサイズを統一する〜YUI fontsの使い方
各ブラウザでフォントサイズを統一する方法です。
Yahoo! UI Library(YUI)のFonts CSSを使用します。
ここで行っている内容は、body要素に対して基準になるフォントサイズを設定します。
各ブラウザでフォン...
HTML&CSS フォント指定例
フォントの指定はかなり繊細です。よく使用するフォントの設定はパターンとして保管しておくとよいです。Dreamweaverなどをうまく利用するのも手です。
HTML&CSS フォントサイズ キーワード
CSS2.1の仕様におけるfont-sizeの絶対サイズ指定キーワードのフォントサイズは以下のとおりです。
CSS2.1 での絶対サイズ指定キーワードのフォントサイズ対照表
絶対サイズ
xx-small
x-small
s...