ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

HTML/CSS

2022/06/23

2023/05/08

Flex プロパティ 一覧記事サムネイル

CSSでレイアウトを作成するとき、display: flex;を使うことで要素を横並びにできます。あなたも以下のような横並びレイアウトを作りたいと思ったことはありませんか？

  • 要素を両端に揃え、余白を均等に配置する
  • 親要素の幅からはみ出した要素を折り返す
  • 画像とテキストを交互に配置する

このようなレイアウトを作成するなら、Flexboxを活用するのがおすすめです。

この記事ではFlexboxの基本から実際の使用例まで、実践的に解説していきます。ぜひ学習にお役立てください。

この記事で身につく内容
  • Flexboxとは
  • Flexコンテナ（親要素）に指定するプロパティ
  • Flexアイテム（小要素）に指定するプロパティ
  • Flexboxの実用例
  • Flexboxのサポート状況
  • Flexboxを学べるおすすめサービス

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

Flexboxとは

Flexboxとは、「要素の配置」を短いコードで、かつ柔軟に行うことを可能にしたレイアウトモジュールです。「要素の配置」とは例えば、以下のような実装です。

  • 「リストや画像を横並びにしたい」
  • 「要素間の余白を均等にして、はみ出たら折り返したい」
  • 「表示する順番を逆からにしたい」
  • 「画像とテキストを左右交互に配置したい」

上記のようなケースでも、簡単なコードで指定できるのが「Flexbox」です。Flexboxを用いることで、レイアウト作成の作業効率を飛躍的に向上させることができます。

 

Flexboxの性質

Flexアイテムは以下のような性質を持ちます。

  • 横並びで表示される
  • 親要素に合わせて横幅・高さが伸縮する
  • HTMLの記述が表示順に影響しない

これらの性質を、CSSの記述によって柔軟に変更できることがFlexboxの特徴です。

Flexboxの性質を活かせば、コードの記述量を減らしたり、レスポンシブレイアウトの作成を効率よく行ったりすることができます。Flexboxは、CSSでのレイアウト作成に欠かせない知識です。

 

Flexboxの使い方

flexboxを使用するには、親要素にdisplay: flex;を指定します。こうすることで、子要素が横並びになります。

<ul class="flexbox">
 <li class="flex-item">要素１</li>
 <li class="flex-item">要素２</li>
 <li class="flex-item">要素３</li>
</ul>
.flex-item {
 list-style: none;
 background: #ffbb1e;
 color: #fff;
 padding: 10px;
 margin: 10px;
}

flexboxのサンプル画像

このとき親要素のことをflexコンテナ、子要素のことをflexアイテムといいます。

flexコンテナとflexアイテムの解説画像

Flexboxの見本

Flexboxは、ZeroPlusのサービスサイトでもたくさん使用されています。実際に見てみましょう。

flexboxが実際に使われているページの画像

画像の色枠部分に注目してください。

  • 複数の要素が横並びになっている
  • 横並びになっている要素の両端が揃っている
  • 親要素からはみ出た要素がきれいに折り返されている

これら全てが、Flexbox のプロパティで指定できるものです。

Flexboxに関するプロパティには2つの種類があります。

  • Flexコンテナに指定するプロパティ
  • Flexアイテムに指定するプロパティ

それぞれ確認していきましょう。

flexコンテナ（親要素）に指定するプロパティ

flexコンテナに指定するプロパティは以下のとおりです。

flexコンテナに指定するプロパティ
  • flex-direction：flexアイテムの並び方を指定する
  • flex-wrap：flexアイテムの折り返しを指定する
  • flex-flow：flexアイテムの並び方と折り返しを指定する
  • justify-content： flexアイテムの横の配置を指定する
  • align-items：flexアイテムの高さを揃える
  • align-content：flexアイテムの縦の配置を指定する

「flex-direction」flexアイテムの並び方（横並び・縦並び）

flex-directionの解説画像

flex-directionは、flexアイテムの並び方を指定するプロパティです。値とそれぞれの効果は以下のとおりです。

  • row（初期値）：横並び、左寄せで配置
  • row-reverse：横並び、右寄せで配置
  • column：縦並び、上寄せで配置
  • column-reverse：縦並び、下寄せで配置

実際の出力結果を確認してみましょう。

