1. Web講座 第４回

2. 前回のおさらい
回り込みについて
positionについて
Z-indexについて
次回の講座

3. 前々回の講座では、セレクタの種類や擬似クラス・擬似
要素、マージン・パディングについて説明しました。

4. 擬似クラス・擬似要素を適用する
要素名:擬似クラス{
color:#FF0000;
}
要素名:擬似要素{
content:”☆”;
}

5. マージンとパディング
テキスト
マージン
マージン
パディング パディング
マ
ー
ジ
ン
マ
ー
ジ
ン
height
width

6. 今までは、上から下へ順に
コンテンツを表示させていましたが
回りこみを使うことで
左右方向にもコンテンツを
表示することができます

7. 以前まで

8. 回りこみ使用

9. 回りこみを使うには
floatを使う
その際にwidthを必ず
指定する

10. floatにleftを指定する
と要素が左による
floatにrightを指定す
ると要素が右による

11. 回りこみを解除する
にはclear:bothを使う

14. 下のように表示されたでしょうか？
#main #sub

15. メインコンテンツをright,サブコンテンツをleftにすると
下のように場所が反対になります
#main#sub

16. positionはボックスの配置方法を指定するものであり
relative（相対位置）やabsolute（絶対位置）などがある
また、表示位置の指定としてtop,bottom,left.rightを使う

17.  Absoluteは絶
対位置を示す
Top:100px;
Left:100px;
100px
100px

18.  Staticは本来
の位置を示す
Top:100px;
Left:100px;
100px
100px

19.  relativeは相対
位置を示す
Top:100px;
Left:100px;
100px
100px
本来の位置

21. staticの場合

22. absoluteの場合

23. relativeの場合

24. ６月１８日
JavaScriptについて