簡単アウトプット- CSS・要素の配置について 2 -
要素の配置について、まず必要なプロパティは
displayプロパティ
display : block; | 指定された要素は、ブロックレベル要素として表示 |
display : inline; | 指定された要素は、インライン要素として表示 |
display : inline-block; | 指定された要素は、並びはインライン要素、中身はブロックレベル要素として表示 |
display : flex ; | 指定された要素は、子要素が横並びとなる |
display : none ; | 指定された要素は、非表示となる |
ここで、以前アウトプットした
ブロック要素
インライン要素
- インラインブロック要素 (これは初出し!!)
が登場します。
そう。積み木の考え方です!!
参照:過去のアウトプット投稿より ayachuubuu.hatenablog.com
この、積み木の考え方を今一度思い出しながら、今後のアウトプットを見ていっていただくとイメージつきやすいと思います。
今回のdisplayプロパティは、
ブロックレベル要素をインライン要素に変更できたり、
逆にインライン要素をブロックレベル要素に変更できます。
そうすれば、大きな枠の中に積み木を当てはめるとき、隙間なく指定したところに埋め込んでいける!!そんなイメージ。
このプロパティで一番使用したのは、
display: flex;
これは、ほんと、オリジナルアプリの作成でたくさん使ったし、プログラミング教室でのテスト問題などで出ました。
覚えておくのは
- 親要素に使う
- 子要素が横並びになる
- このプロパティを使ってこそ、いろんな配置を指定できる!!
この3点。 ほんと大事です。
実装しながらのアウトプットはもう少し先!!しばしお待ちを!!!