See the Pen flex-direction by ZeroPlus (@zeroplus-programming) on CodePen.

flex-directionのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

 

「flex-wrap」flexアイテムの折り返し

flex-wrapの解説画像

flex-wrapはflexアイテムの折り返しを指定するプロパティです。

flex-wrapの値とそれぞれの効果は以下の通りです。

  • wrap：親要素からはみ出た部分を折り返す
  • nowrap：折り返さない
  • wrap-reverse：逆順で折り返す

実際の出力結果を確認してみましょう。

See the Pen flex-wrap by ZeroPlus (@zeroplus-programming) on CodePen.

flex-wrapのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】flexアイテムの折り返し！flex-wrapの使い方を解説

 

「flex-flow」flexアイテムが並ぶ向きと折り返し

flex-flowはflexアイテムの並び方と折り返しを指定するプロパティです。

flex-flowに指定できる値はflex-directionとflex-wrapで指定できる値と同じものです。

flex-flow: flex-directionの値 flex-wrapの値;と、それぞれの値を並べてショートハンドで指定します。指定できる値とそれぞれの効果は以下の通りです。

flex-flowの値
flex-directionの値flex-wrapの値
row（基準値）左寄せで左から順に配置wrap親要素からはみ出た部分を折り返す
row-reverse右寄せで右から順に配置nowrap折り返さない
column上寄せで上から順に配置（縦並び）wrap-reverse逆順で折り返す
column-reverse下寄せで下から順に配置

See the Pen flex-flow by ZeroPlus (@zeroplus-programming) on CodePen.

flex-flowのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】flexアイテムの折り返しと方向を同時に指定！flex-flowの使い方とレイアウトサンプル

 

「justify-content」flexアイテム同士の水平方向の間隔

justify-contentの解説画像

justify-contentはflexアイテムの横方向の配置を指定するプロパティです。

justify-contentの値とそれぞれの効果は以下の通りです。

  • flex-start：左寄せ
  • flex-end：右寄せ
  • center：中央寄せ
  • space-between：両端揃え
  • space-around：それぞれの両端に均等な余白をつけて配置
  • space-evenry：両端を含めたすべての余白を均等に配置

実際の出力結果を確認してみましょう。

See the Pen justify-contenrt by ZeroPlus (@zeroplus-programming) on CodePen.

justify-contentのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】justify-contentの使い方や効かない原因を解説

 

「align-items」flexアイテムの位置の指定

align-items解説画像

align-itemsはflexアイテムの高さを揃えるプロパティです。

align-itemsの値とそれぞれの効果は以下の通りです。

  • stretch/normal（初期値）：親要素の高さに合わせて子要素を伸縮する
  • flex-start：親要素の上端で揃える
  • flex-end：親要素の下端で揃える
  • center：親要素の中央で揃える
  • baseline：子要素をベースラインで揃える

実際の出力結果を確認してみましょう。

See the Pen align-items by ZeroPlus (@zeroplus-programming) on CodePen.

align-itemsのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】align-itemsの使い方を解説！flexアイテムの高さを揃える方法

 

「align-content」flexアイテムの垂直方向の間隔

align-content解説画像

align-contentはflexアイテムの縦方向の配置を指定するプロパティです。

align-contentの値とそれぞれの効果は以下の通りです。

  • flex-start：上寄せ
  • flex-end：下寄せ
  • center：中央寄せ
  • space-between：上下の両端揃え
  • space-around：上下の両端に均等な余白をつけて配置
  • apace-evenry：上下の両端を含めたすべての余白を均等に配置

実際の出力結果を確認してみましょう。

See the Pen align-content by ZeroPlus (@zeroplus-programming) on CodePen.

align-contentのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】align-contentの使い方！flexアイテムの配置や余白を指定する方法

ZeroPlusgate50教材の動画

 

flexアイテムに指定するプロパティ

flexアイテムに指定するプロパティは以下のとおりです。

flexアイテムに指定するプロパティ
  • order：flexアイテムの表示順を指定する
  • flex-grow：flexアイテムの伸び率を指定する
  • flex-shrink：flexアイテムの縮み率を指定する
  • flex-basis：flexアイテムの基準の大きさを指定する
  • flex：flexアイテムの基準の大きさと伸縮率を指定する
  • align-self：flexアイテムの縦の配置を個別に指定する
  • gap：flexアイテム同士の余白を指定する

