[前期の復習2] idとclassの違い / marginとpaddingの違い / ショートコード

(1学期の復習)-- idとclassの違い(画像にidを付ける) marginとpaddingの違い


idとclassの違い




idもclassもグローバル属性()


id    1ページのHTML内に1つしかない物にはID css内での指定は #id名  

class 1ページのHTML内に複数使う物にはclass css内での指定は.class名 

design_zeroの時のcssでいうと?



sideboxはサイドバー内にいくつあるものなのでclassで.sideber
footerもcontentもmaincontentも1ページ内に1個づつしかいらないものなので
idで#footer、#content、#maincontentで表記する。

(教科書のP.88 P.108でやった内容)


画像にもidをつけることができ、その画像だけのcss設定をつけることができる。

(例:「特定の画像の周りは必ず〇〇pxの隙間を開けたい」
「特定の画像だけ必ず半透明に表示したい」など)






marginとpaddingの違い

1   P.236ページ以降  margin や padding の css表記が違う


margin = divボックスの外側の余白
padding = divボックスの内側の余白

個別指定 
 (デメリット) 指定に4行使うためcssが長くなる。また、直に打ち込む時には時間がかかる
(メリット) dreamweaverの新しいバージョンでは自動でこの表記になるので、
     修正時にはこれを理解しておくとなおしやすい
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

marginの省略
(デメリット) 上下左右の順序を覚えきっていないと混乱する
(メリット) 指定が1行で済むためcssが短くできる。また、直に打ち込む時に時間が短縮できる。
  • margin:0; (上下左右)
  • margin: 0 0; (上下) (左右)
  • margin:0 0 0; (上) (左右) (下)
  • margin:0 0 0 0; (上) (右) (下) (左)

コメント