新WEB開発入門講座４個別編1「flexboxの完全理解」

Contents

1 はじめに
2 使用するファイル
3 flexboxの各プロパティの詳細

はじめに

＊これはYouTubeのビデオの参考資料です。以下に従ってご利用ください。＊

適当なdirectoryにフォルダーを作成してください。
そこにさらにCSSというフォルダーとimgというフォルダーを作成してください。
そこにそれぞれ以下のファイルをおいてください。

デスクトップ
　[webstudy]
　　　fexbox01.html
　　[css]
      fexbox01.css
　　[img]
      fexbox-tsk01.png

デスクトップ

　[webstudy]

　　　fexbox01.html

　　[css]

fexbox01.css

　　[img]

fexbox-tsk01.png

といった具合にです。
ファイルは以下です。コピーしてエディタに張り付けて保存して下さい。

使用するファイル

課題１

fexbox01.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="./css/flexbox1.css" rel="stylesheet" type="text/css">
    <title>Flexbox: Task 1</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/products">Our Products</a></li>
        <li><a href="/contact">Contact Us</a></li>
      </ul>
    </nav>
  </body>
</html>

<!doctype html>

<head>

<title>Flexbox: Task 1</title>

</head>

<body>

<nav>

<ul>

<li><a href="/about">About Us</a></li>

<li><a href="/products">Our Products</a></li>

<li><a href="/contact">Contact Us</a></li>

</ul>

</nav>

</body>

</html>

fexbox01.css

body {
  background-color: #fff;
  color: #333;
  font:
    1.2em / 1.5 Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0;
}
nav ul {
  max-width: 700px;
  list-style: none;
  padding: 0;
  margin: 0;
}
nav a:link,
nav a:visited {
  background-color: #4d7298;
  border: 2px solid #77a6b6;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
  display: inline-block;
  text-decoration: none;
}

body {

background-color: #fff;

color: #333;

font:

1.2em / 1.5 Helvetica Neue,

Helvetica,

Arial,

sans-serif;

padding: 1em;

margin: 0;

}

nav ul {

max-width: 700px;

list-style: none;

padding: 0;

margin: 0;

}

nav a:link,

nav a:visited {

background-color: #4d7298;

border: 2px solid #77a6b6;

border-radius: 0.5em;

color: #fff;

padding: 0.5em;

display: inline-block;

text-decoration: none;

}

画像１（flex-task1.png）

課題２

fexbox02.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="./css/flexbox2.css" rel="stylesheet" type="text/css">
    <title>Flexbox: Task 2</title>
  </head>
  <body>
    <ul>
      <li>I am small</li>
      <li>I have more content than the very small item.</li>
      <li>
        I have lots of content. So much content that I don't know where it is
        all going to go. I'm glad that CSS is pretty good at dealing with
        situations where we end up with more words than expected!
      </li>
    </ul>
  </body>
</html>

<!doctype html>

<head>

<title>Flexbox: Task 2</title>

</head>

<body>

<ul>

<li>I am small</li>

<li>I have more content than the very small item.</li>

<li>

I have lots of content. So much content that I don't know where it is

all going to go. I'm glad that CSS is pretty good at dealing with

situations where we end up with more words than expected!

</li>

</ul>

</body>

</html>

flexbox2.css

body {
  background-color: #fff;
  color: #333;
  font:
    1.2em / 1.5 Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0;
}

ul {
  max-width: 700px;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #4d7298;
  border: 2px solid #77a6b6;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
}

body {

background-color: #fff;

color: #333;

font:

1.2em / 1.5 Helvetica Neue,

Helvetica,

Arial,

sans-serif;

padding: 1em;

margin: 0;

}

ul {

max-width: 700px;

list-style: none;

padding: 0;

margin: 0;

}

li {

background-color: #4d7298;

border: 2px solid #77a6b6;

border-radius: 0.5em;

color: #fff;

padding: 0.5em;

}

画像２（flex-task2.png）

課題３

fexbox03.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="./css/flexbox3.css" rel="stylesheet" type="text/css">
    <title>Flexbox: Task 3</title>
  </head>
  <body>
    <div class="parent">
      <div class="child">Center me.</div>
    </div>
  </body>