「order」flexアイテムを個別に指定

order解説画像

orderはflexアイテムの表示順を指定するプロパティです。

orderには数値を指定します。初期値は0で、マイナスの値も指定可能です。

すべてのflexアイテムにorderを指定した場合

要素の表示順はorderの数値が小さいものからとなります。

一部のflexアイテムにorderを指定した場合

要素の表示順は以下のとおりです。

  1. orderの値がマイナスのflexアイテム
  2. orderの指定がない（orderの値が0の）flexアイテム
  3. orderの値がプラスのflexアイテム

See the Pen order by ZeroPlus (@zeroplus-programming) on CodePen.

orderのより詳しい使い方はこちらの記事で解説しています。

アイキャッチ画像
【CSS】orderでflexアイテムを並び替える方法を解説

 

「flex-grow」flexアイテムの伸び率

flex-grow解説画像

flex-growはflexアイテムの伸び率を指定するプロパティです。flex-growには数値を指定します。

.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}
.item3 {
  flex-grow: 3;
}

プロパティ値は数値を指定しますが、マイナスの値は指定できません。

実際の出力結果を見てみましょう。

See the Pen flex-grow by ZeroPlus (@zeroplus-programming) on CodePen.

flex-growのより詳しい使い方は以下の記事で解説しています。

アイキャッチ画像
【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説

 

「flex-shrink」flexアイテムの縮み率

flex-shrink解説画像

flex-shrinkは親要素にスペースの余りがない場合に、指定の子要素の収縮率を指定します。

.item1 {
  flex-shrink: 2;
}
.item2 {
  flex-shrink: 3;
}
.item3 {
  flex-shrink: 4;
}

プロパティ値は数値を指定しますが、マイナスの値は指定できません。初期値は1です。

flex-shrinkのより詳しい使い方はこちらの記事で解説しています。

アイキャッチ画像
【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

 

「flex-basis」flexアイテムの基準の大きさ

flex-basis解説画像

flex-basisはflexアイテムの基準の大きさを指定します。以下の値を指定します。

  • auto（初期値）：flexアイテムの横幅を自動的に広げる
  • 数値 + 単位 ：flexアイテムの横幅を、数値とpxやrem、emなどの単位で指定する
  • 数値 + % ：flexアイテムの横幅を%比率で指定する
初期値はautoで、単位はピクセルや％を使って指定します。

flex-basisとwidthは基本的に同じですが、併用した場合にはflex-basisが優先されます。またflex-directionによってflexアイテムが縦並びになっているとき、flex-basisはheightの値をとります。

.item1{
  flex-basis: auto;
}
.item2{
  flex-basis: 30px;
}
.item3{
  flex-basis: 50%;
}

flex-basisのより詳しい使い方はこちらの記事で解説しています。

アイキャッチ画像
【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

 

「flex」ショートハンド

flexはflexアイテムの基準の大きさと伸縮率を指定するプロパティです。
flex-grow、flex-shrink、flex-basisをショートハンドで指定できます。
flexプロパティの効果は、記述する値の数や単位の有無によって変化します。

flexに記述する値の数・単位の有無による違い
値が1つのとき単位なしの場合flex-growの値をとる
単位ありの場合flex-basisの値をとる
値が2つのとき
（単位をつけるのは2つ目の値）		単位なしの場合flex-grow、flex-shrinkの値をとる
単位ありの場合flex-grow、flex-basisの値をとる
値が3つのとき3つ目の値に単位をつけるflex-grow、flex-shrink、flex-basisの値をとる

また特定の数値のときのみ、以下の指定も可能です。

initialflex: 0 1 auto;を示す
autoflex: 1 1 auto;を示す
noneflex: 0 0 auto;を示す

 

「align-self」flexアイテムの配置の指定

align-self解説画像

align-selfはflexアイテム個々の縦の配置を指定するプロパティです。

align-selfの値とそれぞれの効果は以下のとおりです。

  • auto（初期値）：親要素のalign-itemsの値に合わせて子要素を配置する
  • flex-start：親要素の上端で揃える
  • flex-end：親要素の下端で揃える
  • center：親要素の中央で揃える
  • baseline：子要素をベースラインで揃える
  • stretch：親要素に合わせて子要素を伸縮する

