Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)

display: flex を指定すると、Flexbox(フレックスボックス) を作ることができます。
今回から数回に分けて、Flexbox のためのプロパティを使ってみます。

Flexboxは、Flexible Box Layout Module の略称です。
幅や高さがフレキシブルに伸縮するボックスです。
floatプロパティより 簡単に横並びのレイアウトができたり、タブレットやスマホなどでは自動でボックスサイズを合わせてくれるのですごく便利です。

が、しかし(笑!)
Flexboxは これまでに仕様が大きく2回も変わったので、その2種類の古い仕様に対応したオールドブラウザがあって、ちょっと面倒くさいことになっています。
(そのあたりは【18-5】でまとめる予定です)

しかも、まだ勧告されたわけではなく、勧告候補(Candidate Recommendation)
コレ→ CSS Flexible Box Layout Module Level 1 _ W3C Candidate Recommendation

勧告までに、仕様が多少は変わるかもしれませんが、基本的な仕様はほとんどのブラウザですでに対応しています。

「Can I Use」で各ブラウザの対応状況を見ることができます。

スマホサイトならもう充分イケますね。Android4.3 が box仕様なのが弱点ですが...。
とにかく、IE9、10も利用が減るでしょうし、これからは Flexbox の出番も増えるはず。便利なので。
というわけで、今回から Flexbox の使い方についてまとめておきます。
正式勧告でまた若干仕様が変わっていたら、この記事も修正します(2016年8月記)

Flexbox に関しては、専用のプロパティがたくさんあるので 記事を分けます。

【18-1】Flexbox を使おう!(フレキシブルボックスのプロパティ) ←今日はココ
display: flex で「Flexコンテナ」を作ります。
flex-basis、flex-grow、flex-shrink、justify-contentプロパティを使ってみます。
【18-2】Flexbox内のボックスの配置方法を指定しよう
flex-wrap、flex-directionプロパティを使います。
【18-3】Flexbox内の縦(垂直)方向を揃えよう
align-items、align-self、align-contentプロパティを使います。
【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
orderプロパティを使います。
【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
Flexboxの古い仕様に対応しているブラウザやベンダープレフィックスの書き方について。
というわけで、本日のINDEXです。今回は基本的なことを押さえます。
  1. 基本の「Flexコンテナ」と「Flexアイテム」
  2. フレキシブルボックスのための全プロパティ一覧
  3. display:flex で「Flexコンテナ」を作ろう
  4. flex-basisプロパティ で、ベースサイズを指定する
  5. justify-contentプロパティで水平方向の揃え方を決める
  6. Flexibility(柔軟性)を指定する flex-grow と flex-shrink
    1. スペースいっぱいに幅を揃えたいときは flex-grow:1
    2. flex-growプロパティで、特定のアイテムだけ幅を大きく
    3. flex-shrinkプロパティで、特定のアイテムだけ幅を小さく
  7. ショートハンドプロパティ「flex」

基本の「Flexコンテナ」と「Flexアイテム」

Flexboxを作るには、まずフレキシブルにレイアウトしたい要素たちを親要素で囲むところから始めます。
この親要素に display: flex と指定すると Flexコンテナと呼ばれるものになり、中の子要素は(特に何も指定しなくても自動的に全部) Flexアイテム になります。

Flexコンテナの幅が変われば、中身のFlexアイテムの幅や高さがフレキシブルに変わってレイアウトされます。

Flexコンテナだけに指定できるプロパティFlexアイテムだけに指定できるプロパティにはっきりわかれているのが注意点です。
次の一覧表でまとめてみました↓

フレキシブルボックスのための全プロパティ一覧

指定対象 Flexコンテナ(親)なら黄色 Flexアイテム(子)ならブルーで色分けしてみました。
赤いテキストはデフォルト値です。

