HTML・CSS📦ボックス関連について

フレックスボックス

ブロックレベル要素とインライン要素

• div→ブロック要素、span→インライン要素
• 指定方法は同じだけど、表示形式は異なる（下記のように指定しています）

サンプルコード

/*html*/
　　<span class="sam1"
      >サンプル１<br />span要素</span
    >
    <div class="sam1">
      サンプル１<br />div要素
    </div>
    <br />
    <br />
    <span class="sam2"
      >サンプル2<br />span要素</span
    >
    <div class="sam2">
      サンプル2<br />div要素
    </div>
    <br />
    <span class="sam3"
      >サンプル3<br />span要素</span
    >
    <div class="sam3">
      サンプル3<br />div要素
    </div>
    <br />
    <span class="sam4"
      >サンプル4<br />span要素</span
    >
    <div class="sam4">
      サンプル4<br />div要素
    </div>

/*style*/

span,
div {
  color: #fff;
}

span {
  background: #f6d;
}

div {
  background: #69e;
}

✍🏻ブロックレベル要素とインライン要素の違い

比較項目	ブロック要素	インライン要素
表示形式	常に改行されて表示される	改行されず横に並ぶ
幅の扱い	デフォルトで横幅100%	中身の幅にフィット
高さの扱い	内容に応じて広がる／height指定OK	内容に応じて広がる／heightは効かない
幅・高さの指定	width / height 指定できる	基本的に指定できない（一部可能）
子要素に入れられるもの	ブロック要素・インライン要素どちらもOK	原則としてインライン要素のみ（HTML5では多少緩和）
margin / padding の効き方	上下左右すべて効く	上下には効かないことが多い（ブラウザによる）
displayでの切り替え	display: inline; にすればインライン化できる	display: block; にすればブロック化できる
注意点	<p>の中にブロック要素を入れるのはNG（HTML仕様違反）	<span>で囲んだ中に<div>など入れるのは非推奨

displayプロパティについて

• ブロックレベル要素はそのままだと縦に並ぶ
• displayプロパティは、ボックスの表示形式を根本的に変更したいとき使用する
• 使用することでインライン要素をブロック要素のように表示させたり、逆も可能となる
• 指定できる値たち

- inline: インライン要素と同様の表示にする
- block: ブロックレベルと同様の表示にする
- inline-block: それぞれが「横に並ぶボックス（＝インラインのように並び、でも中ではブロックのようにふるまう）」になる
- none: ボックスを消す

display の種類	幅・高さの指定	padding/margin の上下	改行される？
inline	❌（無効）	❌（効きづらい）	❌（横に並ぶ）
block	✅	✅	✅（改行）
inline-block	✅	✅	❌（横に並ぶ）

→表示を確認してみよう！
1.　inlineで、ブロック→インラインへ変更！

/*style*/
.sam1 {
  display: inline;
}

• サンプル1：ブロック要素（div）にinlineを設定
  • 横並びになった！
  • 幅も要素と同じになった！
• サンプル2：ブロック要素もインライン要素もそのまま

2.　blockで、インライン→ブロックへ変更！

.sam2 {
  display: block;
}

• サンプル2：インライン要素（span）が、ブロック要素と同じ表示になった！

3.　noneで、ボックスを削除！
🧐ボックスってなんだっけ→こちらをみてね！

.sam3 {
  display: none;
}

→ブロック要素もインライン要素も、丸ごと消えた！

1. inline-blockで、それぞれが「横に並ぶボックス（＝インラインのように並び、でも中ではブロックのようにふるまう）」を作る！

step1 上下左右にpaddingを設定

.sam4 {
  padding: 10px;
}

→インライン要素（span）はpadding/marginが上下に効かないので、おかしな表示になってしまう

　※左右だけなら大丈夫👌

step2 上下左右にpaddingを設定して、inline-blockを設定

.sam4 {
  display: inline-block;
  padding: 10px;
}

• ブロック要素（div）
  • 本来は縦に積まれる要素が、改行されずインライン要素のように横並びになる
  • でも、幅・高さ・paddingなどの指定はそのまま有効
• インライン要素（span）
  • 横並びは維持したまま、幅・高さ・内側余白（padding）などを自由に指定できるボックスになる
  • インライン的に横に並ぶのはそのまま

フレキシブルボックスレイアウト

• 要素を柔軟に配置・整列・分配できるCSSのレイアウト方法のこと
• 通称flexboxと呼ばれる

display: flex;を設定して、子要素を横に並べる

💡 display: flex;のポイント

• 親要素に指定する！
• デフォルトでflex-direction: row;（横並び）
• 子要素はブロック要素でも横並びに変更される
• 各子要素の幅は指定しておくと、思い通りにレイアウトできる

💡 サンプルコードを解説していく

サンプルコード