</html>

<!doctype html>

<head>

<title>Flexbox: Task 3</title>

</head>

<body>

<div class="child">Center me.</div>

</div>

</body>

</html>

flexbox3.css

body {
  background-color: #fff;
  color: #333;
  font:
    1.2em / 1.5 Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0;
}

.parent {
  border: 2px solid #77a6b6;
  border-radius: 0.5em;
  width: 400px;
  height: 300px;
}

.child {
  background-color: #4d7298;
  color: #fff;
  padding: 0.5em;
  width: 150px;
  margin: auto;
}

body {

background-color: #fff;

color: #333;

font:

1.2em / 1.5 Helvetica Neue,

Helvetica,

Arial,

sans-serif;

padding: 1em;

margin: 0;

}

.parent {

border: 2px solid #77a6b6;

border-radius: 0.5em;

width: 400px;

height: 300px;

}

.child {

background-color: #4d7298;

color: #fff;

padding: 0.5em;

width: 150px;

margin: auto;

}

画像３（flex-task3.png）

課題４

fexbox04.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="./css/flexbox4.css" rel="stylesheet" type="text/css">
    <title>Flexbox: Task 4</title>
  </head>
  <body>
    <ul>
      <li>Turnip</li>
      <li>greens</li>
      <li>yarrow</li>
      <li>ricebean</li>
      <li>rutabaga</li>
      <li>endive</li>
      <li>cauliflower</li>
      <li>sea lettuce</li>
      <li>kohlrabi</li>
      <li>amaranth</li>
    </ul>
  </body>
</html>

<!doctype html>

<head>

<title>Flexbox: Task 4</title>

</head>

<body>

<ul>

<li>Turnip</li>

<li>greens</li>

<li>yarrow</li>

<li>ricebean</li>

<li>rutabaga</li>

<li>endive</li>

<li>cauliflower</li>

<li>sea lettuce</li>

<li>kohlrabi</li>

<li>amaranth</li>

</ul>

</body>

</html>

flexbox4.css

ul {
  width: 450px;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #4d7298;
  border: 2px solid #77a6b6;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.8em;
  margin: 0.5em;
}

ul {

width: 450px;

list-style: none;

padding: 0;

margin: 0;

}

li {

background-color: #4d7298;

border: 2px solid #77a6b6;

border-radius: 0.5em;

color: #fff;

padding: 0.8em;

margin: 0.5em;

}

画像４（flex-task4.png）

flexboxの各プロパティの詳細

flex-direction

flex-direction は CSS のプロパティで、主軸の方向や向き（通常または逆方向）を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。
なお、 row および row-reverse の値は、フレックスコンテナーの書字方向に影響されます。 dir 属性が ltr である場合は、 row は左から右へ向かう水平軸を表し、また row-reverse は右から左へ向かう水平軸を表します。一方、 dir 属性が rtl である場合は、 row は右から左へ向かう水平軸を表し、また row-reverse は左から右へ向かう水平軸を表します。

/* 行のテキストの方向に配置 */
flex-direction: row;
/* と同様だが、逆向き */
flex-direction: row-reverse;
/* 積み重なるように配置する */
flex-direction: column;
/* と同様だが、逆向き */
flex-direction: column-reverse;

flex-flow

flex-flow は CSS の一括指定プロパティで、フレックスコンテナーの向きと折り返しの動作を同時に指定します。
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> および <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

justify-content

/* 位置による配置 */
justify-content: center; /* アイテムを中央に寄せる */
justify-content: start; /* アイテムを先頭に寄せる */
justify-content: end; /* アイテムを末尾に寄せる */
justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
justify-content: flex-end; /* フレックスアイテムを末尾に寄せる */
justify-content: left; /* アイテムを左端に寄せる */
justify-content: right; /* アイテムを右端に寄せる */
/* ベースラインによる配置 */
/* justify-content はベースラインの値を取りません */
/* 通常の配置 */
justify-content: normal;
/* 均等配置 */
justify-content: space-between; /* 各アイテムを均等に配置し
最初のアイテムは先頭に寄せ、
最後のアイテムは末尾に寄せる */
justify-content: space-around; /* 各アイテムを均等に配置し
先頭と末尾の間隔は、各アイテムの間隔の
半分の大きさになる */
justify-content: space-evenly; /* 各アイテムを均等に配置し
先頭と末尾と各アイテムの周りには、
同じ大きさの間隔を置く */
justify-content: stretch; /* 各アイテムを均等に配置し
サイズが ‘auto’ であるアイテムは、
コンテナーに合わせて引き伸ばす */
/* あふれた場合の配置 */
justify-content: safe center;
justify-content: unsafe center;

