
プログラマハック
2019.12.04
プログラマーの仕事はなくならない!プログラマーの需要を徹底解説
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
ITコラム
2017.05.17
フレックスボックス(flexbox)とは、大きさがフレキシブルに伸縮するボックスで、多様なレイアウトを実現するためのCSS3の新しいレイアウトモジュールです。
今回は、flexboxのためのプロパティを紹介したいと思います。
1.flexboxのためのプロパティ
2.display:flex
3.flex-basisプロパティ
4.justify-contentプロパティ
5.flex-growプロパティ
6.flex-shrinkプロパティ
7.flexプロパティ
8.flex-wrapプロパティ
9.flex-directionプロパティ
10.flex-flowプロパティ
flexboxレイアウトは、親要素のdisplayプロパティにflexという値を指定して使用します。
親要素に display: flex と指定すると、それがflexコンテナとよばれるものになり、その中の子要素は自動的にflexアイテムとなります。
そして、flexコンテナの大きさが変わると、中身のflexアイテムの大きさもフレキシブルに変わってレイアウトされます。
flexboxを作成する際に使用するプロパティについては、flexコンテナだけに指定できるプロパティと、flexアイテムだけに指定できるプロパティとに分かれています。
flexコンテナ(親要素)で指定するプロパティは、次の通りです。
display 値:flex、inline-flex
(displayプロパティにflexまたはinline-flexを指定すると、flexboxとなる)justify-content アイテムの横方向の揃え方を指定
値:flex-start(デフォルト値)、flex-end、center、space-between、space-aroundflex-direction アイテムの配置の方向を指定
値:row(デフォルト値)、row-reverse、column、column-reverseflex-wrap アイテムの改行の有無を指定
値:nowrap(デフォルト値)、wrap、wrap-reverseflex-flow ショートハンドプロパティ
flex-directionの値とflex-wrapの値をまとめて指定align-items アイテムの縦方向の揃え方を指定
値:stretch(デフォルト値)、flex-start、flex-end、center、baselinealign-content アイテムが複数行の場合の縦方向の揃え方を指定
値:stretch(デフォルト値)、flex-start、flex-end、center、space-between、space-around
flexアイテム(子要素)で指定するプロパティは、次の通りです。
flex-grow アイテムの膨張率を指定
値:単位なしの係数(デフォルト値は0でマイナスは指定不可)flex-shrink アイテムの収縮率を指定
値:単位なしの係数(デフォルト値は1でマイナスは指定不可)flex-basis 横に並べる場合はアイテムの幅(width)、縦に並べる場合はアイテムの高さ(height)を指定
値:auto(デフォルト値)、単位付きの数値flex ショートハンドプロパティ
flex-growの値、flex-shrinkの値、flex-basisの値をまとめて指定align-self アイテム1つずつを個別に指定
値:auto(デフォルト値)、flex-start、flex-end、center、baseline、stretchorder アイテムの表示の順番を指定
値:0(デフォルト値)、単位なしの整数
section要素をdiv要素で囲み、そのdiv要素にdisplay:flexを指定すると、このdiv要素がflexコンテナとなります。
そして、子要素のsection要素は、自動的にflexアイテムとなります。
ソースは次の通りです。
(CSS) div#sample {display:flex;} div#sample section { margin: 10px; background: #FF9696;} (HTML) <div id="sample"> <section> flexアイテム テキストテキストテキスト </section> <section> flexアイテム </section> <section> flexアイテム </section> <section> flexアイテム </section> <section> flexアイテム </section> </div>
上の例ではdisplay:flexを指定していますが、display:inline-flexを指定すると、インラインの特徴を持つflexboxとなります。
1番目のflexアイテムはテキストが長いため、他のflexアイテムより幅が広くなっています。
margin:10pxをしているので、各アイテムの間隔が空いていますが、マージンを指定しない場合は、各flexアイテムはすき間なくくっついて表示されます。
また、flexアイテムはマージンの相殺が起こらないという特徴があります。
flexアイテムにflex-basisプロパティで、ベースとなる幅を指定すると、コンテンツの内容に関係なくその幅で揃えることができます。
(但し、画像や長い英単語など、固有のサイズがあるものは、それより小さくできない場合もあります。)
先ほどのflexboxについて、section要素にflex-basis:100pxを指定すると、次のようになります。
ソースは次の通りです。
(CSS) div#sample {display:flex;} div#sample section { margin: 10px; flex-basis:100px; background: #FF9696;} (HTML) <div id="sample"> <section> flexアイテム テキストテキストテキスト </section> <section> flexアイテム </section> <section> flexアイテム </section> <section> flexアイテム </section> <section> flexアイテム </section> </div>
flexコンテナの幅やブラウザの大きさの関係で、各flexアイテムに100pxの幅を確保できない場合は、flexアイテムは縮小されて表示されます。単にwidthプロパティで幅を指定した場合に比べてフレキシブルです。
flex-basisプロパティの値は、次の通りです。
auto デフォルト値(自動調整) サイズ 単位を付けた数値 % flexコンテナ(親要素)に対する割合
flex-basisプロパティの値は、継承されません。
また、flex-basisプロパティは、flexアイテムに関する要素で使用できます。
justify-contentプロパティは、水平方向の揃え方を指定します。
flexアイテムが縦に並んでいる場合(flex-direction: columnを指定している場合)は、上下方向の揃え方を指定します。
justify-contentプロパティの値は、次の通りです。
flex-start デフォルト値
左揃え
(縦並びの場合は上揃え)flex-end 右揃え
(縦並びの場合は下揃え)center center中央揃え space-between 両端揃えで均等間隔 space-around 両端揃えで均等間隔かつ両端に半分の間隔をあける
justify-contentプロパティの値は、継承されません。
また、justify-contentプロパティは、flexコンテナに関する要素で使用できます。
先ほどのflexboxについて、div要素(flexコンテナ)にjustify-content: space-betweenを指定すると、次のようになります。
ソースは次の通りです。
(CSS) div#sample { display:flex; justify-content: space-between;} div#sample section { margin: 10px; flex-basis:100px; background: #FF9696;} (HTML) <div id="sample"> <section> flexアイテム テキストテキストテキスト </section> <section> flexアイテム </section> <section> flexアイテム </section> <section> flexアイテム </section> <section> flexアイテム </section> </div>
両端揃えの均等間隔で表示されました。
flex-growプロパティは、flexアイテムの膨張率を指定する際に使用するプロパティです。
flexアイテムのサイズは、基本的にはコンテンツの内容が基準となりますが、スペースに余裕がある時など、flex-growプロパティを使ってflexアイテムの幅を膨張させることができます。
flex-growプロパティの値は、次のように指定します。
係数 0以上の単位なしの数値(数が大きいほど膨張率が高くなる)
デフォルトは0(膨張なし)
flex-growプロパティの値は、継承されません。
また、flex-growプロパティは、flexアイテムに関する要素で使用できます。
flexアイテム全てにflex-grow:1をそれぞれ指定すると、flexアイテムはflexコンテナのスペースいっぱいに膨張して、同じ幅に揃います。
justify-content: space-betweenを指定した場合と同じような結果となります。
また、flex-growを、特定のflexアイテムだけに指定することもできます。
先ほどのflexboxのアイテムを3つにして、最初のアイテムのみflex-grow:5、残りのアイテムにflex-grow:1を指定すると、次のようになります。
ソースは次の通りです。
(CSS) div#sample {display:flex;} div#sample section { margin: 5px; flex-basis:100px; flex-grow:1; background: #FF9696;} div#sample section:nth-child(1) {flex-grow:5;} (HTML) <div id="sample"> <section> flexアイテム テキストテキストテキスト </section> <section> flexアイテム </section> <section> flexアイテム </section> </div>
親要素のスペースに余裕があれば、最初のアイテムには5、他のアイテムは1の割合で膨張されます。
flex-shrinkプロパティは、flexアイテムの収縮率を指定する際に使用するプロパティです。
スペースに余裕がない時などに、flex-shrinkプロパティを使って、flexアイテムを収縮することができます。
flex-shrinkプロパティの値は、次のように指定します。
係数 0以上の単位なしの数値(数が大きいほど収縮率が高くなる)
デフォルトは1(状況に合わせて収縮される)
flex-shrinkプロパティの値は、継承されません。
また、flex-shrinkプロパティは、flexアイテムに関する要素で使用できます。
flex-shrinkプロパティを、特定のflexアイテムにのみ指定すると、そのアイテムだけ収縮率を変えることができます。
先ほどの3つのflexboxのアイテムのうち、最後のアイテムにflex-shrink: 5と指定すると、次のようになります。
ソースは次の通りです。
(CSS) div#sample {display:flex;} div#sample section { margin: 5px; flex-basis:500px; background: #FF9696;} div#sample section:nth-child(3) {flex-shrink:5;} (HTML) <div id="sample"> <section> flexアイテム テキストテキストテキスト </section> <section> flexアイテム </section> <section> flexアイテム </section> </div>
親要素のスペースに余裕がない時に、他のアイテム1に対して最後のアイテム5の配分で収縮されます。
flexプロパティは、flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティの3つをまとめて指定できるショートハンドプロパティです。
flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティの3つプロパティは、いずれもflexibility(柔軟性)を指定するプロパティです。
他のショートハンドプロパティと同様に、値を半角スペースで区切って記述します。
flex : none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
| : または
|| : 値が1つは必要で順不問
? : 省略可能
例えば、
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-basisプロパティは、どこで指定してもOKです。
flex-wrapプロパティは、flexアイテムを折り返すかどうかを指定するプロパティです。
デフォルト値は nowrap(折り返さない)なので、親要素であるflexコンテナに収まらなければはみ出してしまいます。
これを、flex-wrap: wrap(折り返す)と指定すると、flexコンテナのスペース内で折り返して表示します。
flex-wrapプロパティの値は、次の通りです。
nowrap デフォルト値
折り返さず1行で表示wrap flexコンテナに合わせて折り返して表示 wrap-reverse wrapと同様に改行するが、折り返しが上側に向かう
flex-wrapプロパティの値は、継承されません。
また、flex-wrapプロパティは、flexコンテナに関する要素で使用できます。
flex-wrap:wrap-reverseと指定すると、次のようになります。
ウィンドウ幅を狭くすると、flexアイテムが下から上へ折り返されて表示されます。
ソースは次の通りです。
(CSS) div#sample { display:flex; flex-wrap:wrap-reverse; justify-content:space-between} div#sample section { margin: 5px; flex:1 0 200px; background: #FF9696;} (HTML) <div id="sample"> <section> 1 </section> <section> 2 </section> <section> 3 </section> <section> 4 </section> <section> 5 </section> <section> 6 </section> </div>
flex-directionプロパティは、flexアイテムの配置の方向を指定するプロパティです。
左から右への配置がデフォルトの並び方ですが、flex-directionプロパティを指定すると、他の方向へ並べることができます。
flex-directionプロパティの値は、次の通りです。
row デフォルト値
左から右に水平方向で配置row-reverse 右から左に水平方向で配置 column 上から下に垂直方向で配置 column-reverse 下から上に垂直方向で配置
flex-directionプロパティの値は、継承されません。
また、flex-directionプロパティは、flexコンテナに関する要素で使用できます。
flex-direction:columnと指定すると、次のように表示されます。
ソースは次の通りです。
(CSS) div#sample { display:flex; flex-wrap:wrap; flex-direction:column; justify-content:space-between} div#sample section { margin: 5px; flex:1 0 100px; background: #FF9696;} (HTML) <div id="sample"> <section> 1 </section> <section> 2 </section> <section> 3 </section> </div>
flex-flowプロパティは、flex-wrapプロパティ、flex-directionプロパティをまとめて指定できるショートハンドプロパティです。
flex-flowプロパティの値も、他のショートハンドプロパティと同様に、値を半角スペースで区切って記述します。
指定する値は、1つでも2つでも良く、指定順も自由です。
指定しない値は、デフォルト値となります。
flex-flow:wrap-reverse row-reverseと指定すると、次のように表示されます。
flexboxのスペースに余裕がある場合は、折り返されずに右から左方向に並びます。
flexbox内に余裕がない場合は、折り返されながら下から上方向に向かって並びます。
ソースは次の通りです。
(CSS) div#sample { display:flex; flex-flow: wrap-reverse row-reverse;} div#sample section { margin: 5px; flex:1 0 200px; background: #FF9696;} (HTML) <div id="sample"> <section> 1 </section> <section> 2 </section> <section> 3 </section> <section> 4 </section> <section> 5 </section> <section> 6 </section> </div>
プログラマハック
2019.12.04
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
スキルアップ
2019.11.29
今回は、20代フリーターが正社員面接で採用されるための、面接攻略法をご紹介します。「正社員面接って何を聞かれるの?すごく緊張する」そう感じる20代フリーターは多くいます。正社員面接は、アルバイトでの面接と大きく異なります […]
スキルアップ
2019.11.27
エンジニアを目指してプログラミングスクールを検討中の方で「プログラミングスクールに通っても時間と費用を無駄にするのではないか」と不安のある方はいませんか? もちろん、プログラミングスクールに通いさえすれば誰でもエンジニア […]
プログラマハック
2019.11.22
今回は、未経験でプログラマ転職を成功させるためのおすすめポイントについて、ご紹介します。「手に職を付けたいからプログラマになりたい」と思った時、「未経験で本当にプログラマになれるの?」「プログラマになるためには、どうした […]
スキルアップ
2019.11.20
ITエンジニアの職種別平均年収とITエンジニアが年収を上げる方法を紹介します! IT業界で働く人々は高収入のイメージがありますが、実際はどうなんでしょうか。 今回は、ITエンジニアの職種別の平均年収とITエンジニアが年収 […]
スキルアップ
2019.11.15
「フリーターから正社員になりたい!」と思って、懸命に就職活動しているのに、中々内定がもらえず、「フリーターの就職は難しいな」と悩んでいませんか?今回は、そんなフリーターの方が、自分の長所やフリーター経験を活かして、いち早 […]
INTERNOUS,inc. All rights reserved.