CSS学習がすごいな〜と思うポイントは、HTMLの見た目をガラっと変えてしまうことができることです。
HTMLタグの要素の特性を全く変えてしまう代表的な命令として、"display"があります。
displayを制すれば、cssの半分は理解したと思ってもいいかもしれません。
displayについて
displayの値は次のようにたくさんの種類があり、それぞれの種類に内包するタグの中で、さらにたくさんの種類が存在します。
なかなかパワフルなこのdisplayというプロパティの必要最低限覚えておく内容を記載したいと思います。
- none
- inline
- block
- list-item
- table
- flex
- grid
none
要素を表示から消え去ります。
ボタンやタブを押した時にページの内容が切り替えたりする時に使います。
事前に翻訳している日本語と英語の文字を、ページ全体で瞬時に切り替える時などにもselectorと組み合わせることで設置することができます。
inline
htmlのタグ要素は、inlineとblockの2パターンが基本という事を理解しておきましょう。
文字などのように、大きさによって改行ポイントが分かるような、タグ自体の大きさが定まらないものを"inline"と言います。
inline要素のタグを続けて書くと、横並びの表示になります。
inline要素のhtmlタグ : a , span , ...
block
inlineと相対するdisplay命令として、blockがあります。
サイズが指定でき、１つのタグ毎に改行をするという特性があり、
block要素のタグを続けて書くと、縦並びの表示になります。
block要素のhtmlタグ : p , div , ...
【ポイント】
inlineのように改行ポイントを持たないけど、block要素のようにサイズ指定ができる、
"inline-block"という要素も存在します。
文章内にサイズ指定の要素を配置するような場合に便利に使えます。
list-item
olやulタグの中に書くliタグのdisplay要素です。
list-styleと組み合わせて書くことで、いろいろな見え方のリスト表示ができます。
<div class='fruits'>
<div class='item-1'>イチコ</div>
<div class='item-2'>バナナ</div>
<div class='item-3'>リンゴ</div>
</div><style>
.fruit > *{
display:list-item;
}
.fruit > .item-1{
list-style : circle;
}
.fruit > .item-2{
list-style : square;
}
.fruit > .item-3{
list-style : inside;
}
</style>
サンプル
table
tableタグに摘要されている要素です。
以下のようにすることで、tableタグ以外でもtable構成を作ることができます。
<div class='table'>
<div class='tr'>
<div class='td'></div>
</div>
</div>
<style>
.table{
display:table;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}
</style>
flex
通常HTMLは、縦に並ぶ特性がありますが、構造的に横並び（または縦並び）の表示にする時にflexの設定を使います。
ページデザインをflexで構成することを「flexレイアウト」と呼ぶことがありますが、ヘッダメニューや、横並びに表示したいタブ表示、カルーセルやスライダーなどの際にもflexは使われることが多いでしょう。
flexの詳細解説は別のページで解説したいと思うので、学習初期は、inlineとblockを理解することに努めましょう。
grid
flexが横並び（縦並び）という一方方向での構造に対して、tableの様に縦横のマトリクス表示を設定できるのが、gridレイアウトです。
画像検索をするような画面で使われることが多いです。
tableと似たような見た目になりますが、書き方はまるで違います。
あえて違いを言うとしたら、tableは、row（縦）とcolumn（横）の構造体でhtmlのdom構造を作っていきますが、
gridレイアウトは、単一に並べた要素をgrid配置してくれる特性があるので、要素の数が不特定多数の場合などに使うと便利です。
flexと同様、別のページで詳しく解説をしたいと思うので、現時点では、他のdisplay特性を学習しておきましょう。
あとがき
displayはとにかく理解しておかないと、まともなホームページが作れないという命令なので、理解するのは必須の機能であると言っても過言ではないでしょう。
これをちゃんと理解せずにホームページを作ると、思った通りの表示ができずに困るのは、容易に想像できます。
実際にdisplay命令を書いてみると、他のcss命令との組み合わせが非常に重要であることに気がつくと思うので、その都度リファレンスサイトなどで調べていって覚えていくのがいいでしょう。
とにかく、
displayは重要という事を覚えておきましょう！！