/*html*/
　　　<div id="page">
      <header>へっだー</header>
      <div id="content">
        <main>
          メインの段のテキストです。
          メインの段のテキストです。
          メインの段のテキストです。
          メインの段のテキストです。
          メインの段のテキストです。
          メインの段のテキストです。
          メインの段のテキストです。
        </main>
        <div id="sub1">
          サブ1の段のテキストです。
        </div>
        <div id="sub2">
          サブ2の段のテキストです。
        </div>
      </div>
　
/*style*/
#page {
  /* 横方向に中央揃え */
  margin: 0 auto;
  width: 400px;
}

/* フレキシブルデザイン */
#content {
  display: flex;
}

/* 1番左に配置 */
main {
  width: 200px;
  color: #888;
  background: #eee;
}

#sub1 {
  width: 100px;
  color: #fff;
  background: #390;
}

/* 1番右に配置 */
#sub2 {
  width: 100px;
  color: #fff;
  background: #fc0;
}

header,
footer {
  text-align: center;
  color: #fff;
  background: #bbb;
}

✅ display: flex;の基本

#content {
  display: flex;
}

この1行で、#content要素が 「フレックスコンテナ」になる。

フレックスコンテナとは？

• CSSでdisplay: flex;を指定された 親要素 のこと（子要素を柔軟に配置できる箱のこと）
• 親要素に指定すると、その中の子要素（フレックスアイテム）が、自動的に柔軟に配置できるようになる

▼つまり、サンプルコードで設定すると何が起きる？
#contentの中の子要素（ここでは main, #sub1, #sub2）が、横に並ぶようになる！

🔍 HTMLの構造を整理すると

<div id="page">
  ├─ header（上に表示）
  ├─ #content（この中が `display: flex;` で横並び）
  │    ├─ main（メイン）
  │    ├─ #sub1（サイド1）
  │    └─ #sub2（サイド2）
  └─ footer（下に表示）
</div>

🖼️ 実際の見た目

• 合計：200px + 100px + 100px = 400px
• #page に width: 400px; があるので、ちょうど横幅いっぱいでぴったり収まる

+--------------------------------------------------+
|                    header                        |
+----------------+-------------+------------------+
|     main       |    sub1     |      sub2        |
+----------------+-------------+------------------+
|                    footer                        |
+--------------------------------------------------+

orderを設定して、子要素の順番を変える

• 子要素にorderを設定

main {
  order: 3;
　〜省略
}

#sub1 {
  order: 1;
 　〜省略
}

/* 1番右に配置 */
#sub2 {
  order: 2;
  〜省略
}

flex-wrap: wrapでコードの可読性を上げる

下記のサンプルコードを使って、解説！

サンプルコード

/*html*/
 <div id="page">
      <header>へっだー</header>
      <main>
        メインの段のテキストです。
        メインの段のテキストです。
        メインの段のテキストです。
        メインの段のテキストです。
        メインの段のテキストです。
        メインの段のテキストです。
        メインの段のテキストです。
      </main>
      <div id="sub1">
        サブ1の段のテキストです。
      </div>
      <div id="sub2">
        サブ2の段のテキストです。
      </div>
      <footer>フッダー</footer>
    </div>
　　
/*style*/
#page {
  margin: 0 auto;
  width: 400px;
  /* フレキシブルボックス */
  display: flex;
  flex-wrap: wrap;
}

header,
footer {
  /* 幅を設定 */
  width: 400px;
  text-align: center;
  color: #fff;
  background: #bbb;
}

main {
  width: 200px;
  color: #888;
  background: #eee;
}

#sub1 {
  width: 100px;
  color: #fff;
  background: #390;
}

#sub2 {
  width: 100px;
  color: #fff;
  background: #fc0;
}

【1】#page がフレックスコンテナ（親要素）

🔍flex-wrap: wrapの働き

• 「折り返し可能」とし、設定した幅に応じて無理せず次の行に移ることができる

#page {
  display: flex;
  flex-wrap: wrap;
}

• これにより、#pageの直下にある header, main, #sub1, #sub2, footer が 全部「フレックスアイテム」（子要素）になる

• flex-wrap: wrap;によって、横幅がいっぱいになったら改行してくれる

【2】header・footerは横幅いっぱいに（＝1行使う）

• #page の横幅も 400px に設定されてるので、header と footer は1行全部使って表示される
  　→つまり、改行されて上下に配置される

【3】main, #sub1, #sub2 は横並びに

• 合計で 200 + 100 + 100 = 400px
• #pageの幅400pxにちょうど収まるので、改行されずに横一列に並ぶ

【4】子要素の順番を変えたい時

• ヘッダー・フッダーも含めて子要素なので、main,sub1,sub2だけに設定するとヘッダー・フッダーが0となり上に表示される

main {
  order: 2;
}

#sub1 {
  order: 1;
}

#sub2 {
  order: 3;
}

→フッダーにorderを設定することで解決！

footer {
 order: 4;
}