For Want Of A Better Word

レイアウトモデル

      2015/04/19

ボックス

  • CSSではボックス単位を基本にしてレイアウトされる。ボックスとは要素それぞれが持つ領域のこと。

display[レイアウトを決めるプロパティ]

      • none:表示しない
      • block:ブロックレベル要素のデフォルト。横幅最大で並べると改行が入る。
      • inline:インライン要素のデフォルト。並べても改行が入らず、横幅が親ボックスを越えると自動的に改行される。高さは変更できない。
      • inline-block:自動的に改行は入らないが、高さをheightプロパティで変更できる。inline要素は1行の中身の要素。block要素は1行全体。

padding border margin

  • ひとつのボックスは以下の要素で構成される。
    • contetn:内容
    • border:枠線
    • paddin: contentとborderの余白
    • margin:ほかブロックとの余白

レイアウトの基本

  • ブロックが立て並びになるだけ。
  • 幅は親要素の最大。
  • ブロック間には改行が入る。
  • 縦方向marginは連続する要素で重なる部分がある場合は、一番長い物に合わされて相殺される。

positionプロパティ

  • static
    • 上から順番にmarginを詰めながらレイアウトする。(デフォルト)
  • relative
    • staticと同様に配置した後、top right left bottomのそれぞれのプロパティ分ずらして配置される。
    • relativeに設定された要素は、子要素の位置決定をするための「包含ボックス」として設定される。
  • absolute
    • staticのようなレイアウトはまったく行われず、top right left bottoで独立して位置を指定する。基準になる座標は「包含ブロック」に対する位置。デフォルトの包含ブロックはルート要素()。
  • fixed
    • absoluteと基本は同じ。ただし、スクロールしても指定位置にとどまるようになる。
    • windowに対しての絶対位置が指定されている感じ
    • おもしろいけど、iPHONEAndroidの標準ブラウザではサポートされていない。

floatプロパティ

    • 浮動体をレイアウトするためのプロパティ。
    • 不導体とは通常のレイアウトフローからはずれ、宙に浮いたような上体になっているボックスのこと。
  • left
    • 左側に浮かぶ
  • right
    • 右側に浮かぶ
  • none
    • 浮かばない。
  • floatが指定された以降の要素が、float指定された要素の反対側に周り込む。
css3(特徴)
  • マルチカラムレイアウトの追加
  • box-shadowプロパティ
  • text-shadow
  • border-radius(角丸BOX)
  • outline (borderとは別の枠線:debug用)
  • backgroundグラデーション

 - css

  関連記事

no image
[css]pure css 読み込めない!なんで! ホストされたコンテンツ読み込みの罠

クロームでpurecssをよんでも、どうしてもスタイルがあたらなかった。。 1時 …

js-logo
メモ_gushから_スクロールに応じてHTML部品の表示 右下前に固定表示

要は最初は要素は固定で右下に表示 固定は下記で実施。 position: fix …

no image
WEBフォント

http://thinkit.co.jp/story/2011/08/18/22 …

no image
ボタンデザイン CSS自動作成サイト「CSS GRADIENT BUTTON」

Aodbe系を買う金が無い身としてはまじ便利。 http://cssgradie …

no image
スタイルシートの@(アットマーク)ってなんだっけ

【参考サイト】http://w3g.jp/css/guide/at_rule ア …