flex-grow

flex-grow は CSS のプロパティで、フレックスコンテナー内の残りの空間が、どれだけフレックスアイテムの主軸方向の寸法に割り当てられるべきかを指定するフレックス伸長係数を設定します。
フレックスコンテナーの主軸方向の寸法が、フレックスアイテムの主軸方向の寸法の合計よりも大きい場合、余った空間はフレックスアイテムに分配され、各アイテムが伸びる大きさは、コンテナーのすべてのアイテムのフレックス伸長係数の合計の割合で按分した値になります。

flex-shrink

flex-shrink は CSS のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは flex-shrink の数値に従って縮小して収まります。

flex-basis

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

align-items

CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
/* 基本キーワード */
align-items: normal;
align-items: stretch;
/* 位置による配置 */
/* align-items は左と右の値を取らない */
align-items: center; /* アイテムを中央付近にまとめる */
align-items: start; /* アイテムを先頭にまとめる */
align-items: end; /* アイテムを末尾にまとめる */
align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
/* ベースラインに配置する */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */
align-items: safe center;
align-items: unsafe center;

flex-wrap

flex-wrap は CSS のプロパティで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。
flex-wrap: nowrap; /* 既定値 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

gap

gap は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは row-gap および column-gap の一括指定です。gap は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは row-gap および column-gap の一括指定です。
/* 単一の値 */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;
/* 単一の値 */
gap: 16%;
gap: 100%;
/* 2 つの値 */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;
/* 1 つまたは 2 つの値 */
gap: 16% 100%;
gap: 21px 82%;
/* calc() 値 */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% – 5px);

グローバル値（すべてに値として設定できます）

nitial: その要素のすべてのプロパティを初期値に変更するべきであることを指定します。
inherit: その要素のすべてのプロパティを継承値に変更するべきであることを指定します。
unset: その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。
revert: 宣言が所属するスタイルシートの出所に応じて動作を指定します。; 作者オリジンに所属するルールの場合、 revert の値でカスケードをユーザーのレベルまでロールバックし、その要素の指定値は、作者レベルのルールが指定されていないかのように計算されます。 revert の用途では、作者オリジンはオーバーライドおよびアニメーションのオリジンも含まれます。; ユーザーオリジンに所属するルールの場合、 revert の値でカスケードをユーザーエージェントレベルまでロールバックし、その要素の指定値は、作者レベルまたはユーザーレベルのルールが指定されていないかのように計算されます。; ユーザーエージェントオリジンでは、 revert の値は unset と同様に動作します。
revert-layer: その要素のすべてのプロパティを、直前のカスケードレイヤーが存在すれば、そこまでカスケードをロールバックすることを指定します。他にカスケードレイヤーが存在しない場合、要素のプロパティは、現在のレイヤーに一致するルールが存在する場合はそのルール、または直前のスタイルオリジンにロールバックします。

以上

はじめに

使用するファイル

課題１

fexbox01.html

fexbox01.css

画像１（flex-task1.png）

課題２

fexbox02.html

flexbox2.css

画像２（flex-task2.png）

課題３

fexbox03.html

flexbox3.css

画像３（flex-task3.png）

課題４

fexbox04.html

flexbox4.css

画像４（flex-task4.png）

flexboxの各プロパティの詳細

flex-direction

flex-flow

justify-content

flex-grow

flex-shrink

flex-basis

align-items

flex-wrap

gap

グローバル値（すべてに値として設定できます）

コメントする コメントをキャンセル

コメントするコメントをキャンセル