あらすじ
前回はhtmlとcssで表示する位置を調整する方法その１を学びました。marginとpaddingは似ているようでちょっと違うので、違いはよく覚えておいてくださいね。
なんと今回の生徒方は僕のヒントなしで解けたようです。2回目にしては難易度上げすぎたかな？と思っていたのですが、素晴らしい・・！どんな解答になったのか楽しみです。
8/９追記、生徒曰くheight100%,width100%が状況に応じて形が変わる事がイメージ難しかったようです、それも相まってpaddingとmarginに及ぼす影響も難しかったようですね。前回の実演が甘かっなと痛感しつつ再度実演しました。この講座の宿題が見たい生徒及び読者さんしばらくお待ちください。
宿題の答え
ぱっと見こうなっていれば正解です。日本の国旗を作る発展問題は、今回は白い部分は親要素にpaddingをかけて、赤丸はmarginで調整してあげるとうまくいきますね。
今回の目的
positionという位置を調整する方法を覚える。
相変わらず使用頻度が高いもの以外は省略してるので各自検索してください。
position
ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。詳細はこちら
なんのこっちゃだと思いますが、少し説明します。
position:static
positionを特に設定していないとこれに設定されています。基準位置を特に設定しません。
要素を上書きして初期化したいときに使うぐらいなので、使う頻度は多くありません。
position: absolute
基準から移動する場所を決定します。例えば absoluteが適用されている要素にtop:20px;を追加すると、基準から20pxずれることになります。他にもleft,right,bottomがあります。
基準に関しては何も設定していなければ画面の左上端が基準になります。もし親にstatic以外のポジションが適用されていればその親の左上端が基準になります。
position: relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
とは書いているものの、普段使っている印象だとabsoluteの要素の基準を決めるために親要素に設定する使い方が多いです。
position: fixed
設定方法はabsoluteと同様ですが、fixedで固定されたものはどう画面を移動しようとその場に止まって動きません。ヘッダーを常時表示させたい、サイドバーを常に横に置きたい時に用います。
サンプル
サンプルを用意しました。positionがどういった動きをするのか手探りで試してみましょう。
<html>
<head>
<title>class3</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="class3.css">
</head>
<body>
<header>title:class3</header>
<div class="content">
<div class="content" id="content1">
<div class="block">position:static</div>
</div>
<div class="content" id="content2">
<div class="block">position:static</div>
</div>
<div class="content" id="content3">
<div class="block">position:static</div>
</div>
<div class="content" id="content4">
<div class="block">position:static</div>
</div>
<div class="content" id="content5">
<div class="block">position:static</div>
</div>
<div class="content" id="content6">
<div class="block">position:static</div>
</div>
</div>
</body>
</html>
body{
height:200%:
width:200%;
}
header{
height:150px;
width:100%;
background-color: orange;
font-size:32px;
padding:20px;
/* position: fixed;
top:0;
left:0;*/
}
.content{
height:400px;
width:100%;
}
.content:nth-child(2n-1){
background-color:#CCC;
}
.content:nth-child(2n){
background-color:#EEE;
}
.block{
height:300px;
width:300px;
font-size:32px;
}
# content1 .block{
background-color: red;
}
# content2 .block{
background-color: green;
}
# content3 .block{
background-color: blue;
}
# content4 .block{
background-color: skyblue;
}
# content5 .block{
background-color: yellow;
}
# content6 .block{
background-color: pink;
}
宿題
授業終了後に追加します。