作成日：2021/04/12　更新日：2021/11/01

#1 枠のことを「要素」と呼ぶ

枠も、文字も、画像もすべて要素

htmlを学ぶのにいろいろな書物がありますが、枠も、文字も、画像のこともたいてい「要素」と一括ひとくくりに呼ばれています。ただし、要素といっても複数のことを指していますので、これまでCBC入門1ではdivやpなどの枠のことをそのまま「枠」とよんできました。
しかし、これからわからない機能を調べる際にwebや書籍から情報を集めます。その際ほとんどが「要素」と呼ばれますので、慣れておきましょう。

#2 要素のレイアウトにflexフレックスを使う

要素をレイアウトする際にflexを使う

css3から使われるdisplayプロパティの新しい値として「flex」があります。flexを指定した要素はflexコンテナと呼ばれる親要素となり、この中の子要素のことをflexボックスと呼び自由にレイアウトができるようになります。主な特長としては、flexコンテナ内にあるflexボックスを横並びにできるということです。

すべてのflexプロパティを覚えるのは大変なので、よく使う手法だけを覚えて行きましょう。
ここでは代表的な使い方の例をあげています。

flexコンテナ（親要素）で使えるプロパティ

flex-directionフレックスディレクション	子要素の配置する方向を指定するプロパティ。水平か垂直を指示
flex-wrapフレックスラップ	子要素の行数を指定するプロパティ。一行、または複数行に並べるかを指示
flex-flowフレックスフロー	flex-directionとflex-wrapをまとめて指定できるプロパティ。flex-flow:row nowrap;
justify-contentジャスティファイコンテント	flexコンテナー内に空きスペースがあった場合、水平方向のなかで要素をどの位置に配置するかを指定
align-itemsアラインアイテムズ	flexコンテナー内に空きスペースがあった場合、垂直方向のなかで要素をどの位置に配置するかを指定
align-contentアラインコンテント	子要素が複数行に渡った場合の垂直方向の揃えを指定

flexボックス（子要素）で使えるプロパティ

orderオーダー	子要素を任意の順で並べ替えられます。
flex-growフレックスグロー	親要素にスペースがある場合、子要素が他の子要素に対してどれくらい伸びるかを指定します。
flex-shrinkフレックスシュリンク	子要素が他の子要素に対してどれくらい縮むかを指定
flex-basisフレックスベーシス	widthと同じように幅の値を指定できます。autoと指定した場合は子要素のコンテンツのサイズが適応されます。
flexフレックス	flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。
align-selfアラインセルフ	親要素に高さにスペースがある場合、子要素を垂直方向のどの位置に配置するかを指定

htmlファイルに直接cssを書き込んでブラウザで確認

テストフォルダにindex2.htmlを作成し、以下の内容を記入します。
<style>タグの中にcssを記述できます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>flexテスト</title>
</head>
<body>
<style>
  --ここにcssを記入できます--
</style>

  --ここにhtmlを記入します--

</body>
</html>

01　flex


<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
</div>

<div class="container">
  <div class="box">①</div>
  <div class="box2">②</div>
</div>


.container{
  display:flex;
}
.box{
  flex:1;  /* flexのありなしを確認してみよう*/
}
.box2{
  flex:3;  /* 値を変えてみよう */
}

親要素containerにflexプロパティを指定すると、子要素はflexボックスとなり横並びにします。

子要素に特に指定なし

①

②

子要素にflex:1

①

②

子要素のflexの値を変える ②は①の3倍のサイズに

①

②

02　flex-direction


<div class="container">
  <div>①</div>
  <div>②</div>
  <div>③</div>
  <div>④</div>
  <div>⑤</div>
</div>


.container{
  display:flex;
  flex-direction:column;  /* 値を変えてみよう */
}

flex-directionプロパティ
値の初期値はrow（横並び）
row-reverse（横方向逆並び）
column-reverse（縦方向逆並び）があります。

flex-direction:column;

①

②

③

④

⑤

flex-direction:row;

①

②

③

④

⑤

flex-direction:row-reverse;

①

②

③

④

⑤

03　flex-wrap


<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
  <div class="box">③</div>
  <div class="box">④</div>
  <div class="box">⑤</div>
</div>


.container{
  display:flex;
  flex-wrap:nowrap;  /* 値を変えてみよう */
}
.box{
  width:28%;
}

flex-wrapプロパティは折返しの指示。
初期値はnowrap（flexコンテナに収まる）
wrap（flexコンテナからあふれて複数行に）
wrap-reverse（wrapの逆順）

flex-wrap:nowrap;

①

②

③

④

⑤

flex-wrap:wrap;

①

②

③

④

⑤

04　align-content


<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
  <div class="box">③</div>
  <div class="box">④</div>
  <div class="box">⑤</div>
  <div class="box">⑥</div>
  <div class="box">⑦</div>
  <div class="box">⑧</div>
  <div class="box">⑨</div>
</div>


.container{
  display: flex;
  flex-wrap: wrap;
  align-content: center;  /* 値を変えてみよう */
  height:200px;
}
.box{
  width:32%;
}

flex-wrap: wrap;をかけたときに、行における子要素の配置を指定します。

align-content:stretch;

①

②

③

④

⑤

⑥

⑦

⑧

⑨

align-content:flex-start;

①

②

③

④

⑤

⑥

