---

display:表示の書式を持った大箱

各display:画面表示を設定した大箱(各要素を入れるdivなどの要素)の中に divやp要素を入れます。 中に入れた要素のふるまいを見ます。

---

display: block;

プログラム

左側の赤枠の中がdisplayBlockのクラスです。
display: block;･･･displayのプロパティにblockの値を入れます。 #b00赤のボーダ色を付けます。 それぞれの要素が順番に積み重なっていることがわかります。

  CSS
  .displayBlock{
    display: block;
    border: solid 0.2vw #b00;
  }

左に並んでいるアイテムは下のHTMLに記述してあるものです。 div要素2つとp要素2つです。

HTML
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <p class="p1">p1</p>
  <p class="p2">p2</p>

/*CSS*/
.div1{
  width: 5vw;height: 10vw;
  background-color: #ace;}
.div2{
  width: 5vw;height: 10vw;
  background-color: #2ce;}
.p1,.p2{
  background-color:transparent;
}
.div1,.div2,.p1,.p2{
  border: solid 0.2vw #0b0;}

CSSでdivは5vw×10vw青色。 pはbackground-colorを透明にしています。 4つの要素に緑色のborder線を付けました。

block;かたまり、木塊、石塊、積み木

HTMLではdiv要素やp要素の中に文章を記述していくことが多いのですが, それだけでは単調になってしまいます。

---

display: inline;

実行結果

実行結果は上にあります。

要素が横一列に並んでいます。

プログラム

.displayInlineの後ろの*はそのクラスの中にある要素の プロパティdisplayはinline;の値にするという意味です。

CSS  
.displayInline *{
  display: inline;
  border: solid 0.2vw #b00;}

HTML
<div class="div1">div1</div>
<div class="div2">div2</div>
<p class="p1">p1</p>
<p class="p2">P2</p><br>

/*CSS*/
.div1{
  width: 5vw;height: 10vw;
  background-color: #ace}
.div2{
  width: 5vw;height: 10vw;
  background-color: #2ce;}
.p1,.p2{
  background-color:transparent;
  }
,.div1,.div2,.p1,.p2{
  border: solid 0.2vw #0b0;}

displayBlockと同様に,CSSでdivは5vw×10vw青色。 pはbackground-colorを透明にしています。 4つの要素に緑色のborder線を付けました。

inline;一線に、列をなして、横隊になって

display: inline;の中にはblockの要素を入れることはできません。 inlineの指定をすると入ります。inlineの指定をすると 縦横の大きさの指定はできません。無効になります。
色だけが残ります。

---

display: flex;

実行結果

実行結果は上にあります。

横一列に並びInlineと同じようですが,高さがあり, 横幅も可変になっています。
div1とdiv2は flex:1;とflex:2;によって1:2の割合の横幅になっています。

プログラム

displayFlexクラスのdivタグでdisplayFlex大箱を作ります。 赤のborder色を付けます。

CSS
.displayFlex{
  display: flex;
  border: solid 0.2vw #b00;}

HTML
<div class="div1" style="flex: 1;">div1</div>
<div class="div2" style="flex: 2;">div2</div>
<p class="p1">PA1</p>
<p class="p2">PB1</p>

/*CSS*/
/*div,p共通の設定------------------------------*/
.div1{/*div要素1*/
    width: 5vw;height: 10vw;
    background-color: #ace;}
.div2{/*div要素2*/
    width: 5vw;height: 10vw;
    background-color: #2ce;}
,.div1,.div2,.p1,.p1{
    border: solid 0.2vw #0b0;}

displayBlockと同様に,CSSでdivは5vw×10vw青色。 pはbackground-colorを透明にしています。 4つの要素に緑色のborder線を付けました。 inline CSSでflex: 1;とflex: 2;として,横幅を指定しました。

flex;曲げる,折りたたむ,自由

flexを使って横並びのHPを作ることもできます。

---

display: grid;

実行結果

4個のブロックを用意します。

gridの名前を付け要素を初期化でします。

grid2の大きさと場所を指示します。

プログラム

多彩なレイアウトのHPを組み立てることができます。

基本の形を決めます。

CSS
.displayGrid{
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3,5vw);
  grid-auto-rows: 10vw;
  border: solid 0.2vw #b00;/*境界線 赤*/}

高さや横幅は自動にしておきます。display: grid;を宣言します。 要素を横幅5vwで3列並ぶようにします。高さは自動で基本は10vwとします。 全体を赤いボーダラインで囲みます。

HTML
<div class="displayGrid">
  <div class="div1 g0 grid1">grid1</div>
  <div class="div2 g0 grid2">grid2</div>
  <p class="p1 g0 grid3">grid3</p>
  <p class="p2 g0 grid4">grid4</p><br>
</div>

/*CSS*/
.g0{/*箱の組成*/
  width: auto;height: auto;margin: 0;
  background-color: #2ce;/*中身の色濃い青*/
  border: solid 0.1vw #111;/*境界線 黒*/}

g0クラスで要素の基本の形を決めます。 width:とheight:はほかで決められているのでauto;に戻します。
要素のマージンも0にします。
各ブロックの境界がわかるように黒いボーダを付けます。

.grid3{/*箱の大きさと位置*/
  grid-column-start: 1; grid-column-end: 3;
  grid-row-start: 1;    grid-row-end: 3;

grid3の箱の組成を決めます。
横は1から始まって,3の手前までの2ブロック分, 高さは1から始まて,3の手前まで2ブロック分にします。
始まりは1の1にしました。 }

grid;格子,網

新しい型式

自由度が高い形式です。このhpはgridの形式になっています。 画面の分割でgrid-template-columns: repeat(5,20vw);としています。 repeatとは繰り返すという意味ですので, 20vwの幅を5回取るという意味になります。 repeat(5,1fr);とするのが本来のようです,1frは割合を表す単位です。 frを使うと取れるだけの横幅をとってしまうので, 画面からはみだしてしまうことがあります。
vwとはviewport widthということです。

画面の横幅は100vwです。

vh:viewport height Vm:viewport minimum vmax:viewport max

---

floatプロパティ

プログラム

大箱の中に入るdiv箱のプロパティをfloat:left;とします。

.divFloat > div{
  float: left;}

>　divが中にあるdiv要素に「スタイルする」。 という表記です。(子　結合子)

HTML
<div class="div1">div1</div>
<div class="div2">div2</div>
<p class="p1">p1</p>
<p class="p2" style="clear: left;">p2</p><br>

/*CSS*/
/*div,p共通の設定------------------------------------*/
.div1{/*div要素A*/
    width: 5vw;height: 10vw;/*横5vw高さ10vw*/
    background-color: #ace;/*中身の色 薄青*/}
.div2{/*div要素B*/
    width: 5vw;height: 10vw;/*横5vw高さ10vw*/
    background-color: #2ce;/*中身の色 濃い青*/}
.p1,.p2{/*pタグ両方*/
    background-color:transparent;
    /*中身の色*/}透明
,.div1,.div2,.p1,.p2{/*全ての要素*/
    border: solid 0.2vw #0b0;/*境界線 緑*/}
  

要素を入れるための大箱に対するスタイルではなく, 大箱の中のdiv要素やimg要素などのプロパティを変更します。
写真の横にコメントを表示するときなどに使えます。 ワードなどの画像挿入の時の文字表示に使われたものだそうです。 回り込ませたくないときは2番目のpタグのように clear:leftとします。

float:浮く

大きな箱に変更を加えなくても,手軽に回り込みを作ることができます。