プロパティ 指定対象
display flex inline-flex
(displayプロパティの値のうち flex または inline-flex を指定すれば、フレキシブルボックスを定義します)
Flexコンテナ
justify-content アイテムの横方向の揃え方を指定。
flex-start flex-end center space-between space-around
Flexコンテナ
flex-grow アイテムの膨張率を指定。
係数(単位無し。マイナス不可)デフォルトは0
Flexアイテム
flex-shrink アイテムの収縮率を指定。
係数(単位無し。マイナス不可)デフォルトは1
Flexアイテム
flex-basis アイテムの幅(width)を指定。縦に並ぶ場合は高さ(height)を指定。
単位付きの数値。デフォルトはauto
Flexアイテム
flex flex-growの値 flex-shrinkの値 flex-basisの値 をまとめて書くショートハンドプロパティ Flexアイテム
flex-direction アイテムの配置の方向を指定。横方向か縦方向かなど。
row row-reverse column column-reverse
Flexコンテナ
flex-wrap アイテムが改行するかしないかを指定。
nowrap wrap wrap-reverse
Flexコンテナ
flex-flow flex-directionの値 flex-wrapの値 をまとめて書くショートハンドプロパティ Flexコンテナ
align-items アイテムの縦方向の揃え方を指定。
flex-start flex-end center baseline stretch
Flexコンテナ
align-self align-itemsの個別バージョン。アイテム1つずつを個別に指定できます。
auto flex-start flex-end center baseline stretch
Flexアイテム
align-content アイテムが複数行になった時の縦方向の揃え方を指定。
(justify-contentの縦バージョン。ただしstretchあり)
flex-start flex-end center space-between space-around stretch
Flexコンテナ
order アイテムの表示の順番を変えられます。
整数(単位無し)デフォルトは0
Flexアイテム

今日はこの中の、dixplay:flex、flex-basis、justify-content、flex-grow、flex-shrink を使って、基本的な Flexbox を作ってみます。(残りのプロパティは次回以降で)

display:flex で「Flexコンテナ」を作ろう

下記のような構造でHTMLを組んでみます。
Flexアイテムにしたい <section>要素を6個作って、全部 <div>で囲み、そのdivには "container" というID名を付けました。

<div id="container">
<section>
<h1>1</h1>
<p>テキスト</p>
</section>

<!--以下、<section> が5個続きます。全部で6個にします-->

</div>

この <div id="container"> に display:flex を指定すると、これが Flexコンテナになります。
そして、子の section要素は全部 Flexアイテムに勝手になります。カンタンですね♪

div#container {display:flex}

display:inline-flex もあり。これを指定すると、インラインの特徴を持つフレキシブルボックスになります。(今回は display:flex だけで解説して行きます)

この段階では、PCブラウザでの表示はこのようになっています。
(↓クリックでサンプルファイルが開きます)

1番目のFlexアイテムだけテキストのボリュームがあるので、他のFlexアイテムと違って幅が広くなってます。
各アイテムの間隔は margin:5px で指定しています。marginを指定しなければ、Flexアイテムはピッタリくっつきます。
また、Flexアイテムはマージンの相殺が起こらないという特徴があります。

flex-basisプロパティ で、ベースサイズを指定する

さきほどのサンプルでは、flexアイテム(子)のコンテンツ(テキストなど)が数字だけのものは、ぺったんこですね。
この Flexアイテムに flex-basisプロパティ を指定して、ベースになる幅を決めてやると、コンテンツの量に関わらずベースの幅で揃えることができます。
*ただし、中身が画像など固定サイズがあるものならそれに従います。
*また、長い英単語などでは、そのサイズより小さくなれない場合もあります。

アイテムが縦に並ぶ場合(flex-direction: columnのとき)は 高さのベースになります。(flex-direction は次回に詳細)

<section> に flex-basis:100px と指定してみると、

div#container section {flex-basis:100px}

このように、各アイテムの幅が100pxで統一されます。
(↓クリックでサンプルファイルが開きます)

ここで↑ブラウザウィンドウの幅を変えて、Flexアイテムの幅が変化するのを確認してください。

Flexコンテナの幅に余裕が無くて 各アイテムが幅100pxを確保できなければ、Flexアイテムは縮小されます。これが「フレキシブル」なところ。単に widthプロパティで指定したらこうなりませんね。

