作成日: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;  /* 値を変えてみよう */
}
親要素containerflexプロパティを指定すると、 子要素は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などは省略しています。
  • menuA
  • menuB
  • menuC
key
  • col1
  • col2
  • col3
  • col4
  • col5
  • col6

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