ミミカスデザイン

UIとかUX,CXとかよくわからないけど、使いにくいのは嫌い。

CSSのdisplayがわからないの、自分がわかるまで理解する。

最近ごりごりとコーディングをさせていただいているのですが。。。

なんせdisplayを友達になれないってことで...

理解できるまでここでやってみる。

displayの種類は......

・block(ブロック要素なんしょ?)

・inline(インライン要素なんしょ?)

・inline-block(インライン要素とブロック要素の中間的な?)

・table(いる?これ?)

くらいに思ってました。

で実際に書いたところ

 <!DOCTYPE html>
<html>

<head>
<meta charset="ja">
<title>displayについて</title>
<style>
.lnLine{
background-color:red;
display: inline;
}
.block{
background-color:pink;
display: block;
}
.inline-block{
background-color: aquamarine;
display: inline-block;
}
.table;
background-color: black;
display: table;
}
</style>
</head>
<body>
<section>
<h1>display:inline</h1>
<div class="inLine">inline</div>
<div class="inLine">inline</div>
<div class="inLine">inline</div>
</section>
<section>
<h1>display:block</h1>
<div class="block">block</div>
<div class="block">block</div>
<div class="block">block</div>
</section>
<section>
<h1>display:inline-block</h1>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
</section>
<section>
<h1>display:table</h1>
<div class="table">table</div>
<div class="table">table</div>
<div class="table">table</div>
</section>

 

</body>
</html>

f:id:mika-19890530:20160707000918p:plain

こんな感じですね。

なるほどねー!

・inline:存在感はないよ。すっきりダイエット系。だけど、その分メンテナンスが

     とてつもなく大変。

   だからレイアウト変えたくないけど、なにか装飾をしたい時とか便利そう。

   血液型でいうA型ですね。

           ※左右のみpaddingとmarginが使えるらしい。縦はvertical-align。

   ※親要素をblockにしたらtext-alignをつけることができるよ。

・block:お前か。blockはそのままでした。

    ただ、高さとか位置を組むときに便利そう。

   ※vertical-alignだけは使えない。しけた

・inline-block:必要最低限をblock要素にしてくれる。block要素に変換する領域が、

      inlineなだけで、中身は完全にblock要素様。

      コウモリ系のやつでした。

さ、tableは。。。。。。って言いたいところなので、眠いのでまた今度。

そしてまだdisplayの種類はたくさんありそうなので、そこでまとめまーす