HTML&CSS

HTML&CSS

リストの余白の正体

最近の標準ブラウザではリスト要素のパディングはul要素に40pxデフォルトで設定されている場合が多いようです。IE7以前はliのマージンで設定されています。 aaaaa
HTML&CSS

テーブルのセルに長い英単語を入れたいが折り返しをしたい場合

テーブルのセル内で半角英数で英語の長い単語を入れると指定幅より大きくなってしまいます。 便利に使用できるのはIE限定のword-breakです。
HTML&CSS

インライン要素のソース中での改行の問題

インライン要素の途中で改行を行うと半角スペースが入ります。 以下の文章で「名前は」で改行したとします。 吾輩(わがはい)は猫である。名前は まだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。 「名前は」の後に半角のス...
HTML&CSS

マージンについて考える2〜相殺

marginの相殺 通常フローでmargin同士が重なった場合に相殺が起こります。相殺は、数値の大きい方が適用されます。ただし、水平方向(横方向)のマージンは相殺されません。 marginの相殺のサンプル 相殺は入れ子の状態で...
HTML&CSS

マージンについて考える 1〜margin-auto

マージンの挙動をしっかり理解できるとレイアウトをコーディングすることが楽になります。 ここではmargin:autoについて考えてみたいと思います。 margin:autoといえば、ブロック要素の中央揃えね。となりますが、少し掘り下げて...
HTML&CSS

ボックスモデルについて考える CSS

(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。 ボックスモデルは上図のようなcontent(内容領域)、padding、border、marginの4つの領域で構成されています。 内容領...
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...
スポンサーリンク
タイトルとURLをコピーしました