flex-basisは、あとで出てくる flex-grow、flex-shrink と共に Flexibility(柔軟性)を指定するプロパティ。
親となるFlexコンテナのスペース内で、各Flexアイテムが空いたスペースを埋めるために伸びたり縮んだりするときに、その伸縮性を調整するためのモノ。
flex-basisは、あくまでもベースになる幅(または高さ)を指定するだけで、width や height の指定のようにキッチリとサイズを固定するわけではありません。

Flexアイテムの幅をベースサイズで揃えたあと、flex-grow、flex-shrink を使って、特定のアイテムだけをベースサイズより膨張させたり縮小させたりもできます。

flex-basisプロパティの値のまとめです。

flex-basis の値
サイズ 単位を付けた数値で
flexコンテナ(親)に対するパーセンテージ
content Indicates automatic sizing, based on the flex item’s content.
flexアイテムの中身に基づいて自動的にサイズを指定します(って直訳)
auto これがデフォルト

「content」という値が新しく追加されたようです。
が、これ、ほとんどのブラウザで適用されていないみたいなので、まだ使わないほうがいいかも(使い方もよくわからんw。autoとどう違うのかしら)
参考:CSS Flexible Box Layout Module Level 1 _flex-basis-property

値の継承 なし 適用できる要素 Flexアイテム な要素

justify-contentプロパティで水平方向の揃え方を決める

上↑のサンプルの Flexアイテムが左揃えになっているのは、justify-contentプロパティをまだ指定していなくて、デフォルトの 左揃え になっているから。

justify-contentプロパティは、横方向の揃え方を決めます。
Flexアイテムが縦に並んでいる時(flex-direction: columnのとき)は 縦方向の揃え方を指定します。

justify-content の値
flex-start 左揃え。これがデフォルト

縦に並んでいる時は上揃え
flex-end 右揃え

縦に並んでいる場合は下揃え
center 中央揃え

space-between 両端揃えの均等間隔

space-around 両端に半分のスペースがある均等間隔

値の継承 なし 適用できる要素 Flexコンテナ な要素

これはFlexコンテナに指定するプロパティです。
(さっきの flex-basis は、flexアイテムに指定するんだったよね。ヤヤコシイですねw)

サンンプルでは、justify-content: space-between と指定。

div#container {
	display:flex;
	justify-content: space-between}

で、このように、両端揃えの均等間隔になりました。
(↓クリックでサンプルファイルが開きます)

Flexibility(柔軟性)を指定する flex-grow と flex-shrink

Flexアイテムのサイズは、基本的には中身のコンテンツが基準になるのですが、さきほど flex-basisプロパティでベーズになるサイズを指定しましたね。

flex-basisの値は、Flexコンテナのスペースに余裕がある時は、ちゃんと効きます。
例えば flex-basis を 100px で指定したら、こんなふうに↓なってます。

でも、ウィンドウサイズを小さくして、スペースに余裕が無くなれば、アイテムは flex-basisで指定した値よりも小さくなります。これは flex-shrink がデフォルトの「1」だから。

ただしこれはコンテンツの内容によります。
長い英単語 や 画像 などがあるときは、アイテムがそのサイズより小さくなれない場合もあります。

flex-grow、flex-shrinkは、先ほどの flex-basis と一緒に Flexboxの Flexibility(柔軟性)を指定するプロパティです。

スペースに余裕があるとき、flex-growプロパティを使って、余裕のスペースにアイテムの幅を膨張させることができます。

スペースに余裕が無いときに、flex-shrinkプロパティを使って、特定のアイテムの 収縮分を増やすことができます。

ということで、flex-growプロパティはFlexアイテムの 膨張率
flex-shrinkプロパティ収縮率 を指定します。

flex-grow の値
係数 0以上の単位無しの数字。マイナスは不可。
デフォルトは0 で膨張無し。flex-basis の値かコンテンツの幅に合わせます。
数が大きいほど膨張率が高くなります。
値の継承 なし 適用できる要素 Flexアイテム な要素
flex-shrink の値
係数 0以上の単位無しの数字。マイナスは不可。0で縮小無しです。
デフォルトは1 で状況に合わせて収縮されます。
数が大きいほど縮小率が高くなります。
値の継承 なし 適用できる要素 Flexアイテム な要素

