ドットインストールでCSSを学ぼう#19〜#21
サイトの見た目を司る、css。
学ぶとすぐに使えるところが楽しいですね！
今日も元気にドットインストールさんで学んでいきたいと思います。
#19 display:tableを使ってみよう
今日は、#18で習ったdisplayプロパティのtableという値を学習します。
tableを使うと、表組みを作ることができます。
今、htmlには3つのdivが用意されています。
グレーとシルバーとオレンジの３つのボックスに分かれている感じですね。
cssはこんな感じ。
.gray{ backgroound: gray; }
.sliver{ background: sliver; }
.orange{ background: orange; }
ブラウザで見ると、このようになっています。
Helloの数が違いますね＾皿＾
3カラムのデザイン
この全体を表とみなして、3つの色を列にして
3カラムのデザインにしたいとします。
まずは、全体を表とみなすので領域を作ります。
3つの色の部分を、
<div class="container">
</div>
で囲います。
この.containerを、cssの画面でこのようにします。
.countainer{
display: table;
width: 300px;
}
また、ボックスをひとつひとつのまとまりにしたいので
.box{
display: table-cell;
}
とします。
ブラウザで見ると、このようになりました！
なるほど…
ブログデザインの２カラムとか３カラムとか、このようにできているのかな？
.containerや.boxにそれぞれ指定するのを忘れそうですが、なんとか覚えられるといいなあ…（自信なさめ）
このままだと、Helloの数で幅が変わってしまうため、
.boxのところにこのようにwidthを指定します。
.box{
display: table-cell;
width: 100px;
}
すると、ほら！
幅がそろいました。
.comtainerのところで指定したwidhがなんなのかわからずに困惑していますが、まあとりあえずそういうことなのでしょう（白目）。
2×2のデザイン
2×2のデザインにすると、より表組みっぽくなりますよね。
この形にするには、列だけでなく行も指定する必要があります。
行を指定するのには、containerの下にrowを指定します。
グレーとシルバーのclassを
<div class="row"></div>
で囲みます。
同じように、
（すみません、下の</div>が1行入りませんでした💦）
オレンジとグレーを
<div class="row"></div>
で囲みます。
そして、先ほどのcssのところに
.row{
display: table-cell;
width: 100px;
}
と書き入れます。
すると、このようになります。
おお！2×2の表になりました！
display: table; は便利ですね。
htmlのほうをどう書いたらいいのかもうすでに忘れてしまいましたが（３歩歩いたら忘れる）
ぜひ覚えておきたいと思いました。
#20 positionで位置を調整してみよう
今回は、位置の調整です。
今回用意されているhtmlは、こんな感じ。boxが3つ用意されています。
<div id="box1"></div>
<div id="box2">
<div id="box3"></div>
</div>
div要素なので、box1の下にbox2が配置されます。
box3は、box2の中に入っていますね。box3はbox2の子要素ということになります。
配置に関しては、#18で学びました。
css はこんな感じ.
#box1{width: 100px; height: 50px; background: gray; }
#box2{width: 100px; height: 50px; background: silver; }
#box3{width: 50px; height: 25px; background: orange; }
ブラウザで見ると、こんな感じになっています。
これらの位置を調整するのには、positionプロパティを使います。
static
staticは、positionプロパティの初期値になっていて、#18のようなルールで普通に配置されるものです。
relative
relativeは、statc の位置からずらして表示したいときに使います。
さっそく試してみましょう。
box1の位置をずらすとします。
#box1{
background: gray;
position: relative;
top:10px;
left: 10px;
}
position はrelativeに、上と左は10pxずらしますよということです。
ブラウザで見るとこのようになっています。
box1だけずれていますね。
へえ、box2やbox3に重なっちゃうんだ。おもしろい！
fixed
fixedは、スクロールしても位置を固定しておきたいときに使います。
#17で習った「background-attachment」のfixedと似た感じなのかな？
先ほどの、positionをfixedに変えてみましょう。
#box1{
background: gray;
position: fixed;
top:10px;
left: 10px;
}
ブラウザで見ると、このようになっています。
配置の基準点は、ウィンドウの左上になるので
このように、上と左に10pxずつの余白があります。
また、box2とbox3の位置が、まるでbox1が存在しないかのような位置にくるのも特徴です。いろいろ活かせそうですよね。
スクロールしても、グレーのずんずんついてきます＾皿＾
absolute
absoluteは、positionの値が何かによって、配置の基準点が変わってくるものです。
今回はbox3に対してつけてみたいと思います。
cssに次のように記述します。
#box1{
background: orange;
position: absolute;
top:10px;
left: 10px;
}
ちなみに、現在の親要素はbox2です。positionは、何も指定していないと先ほどのようにstaticになります。
#box2{
background: siliver;
position: static;
}
親要素がstaticの場合は、ウィンドウの左上が基準点になります。
なので、画面の左上から10px,10pxの場所にbox3は表示されます。
ブラウザで見るとこのようになっています。
画面の左上（基準点）から10px,10pxのところに入りましたね。
親要素の左上を基準点にしたいときには、static以外を指定します。
今回はrelativeにしてみましょう。
#box2{
background: siliver;
position: relative;
}
親要素、box2をrelativeにすると、ブラウザで見るとこうなっています。
はい！親要素の中に位置しています。
相対的な位置関係はなかなか難しいなあと思いますが
fixedなどは楽しく使えそうなので、ぜひ覚えたいなあと思います。
#21 z-index,overflowを理解しよう
z-index
z-indexは、要素の重なり順を指定するためのプロパティです。
今回htmlに用意されたboxは３つ。
css はこのようになっています。
body{margin: 0; }
#box1,#box2,#box3{
width: 100px;
height: 50px;
}
#box1{background: gray; }
#box2{background: silver; }
#box3{background: orange; }
それぞれのボックスの大きさは幅が100px、高さが50px。
色はグレー、シルバー、オレンジになっています。
ブラウザで見るとこうなっています。
これらを、ちょっとずつ重ねてみましょう。
ますはabsolueで。
body{margin: 0; }
#box1,#box2,#box3{
width: 100px;
height: 50px;
position: absolute;
}
また、box1の位置をこのようにします。
#box1{
background: gray;
top: 10px;
left: 10px;
}
box2は20pxずつ、box3は30pxずつずらしてみます。
#box2{
background: siliver;
top: 20px;
left: 20px;
}
#box3{
background: orange;
top: 30px;
left: 30px;
}
ブラウザで見ると、このようになっています。
おお！重なっていますね！おもしろい！
重なり順は、後に書いたほうが上になるという決まりがあります。
この重なり順を管理するときに使うのが、z-indexです。
これは、position:static;以外のときに要素のときに有効ということ、
z-indexの値が大きいほど後にくるということ
という決まりがあります。
今一番下になっているbox1のz-indexを3、box2のz-indexを1、box3のz-indexを2とすると、box2が一番下になるはずです。
#box1{
background: gray;
top: 10px;
left: 10px;
z-index: 3;
overflow
}
#box2{
background: gray;
top: 20px;
left: 20px;
z-index: 1;
}
#box3{
background: gray;
top: 30px;
left: 30px;
z-index: 2;
}
ブラウザで見ると、このようになっています。
z-indexが3-1-2の順番で並んでいますね。
overflow
overflowは、ブロック要素の中のコンテンツがその場はと高さを超えて存在するときに、どのような表示方法にするかという指定です。
たとえば、box1がこのようなhello地獄になった場合、
（すごい「こんにちは」と言いまくっていますね。笑）
普通に表示するとこのようになります。
自由にはみ出まくるHello。
デフォルトの状態がvisibleで、そのまま表示。
hiddenにすると、はみ出た部分を非表示にしてくれます。
scrollにすると、スクロール領域を作ります。
現在、box1がはみ出ているので、hiddenにしてみましょう。
#box1{
background: gray;
top: 10px;
left: 10px;
z-index: 3;
overflow: hidden;
}
すると、ブラウザで見るとこのようになっています。
やった！はみ出た部分が隠れています。
隠すのではなく、スクロールで表示したい場合にはoverflowをscrollにします。
#box1{
background: gray;
top: 10px;
left: 10px;
z-index: 3;
overflow: scroll;
}
すると、このようになっています。
box1の中でスクロールできるようになっていますね。
楽しかったcssも、残すは#22,23の2レッスンになりました。
なんども動画を見て復習をしたいと思います。＾＾
