レイアウトについて 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;
}
----------------------------