実際の出力結果を確認してみましょう。

See the Pen align-self by ZeroPlus (@zeroplus-programming) on CodePen.

 

「gap」flexアイテムの余白

gap解説画像gapはFlexアイテム同士の余白を指定するプロパティです。gapにはrow-gapとcolumn-gapという2つの種類があり、それぞれ縦方向と横方向に並んでいる子要素同士の余白が指定できます。

.flexbox {
  row-gap: 40px;
  column-gap: 40px;
}

row-gapとcolumn-gapの使い分けは以下のようになっています。

  • row-gap：縦方向の余白
  • column-gap：横方向の余白

一括指定をするときは、次のようにショートハンドで指定します。

/* row-gapとcolumn-gapを異なる値で指定するとき */
.flexbox {
  gap: 32px 80px;
}

/* row-gapとcolumn-gapを同じ値で指定するとき */
.flexbox {
  gap: 80px;
}

gapの指定方法の解説画像

 

関連記事

flexbox以外に、grid というレイアウトモードがあります。gridはflexboxよりも難易度が高いですが、flexboxでは実装できないレイアウトを作成できることが特徴です。

grid については、こちらの記事で詳しく解説しております。「もっとレイアウト作成を効率よくしたい！」という方にピッタリの内容ですので、ぜひ学習にお役立てください。

アイキャッチ画像
CSS Gridの使い方を丁寧に解説！爆速でレイアウトを完結させよう！

ZeroPlusgate50教材の動画

 

Flexboxの応用

flexアイテムが並ぶ方向の指定や均等な配置、折り返しなどは基礎的な技術です。Flexboxを応用できれば、さらにレイアウトの幅が広がります。

この項目では、Flexboxの応用で特によく使われるレイアウトの作り方を解説します。

よく使われるレイアウトの例
  • 上下の中央寄せ
  • カード型レイアウト
  • 見出しデザイン
  • 画像とテキストを交互に配置

 

上下左右中央寄せ

上下左右の中央寄せは、justify-content: center;とalign-items: center;を同時に指定することで可能です。

<ul class="flexbox">
  <li class="flex-item">要素１</li>
  <li class="flex-item">要素２</li>
  <li class="flex-item">要素３</li>