スペースいっぱいに幅を揃えたいときは flex-grow:1

Flexアイテム全部に同じ flex-grow:1 を指定すると、Flexアイテムは Flexコンテナのスペースいっぱいに膨張して、同じ幅に揃います。
justify-content: space-between を指定していなくても、スペースいっぱいに広がります。

flex-growFlexアイテムに指定します。子要素のほうね。

div#container section {
	flex-basis:100px;
	flex-grow:1}

flex-growプロパティで、特定のアイテムだけ幅を大きく

flex-grow を、特定のFlexアイテムだけに指定すると、そのアイテムだけ膨張率を変えられます。
例えば、4つのアイテムのうち最初の1アイテムに flex-grow: 5 と指定すると、
親のスペースに充分余裕が有るときは、最初のアイテムには5、他のアイテムには1ずつの割合で膨張させるかんじになります。

div#container section {flex-basis:100px; flex-grow:1}
div#container section:nth-child(1) {flex-grow:5}

flex-shrinkプロパティで、特定のアイテムだけ幅を小さく

flex-shrink を、特定のFlexアイテムだけに指定すると、そのアイテムだけ収縮率を変えることができます。
例えば、4つのアイテムのうち最後のアイテムに flex-shrink: 5 と指定すると、
親のスペースに余裕が無い時、他のアイテムが1ずつで、このアイテムだけ5を配分して収縮させるかんじになります。

div#container section {flex-basis:100px; flex-grow:1}
div#container section:nth-child(4) {flex-shrink:5}

まとめてサンプルです。
ウィンドウサイズを変えて確認してみてください。
(↓クリックでサンプルファイルが開きます)

ショートハンドプロパティ「flex」

Flexibility(柔軟性)を指定する flex-growflex-shrinkflex-basis の3つのプロパティをまとめるショートハンドプロパティ flex が用意されています。

今までやってきたショートハンドと同じく値を「半角スペース」で区切って書きます。 W3Cの構文は、このようになっています。

flex : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

| は、どちらか1つだけって意味。
[ ] は、ひとまとまりという意味。
|| は、値が1つは必要だけど省略可能で、書く順序は問わないって意味。
? は、省略可能で0回または1回出現するという意味。flex-shrink は無くてもイイってことです。
(CSSの構文記号について詳しくはこちら:値の定義構文 - CSS | MDN

ということで、
まず flex: none と書けば flex: 0 0 auto と同じになります(flex-grow と flex-shrink は 0、flex-basis: auto)

そして、デフォルトflex: 1 0 auto です。
膨張率・縮小率を指定した後で、チャラにしたければこれを指定すれば一発OK。

各プロパティの値を書く場合は、例えば、
flex: 100px と書けば flex-basis: 100px
flex: 2 5 なら flex-grow: 2; flex-shrink: 5 ですね。
flex: 2 なら flex-grow: 2 ということですね。flex-shrink は無くても良いので、単位無しの数値が1つなら flex-grow ってことです。

値を3つとも書くなら、
flex: 2 5 100px でも flex: 100px 2 5 でも同じという文法です。
flex-grow と flex-shrink だけ書き順が決まっていて、grow → shrink の順だと覚えておこう。

flex-grow、flex-shrink、flex-basis は難易度高いです

サンプルをわかりやすい流れで作ろうとしたら、初回からけっこうわかりにくい flex-grow、flex-shrink、flex-basis が登場しちゃいました。
これらは 正直どんなシチュエーションで威力を発揮するのか、私もまだ十分理解していません。

Flexboxを使ってアイテムを横や縦に自由に並べるのですが、親要素が固定幅なら、この膨張率・縮小率を設定しなきゃいけない場面って少ないと思うんです。
たぶん親がレスポンシブな時に「あ、flex-grow使えばいいじゃん」なんてシーンもあるかも。

次回予告

次回は、flex-wrapプロパティ、flex-directionプロパティを使ってみます。
flexアイテムを折り返し表示させたり、縦方向に組んだりできて、けっこうオモシロイです。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

関連記事

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2016/08 | 09
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.