レイアウトについて div float等

佐藤さん

・レイアウトについて
└<div>の中には3つの要素がある。
①ヘッダー
②メイン
③フッター

---------------------------- 
<div class="header"></div> 
<div class="main"></div> 
<div class="footer"></div> 
----------------------------


└html上にある<div>要素の①～③にCSSで装飾する




.main{
background-color: #背景 ;
}
----------------------------


=============================================

・<div>の使い方
└先ほど作った<div>の中の①ヘッダーの中身にはさらに<div>で細かく区切ることができる

<div class="header">
<div class="ろご"></div>
<div class="りすと"></div>
</div>



└さらに、 <div class="りすと"></div> の中にリストなどの要素を追加する


<div class=リスト>
<ul>
  <li>りすと①</li>
  <li>りすと②</li>
</ul>
<div>


└りすと①～②をひだり横並びにする

li{
float: left; 
}


└ <div class="ろご"></div> とりすと①～②をひだり横並びにする

.ろご{
float: leht;
}



└文字に余白をつける
※padding

.ろご{
padding: 40px 30px;
（上下40px 左右30px）
｝

！ひとこと！
（padding: 40px 20px 30px 50px; ）の書き方の場合「上」「右」「下」「左」で回っていく

=============================================
・class名をつけたところの一部の要素のみに適応させる

---------------------------- 

【html上】
<div class="footer-list">
  <ul>
    <li>いっこめ</li>
    <li>にこめ</li>

    <li>さんこめ</li>

  </ul>
</div>
---------------------------- 

【CSS上】
.header-list li{
 float: 60px;
color: 30px;
}
----------------------------