忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(14) ここまでのまとめ

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

序章(14) ここまでのまとめ

先週:
ヘルセムの基本的なマークアップ
 
HTMLは縦に積んでいくルールがある
基本的にいろんなものが横いっぱいの幅をもち、積まれていく

→でもデザイン上、横に並べたい
その方法の1つがfloat
  
id: 同じ名前は1つしか使えない
他とかぶらせたくない時に使う
JavaScriptとよく組み合わせて使われる

class: 複数使える
 
セレクタの書き方

ピリオドを書いてクラス属性を書く
.left{
}
 
フロートを使うときの注意
 
1.横幅をしっかり指定 
2.bottomとかでフロートを解除するのを忘れずに
 
解除方法は3つ
 
1.clear:both;でフロートが解除される
ただし横並びにしたい要素の並列的な要素でないとかけられない
親要素とかにかけてもしょうがない
  
wrap(親)のなかにleft,right,bottomの子がいて、
bottomだけ横全部使いたかったらbottomでclear:both;を掛ける
 
→もしこれでbottomがなかったら?
2.親に対してoverflow : hidden;を掛ける
  
3.clearfixという技を使う
 
PR

コメント

ただいまコメントを受けつけておりません。