⑦

⑧

⑨

align-content:flex-end;

①

②

③

④

⑤

⑥

⑦

⑧

⑨

align-content:center;

①

②

③

④

⑤

⑥

⑦

⑧

⑨

align-content:space-between;

①

②

③

④

⑤

⑥

⑦

⑧

⑨

align-content:space-around;

①

②

③

④

⑤

⑥

⑦

⑧

⑨

05　justify-content


<div class="container">
  <div>①</div>
  <div>②</div>
  <div>③</div>
  <div>④</div>
  <div>⑤</div>
</div>


.container{
  display:flex;
  justify-content: flex-end;  /* 値を変えてみよう */
}

flexボックスを横並びさせたときの位置や間隔の指定。

justify-content:flex-start;

①

②

③

④

⑤

justify-content:flex-end;

①

②

③

④

⑤

justify-content:center;

①

②

③

④

⑤

justify-content:space-between;

①

②

③

④

⑤

justify-content:space-around;

①

②

③

④

⑤

justify-content:space-evenly;

①

②

③

④

⑤

06　align-items


<div class="container">
  <div style="height:50px;">①</div>
  <div>②</div>
  <div style="height:70px;">③</div>
  <div>④</div>
  <div>⑤</div>
</div>


.container{
  height:100px;
  display:flex;
  align-items: flex-end;  /* 値を変えてみよう */
}

flexボックスの縦位置を指定します。高さがバラバラな要素を作って配置してみました。
初期値はstretchです。

※子要素にのみに同じような効果をつけるときは子要素にalign-selfプロパティを使います。

align-items:stretch; 高さが揃います。

①

②

③

④

⑤

align-items:flex-start;

①

②

③

④

⑤

align-items:flex-end;

①

②

③

④

⑤

align-items:center;

①

②

③

④

⑤

align-items:baseline; 文字の下の位置に揃う

①

②

③

④

⑤

07　要素を途中からちがう動きにする


  margin-lfetのみ
  <div class="container">
    <div>①</div>
    <div class="box1">②</div>
    <div>③</div>
  </div>

  margin:auto;の場合
  <div class="container">
    <div>①</div>
    <div class="box2">②</div>
    <div>③</div>
  </div>


.container{
  display:flex;
}
.box1{
  margin-left:auto;  /* 右に移動する */
  background-color:#c55;
}
.box2{
  margin:auto;  /* センターになる */
  background-color:#c55;
}

marginのかけ方でいろんな配置ができます。

margin-lfetのみ

①

②

③

margin:auto;に設定した場合は中央に配置される

①

②

③

08　センタリング


<div class="container">
  <div class="box">子要素</div>
</div>


.container{
  height:160px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.box{
  background-color:#eee;
}

親要素にセンタリングするプロパティを入れます。

子要素

justify-content（横並びの位置）、
align-items（縦の位置）、
どちらもcenterにすることで中央配置になります。

09　レイアウト


<div class="container">
  <div class="header">
    <div class="header-logo">logo</div>
    <ul class="header-nav">
      <li class="header-nav-a">menuA</li>
      <li class="header-nav-a">menuB</li>
      <li class="header-nav-a">menuC</li>
    </ul>
  </div>
  <div class="content">
    <div class="key">key</div>
    <ul class="column">
      <li class="col">col1</li>
      <li class="col">col2</li>
      <li class="col">col3</li>
      <li class="col">col4</li>
      <li class="col">col5</li>
      <li class="col">col6</li>
    </ul>
  </div>
  <div class="footer">footer</div>
</div>


.header{
  display:flex;
}
.header-nav{
  display:flex;
  margin-left:auto;
}
.key{
  height:100px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.column{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.col{
  width:30%;
}

※border、margin、paddingなどは省略しています。

key

col1
col2
col3
col4
col5
col6

cssは、flexプロパティを使った要素だけ記載してみました。たったこれだけの記述でも、Webサイトの大枠が組めるのがわかります。

次のページ ▶

作成日：2021/04/12　更新日：2021/11/01

#1 枠のことを「要素」と呼ぶ

枠も、文字も、画像もすべて要素

#2 要素のレイアウトにflexフレックスを使う

要素をレイアウトする際にflexを使う

flexコンテナ（親要素）で使えるプロパティ

flexボックス（子要素）で使えるプロパティ

htmlファイルに直接cssを書き込んでブラウザで確認

01　flex

02　flex-direction

03　flex-wrap

04　align-content

05　justify-content

06　align-items

07　要素を途中からちがう動きにする

08　センタリング

09　レイアウト

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12 更新日：2021/11/01

#1 枠のことを「要素」と呼ぶ

枠も、文字も、画像もすべて要素

#2 要素のレイアウトにflexフレックスを使う

要素をレイアウトする際にflexを使う

flexコンテナ（親要素）で使えるプロパティ

flexボックス（子要素）で使えるプロパティ

htmlファイルに直接cssを書き込んでブラウザで確認

01 flex

02 flex-direction

03 flex-wrap

04 align-content

05 justify-content

06 align-items

07 要素を途中からちがう動きにする

08 センタリング

09 レイアウト

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12　更新日：2021/11/01

01　flex

02　flex-direction

03　flex-wrap

04　align-content

05　justify-content

06　align-items

07　要素を途中からちがう動きにする

08　センタリング

09　レイアウト

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）