簡単アウトプット- CSS・要素の配置について 2 -

要素の配置について、まず必要なプロパティは

displayプロパティ

display : block; 指定された要素は、ブロックレベル要素として表示 
display : inline; 指定された要素は、インライン要素として表示
display : inline-block; 指定された要素は、並びはインライン要素、中身はブロックレベル要素として表示
display : flex ; 指定された要素は、子要素が横並びとなる  
display : none ; 指定された要素は、非表示となる      

ここで、以前アウトプットした  

  • ブロック要素

  • インライン要素

  • インラインブロック要素 (これは初出し!!)
    が登場します。

f:id:ayachuubuu:20210709134225p:plain

そう。積み木の考え方です!!

参照:過去のアウトプット投稿より ayachuubuu.hatenablog.com

この、積み木の考え方を今一度思い出しながら、今後のアウトプットを見ていっていただくとイメージつきやすいと思います。

今回のdisplayプロパティは、
ブロックレベル要素をインライン要素に変更できたり、
逆にインライン要素をブロックレベル要素に変更できます。

そうすれば、大きな枠の中に積み木を当てはめるとき、隙間なく指定したところに埋め込んでいける!!そんなイメージ。

このプロパティで一番使用したのは、  

display: flex;

これは、ほんと、オリジナルアプリの作成でたくさん使ったし、プログラミング教室でのテスト問題などで出ました。

覚えておくのは

  1. 親要素に使う
  2. 子要素が横並びになる
  3. このプロパティを使ってこそ、いろんな配置を指定できる!!

この3点。 ほんと大事です。

実装しながらのアウトプットはもう少し先!!しばしお待ちを!!!