Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cssレイアウト

その2

  • Login to see the comments

  • Be the first to like this

Cssレイアウト

  1. 1. CSSレイアウト(float,padding,margin,borderとは) ~ただいま編集中~ 未完成!!
  2. 2. floatとは• CSSでレイアウトをする ときに使う box 1• 一般的には「回り込み」 box 2 をさせるプロパティだと 言われているが、本来 「浮く,浮かぶ」という 意味。 box 3• floatを使うと、• そのままでは、右図のよ うに縦に並ぶbox要素 を・・・ box 4• こんな感じで回り込ませ られる!
  3. 3. floatのイメージ• たとえば、box3に float:leftをかける box 1 と・・・ box 2• box3が浮かんでいる状 態になるので、• 後続の要素であるbox4 box 3 はその下に入り込んで float:left しまう (注:画像・テキストは入り込ま ない)• box4をbox3の右側に回 り込ませるには、 box 4• box4にもfloatをかける (つづきは次のスライド)
  4. 4. left? right?• box4にfloatをかけると、 浮いてる要素同士は重な box 1 らなくなる• float:leftの場合、できる限 box 2 り左に寄ろうとするので、 box3の右側に左詰めで回 り込む box 3 右 左 float:left• float:rightの場合、できる 限り右に寄ろうとするの で、box3の右側に右詰め で回り込む• どう配置したいのかに box 4 よって指定する値が変わ float:right float:left る!
  5. 5. clear:both
  6. 6. ボックス定義とは• box要素は「ボックス領域」というエリアを 持つ ⇒幅・高さ・マージン・余白・枠線・内容から成り 立つ これからつくる!
  7. 7. floatとボックス領域• floatでレイアウトをす る際、ボックス領域 を考慮しないとレイ アウトが崩れる なんかつくる!• たとえば、・・・ (具体例)
  8. 8. marginの相殺(いらない?)
  9. 9. IEのバグ(いらない?)

×