HTML&CSS フロートについて
通常フローについて
サンプル
HTMLソース
ABCDの各ボックスはすべて同じ条件のdivで囲まれたテキストです。現在は通常フローで綺麗に並んでいます。ボックスＢだけはこれからフロートさせますので背景色を変えています。...
HTML&CSS
HTML&CSS HTML&CSS リストの余白の正体
最近の標準ブラウザではリスト要素のパディングはul要素に40pxデフォルトで設定されている場合が多いようです。IE７以前はliのマージンで設定されています。
aaaaa
HTML&CSS テーブルのセルに長い英単語を入れたいが折り返しをしたい場合
テーブルのセル内で半角英数で英語の長い単語を入れると指定幅より大きくなってしまいます。
便利に使用できるのはIE限定のword-breakです。
HTML&CSS インライン要素のソース中での改行の問題
インライン要素の途中で改行を行うと半角スペースが入ります。
以下の文章で「名前は」で改行したとします。
吾輩（わがはい）は猫である。名前は まだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。
「名前は」の後に半角のス...
HTML&CSS マージンについて考える２〜相殺
marginの相殺
通常フローでmargin同士が重なった場合に相殺が起こります。相殺は、数値の大きい方が適用されます。ただし、水平方向（横方向）のマージンは相殺されません。
marginの相殺のサンプル
相殺は入れ子の状態で...
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タグに指定します。
ブロック要素の中で画像を表示して、そのブロック要素にボーダーを設定すると下側にわず...