</ul>
.flexbox {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.flex-item {
  list-style: none;
  background: #ffbb1e;
  color: #fff;
  border: 1px solid #000;
  padding: 50px;
  margin: 0 20px;
}

flex　上下左右中央揃えの画像

また、display: flex;は横並びのときだけでなく、ひとつの要素に対してのみ使う場合もあります。例えば、背景画像の中央にテキストを表示する場合です。

<div class="bg">
  <p class="bg-copy">ZeroPlus Media</p>
</div>
.bg{
  height: 100vh;
  background: url(../img/草原の写真.jpg) center 0 / cover;
  display: flex;
}

.bg-copy{
  font-size: 70px;
  font-weight: bold;
  color: #ffbb1e;
  margin: auto;
}

画像上のテキストを上下左右中央揃え

親要素にdisplay: flex;が指定されていると、子要素にmargin: auto;を適用できるようになります。この性質を利用して、テキストを画像の中央に配置できます。

 

カード型レイアウト

記事のカードリンクに使われることが多い実装です。画像、テキスト、ボタンで作られたカードを横並びにしています。

<ul class="flexbox">
  <li class="flex-item">
    <a href="#">
      <img src="img/草原の写真.jpg" alt="">
      <div class="flex-content">
        <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <div class="flex-btn">続きを読む</div>
      </div>
    </a>
  </li>
  <li class="flex-item">
    <a href="#">
      <img src="img/草原の写真.jpg" alt="">
      <div class="flex-content">
        <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <div class="flex-btn">続きを読む</div>
      </div>
    </a>
  </li>

  <li class="flex-item">
    <a href="#">
      <img src="img/草原の写真.jpg" alt="">
      <div class="flex-content">
        <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <div class="flex-btn">続きを読む</div>
      </div>
    </a>
  </li>
</ul>
.flexbox {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.flex-content {
  padding: 20px;
}

.flex-item {
  width: 25%;
  list-style: none;
  background: rgba(180, 179, 179, 0.204);
  margin: 0 50px;
  text-align: center;
}

.flex-text {
  text-align: left;
  padding-bottom: 40px;
}

.flex-btn {
  color: #fff;
  background: #ffbb1e;
  padding: 5px;
  margin: 0 30%;
  border-radius: 5px;
}

カード型レイアウトの見本

 

画像とテキストを交互に配置する

画像とテキストを左右交互に配置するレイアウトもよく見るレイアウトです。:nth-childの偶数・奇数の指定を使用します。

 <div class="flexbox">
   <img class="flex-img" src="img/草原の写真.jpg" alt="" class="flex-img">
   <div class="flex-item">
     <h2 class="flex-title">タイトル</h2>
     <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
   </div>
 </div>

 <div class="flexbox">
   <img class="flex-img" src="img/草原の写真.jpg" alt="" class="flex-img">
   <div class="flex-item">
     <h2 class="flex-title">タイトル</h2>
     <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
   </div>
 </div>

.flexbox {
 display: flex;
 justify-content: center;
}

.flexbox:nth-child(even) {
 flex-direction: row-reverse;
}

.flex-img {
 width: 43%;
 padding: 20px;
}

.flex-title {
 font-size: 24px;
 font-weight: bold;
 padding-bottom: 30px;
}

.flex-item {
 width: 43%;
 justify-content: flex-start;
 padding: 20px;
}

.flex-text {
 line-height: 1.8rem;
}

画像とテキストを左右交互に配置するレイアウトの見本

この実装で使っている:nth-childのような指定は擬似クラスといい、通常よりも高度なスタイルを実装できます。

:nth-childの使い方についてはこちらの記事で詳しく解説しておりますので、併せてお読みください。

アイキャッチ画像
CSSのnth-childとnth-of-typeの使い方と違いを解説

 

Flexboxの注意点

Flexboxを使用する際の注意点について解説します。

親要素にdisplay: flex;を指定する

flexboxを使用するときは、必ず親要素にdisplay: flex;を指定してください。flexboxを使用するときによくあるミスが以下のようなものです。

  • 子要素自体にdisplay: flex;が指定されている
  • 横並びにしたい要素がflexコンテナの直下に配置されていない
  • 横並びにしたくない要素がflexコンテナの直下に入っている

 

text-align, vertical-alignは効かない

flexアイテムにtext-alignやvertical-alignなどの位置を指定するプロパティは適用されません。そのため、中央寄せや右寄せが効かないという悩みの原因にもなっています。

flexアイテムの位置を調整するには、この記事でも解説しているjustify-contentやalign-itemsを使用してください。

 

flexboxのサポート状況

Can I Useによると、2022年9月現在、最新バージョンでは全てのブラウザがFlexboxに対応しています。

flexboxブラウザ対応状況

flexのサポート状況 -Can I Use

 

Flexbox Froggy

手を動かしてFlexboxを実践的に理解したい人には、「Flexbox Froggy」がおすすめです。

このサイトはflexに関連するCSSを書くことで、カエルたちを助けてあげようというミニゲームの中でCSSを学習していきます。ゲーム感覚で、直感的に楽しく学習に取り組めることが特徴です。

Flexbox Froggyはこちら

 

ZeroPlus Gate

「どうしてもFlexboxがわからない！」「全然学習が進まない！」という人には、ZeroPlus Gateがおすすめです。

ZeroPlus Gateでは、豊富でわかりやすい動画教材を使って、Flexboxを含むWeb制作全般の基礎知識を完全無料で学んでいくことができます。さらに全４回のメンターとの面談と、無制限の質問対応つきです。わからない部分や学習上の悩みは、プロのエンジニアと専属のメンターに何度でも質問・相談することができます。

受講料は一切かかりません。どうしてもFlexboxがわからない方、学習に不安のある方にはぴったりの学習サービスです。

ZeroPlus Gateはこちら

 

まとめ

flexboxを活用することで、レイアウト作成を効率よく行えます。flexboxプロパティの種類は数多く、すべてを使いこなすのは大変かもしれません。しかしflexboxを上手に扱えるようになれば、あなたのコーディングスキルは飛躍的に向上します。

Web制作のレイアウト作りをスムーズに行えるよう、一緒にがんばりましょう！

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて
ZeroPlus Gateについて

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから