この記事では、positionプロパティの使い方を紹介します。
positionプロパティは、要素の位置を指定するプロパティです。positionプロパティを自由に使えるようになると、おしゃれなサイトや見やすいサイトを作れるようになります。
positionプロパティには、static, relative, absolute, fixed, stickyの5つの値があります。それぞれ特徴や用途の違いがありますので、違いを理解して使いこなしてみてください。
また、各セクションでpositionプロパティの各値についての詳しい解説記事を紹介しています。合わせてご一読ください。
positionプロパティの基礎知識
positionプロパティの使い方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
- positionプロパティとは
- position プロパティはtop, bottom, left, rightとセットで使う
- position プロパティの取れる値と使い方
- z-indexで重なり順を操作できる
- position が効かないときの対処法
- z-indexが負けている
- top, bottom, left, rightなど位置を指定していない
- top, left, bottom, rightなど位置の指定を間違えている
- 親要素にposition: relative; を適用していない（relativeとabsoluteの場合）
- 親要素にoverflow: hidden; を適用している（relativeとabsoluteの場合）
- 親要素に高さやpaddingを指定していない（relativeとabsoluteの場合）
- 先祖要素、親要素にtransformが設定されている（fixedの場合）
- fixedを適用している要素に、heightを%で適用している（fixedの場合）
- topを指定していない（stickyの場合）
- 親要素に高さがない（stickyの場合）
- 親要素にoverflow: hidden;が適用されている（stickyの場合）
- まとめ
positionプロパティとは
positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです。
- 要素を自由に配置したい
- 要素の重なり順を変えたい
- ヘッダーを固定して表示したい
など、Web制作におけるちょっとした要素の配置を楽に行うことができます。
position プロパティはtop, bottom, left, rightとセットで使う
position プロパティは基本的に、top, bottom, left, right のプロパティで位置を指定して使います。
- top：基準の上からの位置
- bottom：基準の下からの位置
- left：基準の左からの位置
- right：基準の右からの位置
4つ全てを使わずに適用することはできますが、位置を確定するために、最低でも2つは適用するようにしましょう。
positionプロパティの使い方の手順
- 要素にpositionプロパティ（relative, absolute, sticky, fixed）を指定する
- top, bottom, left, rightを使って、 その要素を配置したい位置を指定する
例えば、top: 0; とleft: 0; を適用した場合、その要素は基準の左上に配置されます。
top: 20px; とleft: 20px; を適用した場合は、その要素は基準の上から20px、基準の左から20pxの位置に配置されます。
なお、leftとright、topとbottomを同時に指定することはほとんどありません。
position プロパティの取れる値と使い方
次に、potitionプロパティで指定される値について、それぞれ紹介します。
positionプロパティの値は、次の５つです。
- static：位置も重なりも指定できない、positionプロパティの初期値
- relative：相対位置を指定する
- absolute：要素の絶対位置を指定する
- fixed：要素を固定し追従する
- sticky：スクロールで動き、要素を固定する
static（初期値）
staticは初期値です。要素に対しpositionプロパティを何も指定されていない場合はstaticの状態になります。
特徴
- 位置を動かすことはできない
- 距離指定プロパティで位置を調整できない
- z-indexで重なり順を指定できない
staticの基本的な使い方を紹介します。
基本書式
セレクタ {
position: static;
}position: static; は初期値なので、値を入力しなくても適用されます。staticは、他のpositionプロパティの値（fixed, relative, absolute, sticky）と違って位置を指定できません。staticを使用するのは、レスポンシブ対応などでpositionプロパティを解除する場面です。
posision: static; でpositionプロパティを解除する例
boxクラス要素に適用したposition: absolute; の指定を、スマホ表示の場合のみstaticで解除しています。
<div class="parent">
<div class="box"></div>
</div>.parent {
position: relative; /* 子要素のabsoluteに対して、親要素にrelative指定 */
width: 250px;
height: 250px;
background: lightblue;
}
.box {
position: absolute; /* 要素の絶対配置 */
top: 40px; /* 親要素を基準に上から40pxの位置 */
left: 40px; /* 親要素を基準に左から40pxの位置 */
width: 100px;
height: 100px;
background: orange;
}
@media screen and (max-width: 768px) {
.box {
position: static; /* positionプロパティを解除 */
}
}出力結果
See the Pen staticレスポンシブ by ZeroPlus (@zeroplus-programming) on CodePen.
relative と absolute
position のrelative は、現在の位置を基準に、相対的な位置を決めます。後述するabsoluteとセットで使用されることが多いです。
親要素にrelativeを指定して基準にし、子要素にabsoluteを指定することで、子要素を移動します。
特徴
- 距離指定のプロパティを設定しなければ、staticと同様の表示位置になる
- 距離指定のプロパティを設定すれば、位置調整が可能
- 「現在の位置」が基準。要素自身を動かしたとしても、基準の場所には要素分の高さが残る
- 単体で指定して位置を動かす使い方はあまりせず、absoluteとセットで使用することが多い
- z-indexで重なり順を指定することができる
基本書式
セレクタ {
position: relative;
}例えば次のようなHTMLとCSSがあります。こちらは比較用のため、positionは適用していません。
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
}出力結果
See the Pen position-relative前 by ZeroPlus (@zeroplus-programming) on CodePen.
現状ではboxクラスにpositionを適用していないので、画面左上に要素が配置されています。
こちらのboxクラスにposition: relative; とtop, leftを適用すると、次のようになります。
.box {
width: 200px;
height: 200px;
background: orange;
position: relative; /*追記*/
top: 50px; /*追記*/
left: 50px; /*追記*/
}出力結果
See the Pen position-relative後 by ZeroPlus (@zeroplus-programming) on CodePen.
position: relative; と、top, left の指定によって、要素が元いた位置から下に50px、左に50pxの位置に配置されます。
このようにposition: relative; は、相対位置を基準に位置が決定されます。ここでいう相対位置とは、「本来その要素が表示される位置」が基準となっています。
次の画像のようなイメージです。
position のabsoluteは、親要素（relativeまたはfixedを指定した要素）を基準に絶対的な位置を決めます。absoluteを指定した要素は、親要素を基準に、距離指定のプロパティで指定した位置に配置されます。
特徴
- absoluteに指定された要素は、もともと配置されていた場所からはその要素の高さが無くなる
（浮いたような状態になる） - relativeとセットで使用する
- 親要素を基準とし、要素を移動させることができる
- z-indexで重なり順を指定できる
基本書式
セレクタ {
position: absolute;
top: 値;
right: 値;
bottom: 値;
left: 値;
}例えば次のようなHTMLとCSSがあります。こちらは比較用のため、positionは適用していません。
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
}出力結果
See the Pen position前 by ZeroPlus (@zeroplus-programming) on CodePen.
現状では、positionプロパティを適用してないので、要素は画面左上に出力されています。boxクラスの要素にposition: absolute; を適用すると、次のようになります。
.box {
width: 200px;
height: 200px;
background: orange;
position: absolute; /*追記*/
top: 50px; /*追記*/
left: 50px; /*追記*/
}出力結果
See the Pen absoluteのみ by ZeroPlus (@zeroplus-programming) on CodePen.
position: absolute; と、top, left の2つのプロパティを同時に適用します。top, left の2つのプロパティによって、要素は画面上から50px、l画面左から50pxの位置に配置されます。
このように、position: absolute; は要素の絶対位置を指定することができます。
通常、position: absolute; を使用する場合は、その親要素にposition: relative; を適用して、セットで使用します。relativeを親要素に適用することで、その親要素がabsoluteで動かす要素の基準になります。
position: absolute; 単体で使用する場合は、起点がページ全体の左上になります。
positionのrelativeとabsolute については、下記の記事で詳しく解説しています。
fixed
fixedは画面の決まった位置に要素を固定します。
Webサイトをスクロールしても、fixedを適用した要素はスクロールに追従し、常に画面上の決まった位置に固定されます。
指定方法・特徴はabsouteとほぼ同じと考えてOKです。基準がページ全体になることに注意しましょう。画面左上からどれだけの距離に配置するか考えるとイメージがしやすいかと思います。
特徴
- fixedが指定された要素は、もともと配置されていた場所からはその要素の高さが無くなる
- 画面の左上をを基準とし、要素の移動ができる
- z-indexで重なり順を指定することができる
fixedの基本的な使い方を紹介します。
例えば次のようなHTMLとCSSを見てみましょう。こちらは比較用のため、positionは適用していません。
<div class="fixed"></div>
<p>テキストが入ります。</p>p {
font-size: 16px;
font-weight: bold;
}
.fixed {
width: 100%;
height: 80px;
background: orange;
}出力結果
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
現状ではfixedクラスにpositionを適用していないので、pタグの上にfixedクラス要素が配置されています。こちらのfixedクラスにposition: fixed; を適用すると、次のようになります。
.fixed {
width: 100%;
height: 80px;
background: orange;
position: fixed; /* 追記 */
top: 0; /* 追記 */
left: 0; /* 追記 */
}出力結果
See the Pen position-fixed-基本 by ZeroPlus (@zeroplus-programming) on CodePen.
position: fixed; によってfixedクラス要素が固定されました。pタグのテキストは、fixedクラス要素の裏側に回り込んで隠れて見えなくなっています。
position: fixed; については、下記の記事で詳しく解説しています。
sticky
stickyは、日本語訳で「粘着する」という意味があります。
その名の通り、スクロールした際に要素を粘着させ、固定表示することができます。stickyと同様にfixedも要素を追従させますが、それぞれ若干仕様が異なります。
要素の固定位置
- fixed：ウィンドウの左上（起点となる位置）を基準にした絶対位置に配置
- sticky：親要素内で固定
要素の高さ
- fixed：要素の高さがなくなる（要素が浮いたような状態になる）
- sticky：要素の高さは有する
position: fixed; が適用された要素は、要素が浮いたような状態になります。その要素が浮いたような状態になるので、直下にある要素がその分だけ上に詰まって配置されます。
stickyは親要素を用意することで、追従する範囲を指定して使用します。
特徴
- 追従する範囲を指定できる
- 追従が開始されるとfixedのように要素が固定される
基本書式
セレクタ {
position: sticky;
top: 0;
}stickyの場合、最低限topを指定するようにしましょう。topを指定しないと、stickyがうまく動作しません。
position: sticky; を適用した要素は、スティッキーアイテムといいます。position: sticky; が適用された要素の「親要素」は、スティッキーコンテナといいます。
次の画像のようなイメージです。
要素にposition: sticky;を適用すると、自動的にその親要素がスティッキーコンテナとなります。用語として覚えておきましょう。スティッキーコンテナの中に、position: sticky; が適用された要素（スティッキーアイテム）が複数ある場合の動きを見てみます。
<div class="box">
<div class="min-box">sticky1</div>
<div class="min-box2">sticky2</div>
</div>.box {
width: 400px;
height: 1000px;
border: 1px solid orange;
margin-bottom: 500px;
margin-top: 50px;
}
.min-box {
width: 100px;
position: sticky;
top: 50px;
height: 100px;
background: orange;
left: 50px;
}
.min-box2 {
width: 100px;
position: sticky;
top: 50px;
height: 100px;
background: red;
left: 50px;
}出力結果
position: sticky;については、下記の記事で詳しく解説しています。
z-indexで重なり順を操作できる
position プロパティはz-indexで要素の重なり順を指定することができます。z-indexは数字が大きいほど前に表示されます。
z-indexは、staticを除くposition プロパティを適用していないと有効になりません。z-indexプロパティを適用していない場合、初期値であるz-index: auto; が適用されます。
positionプロパティを適用した要素に、z-indexを適用しない場合を見てみましょう。
<div class="relative">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>.relative {
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background: orange;
top: 10px;
left: 10px;
}
.box2 {
background: red;
top: 40px;
left: 40px;
}
.box3 {
background: blue;
top: 80px;
left: 80px;
}出力結果
See the Pen position-z-index by ZeroPlus (@zeroplus-programming) on CodePen.
z-indexを適用していない場合、下にくる要素が直前の要素の上に配置されます。上記コードの場合、box2クラス要素の後にbox3クラス要素があるので、box3クラス要素がbox2クラス要素よりも前に配置されます。
box1要素にz-index: 1; を適用すると、他のbox要素よりも前に表示されるようになります。
.relative {
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background: orange;
top: 10px;
left: 10px;
z-index: 1; /* 追記 */
}
.box2 {
background: red;
top: 40px;
left: 40px;
}
.box3 {
background: blue;
top: 80px;
left: 80px;
}出力結果
See the Pen position-z-index2 by ZeroPlus (@zeroplus-programming) on CodePen.
position が効かないときの対処法
positionプロパティが効かない場合、下記の理由が考えられます。
position プロパティ共通
- z-indexが負けている
- top, bottom, left, rightなどで位置を指定していない
- top, left, bottom, rightなどで位置の指定を間違えている
relativeとabsoluteを指定している場合
- 親要素に
position: relative;を適用していない - 親要素に
overflow: hidden;を適用している - 要素に高さやpaddingを指定していない
fixedを指定している場合
- 先祖要素、親要素にtransformが設定されている
- fixedを適用している要素に、heightを%で適用している
stickyを指定している場合
- topを指定していない
- 親要素に高さがない
- 親要素に
overflow: hidden;を指定している
z-indexが負けている
positionプロパティはz-indexで重なり順を指定することができます。z-indexは数字が大きいほど前に表示されます。他のpositionプロパティで適用しているz-indexと数字で負けていないか確認してみてください。
0以下の数字（マイナスの数字）を適用している場合にも、前に表示されないことがあります。
z-indexの数字が負けている場合は、値を調整してみましょう。
top, bottom, left, rightなど位置を指定していない
position プロパティとセットで使うtop, bottom, left, rightなどの位置を指定していない場合は、positionプロパティがうまく効かないことがあります。
要素を現在の場所から移動させない場合であっても、top: 0; left: 0; など、最低でも2つは位置を指定しましょう。
top, left, bottom, rightなど位置の指定を間違えている
位置の指定を間違えて、画面外に要素が配置される場合があります。
その場合は、例えばtop: 0; 、left: 0; などを適用して要素の位置を確認してみてください。要素の位置を確認できたら、検証ツールを使って位置を動かしていきましょう。
親要素にposition: relative; を適用していない（relativeとabsoluteの場合）
positionのabsoluteは、親要素や先祖要素にrelativeを適用していない場合、top, leftなどの位置を指定していても基準位置がページ全体となります。
配置したい要素（absoluteを適用した要素）の親要素に対してposition: relative; を適用し、子要素の基準位置を親要素に確定させてあげましょう。
親要素にposition: relative; とoverflow: hidden; をいっしょに適用している場合、その子要素が親要素の範囲外に配置されていると、overflow: hidden;によって子要素が非表示になってしまいます。
<div class="parent-hidden">parent-hidden
<div class="box">box</div>
</div>.parent-hidden {
position: relative;
width: 200px;
height: 200px;
background: lightgreen;
overflow: hidden;
}
.box {
width: 50px;
height: 50px;
padding: 25px;
background: orange;
position: absolute;
top: 0;
left: 150px;
}出力結果
See the Pen positionとoverflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.
この場合、overflow: hidden;を外すか、overflow: hidden;を適用した要素の外側の要素に、relativeとabsoluteをセットで適用してあげましょう。
<div class="parent-hidden"></div>
<!-- overflow: hidden;を適用した要素の外側に要素を移動する -->
<div class="parent">
<div class="box"></div>
</div>.parent-hidden {
width: 200px;
height: 200px;
background: lightgreen;
overflow: hidden;
}
.parent {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.box {
width: 50px;
height: 50px;
padding: 25px;
background: orange;
position: absolute;
top: 0;
left: 150px;
}出力結果
See the Pen positionとoverflow: hidden;2 by ZeroPlus (@zeroplus-programming) on CodePen.
次の画像のようなイメージです。
親要素に高さやpaddingを指定していない（relativeとabsoluteの場合）
relativeを適用した要素に高さやpaddingを適用していない状態で、配置したい要素にabsoluteを適用すると、親要素は高さがなくなります。
例えば下記のような場合です。
<div class="parent-wrap">
<div class="parent">
<div class="box"></div>
</div>
</div>.parent-wrap {
padding: 20px;
background: lightgreen;
}
.parent {
width: 150px;
background: skyblue;
}
.box {
width: 100px;
height: 100px;
background: orange;
}出力結果
See the Pen 親要素と高さ by ZeroPlus (@zeroplus-programming) on CodePen.
parentクラス要素はheightを適用しておらず、子要素のboxクラス要素によって高さを保持している状態です。ここでparentクラス要素にposition: relative;、boxクラス要素にposition: absolute;を適用すると次のようになります。
.parent-wrap {
padding: 20px;
background: lightgreen;
}
.parent {
width: 150px;
background: skyblue;
position: relative;
}
.box {
width: 100px;
height: 100px;
background: orange;
position: absolute;
}出力結果
See the Pen 親要素と高さ2 by ZeroPlus (@zeroplus-programming) on CodePen.
boxクラス要素にabsoluteを適用したことによって、boxクラス要素は浮いたような状態になり、parentクラス要素は高さがなくなりました。parentクラス要素の高さは、boxクラス要素の高さによって維持されていたのです。
parent-wrapクラス要素は、自身にpaddingを適用しているため、padding分の高さを保持しています。
親要素にはheightやpaddingを適用して親要素の高さを保持してあげましょう。
先祖要素、親要素にtransformが設定されている（fixedの場合）
position: fixed; を適用している要素の親要素・先祖要素にtransformを適用していると、fixedが効かなくなります。
<div class="container">
<header class="header"></header>
<main>
<div class="contents">
</div>
</main>
<footer></footer>
</div>.container {
transform: translate(0 ,0); /* fixedが効かなくなる */
}
.header {
width: 100%;
height: 120px;
background: orange;
position: fixed;
top: 0;
left: 0;
}
.contents {
height: 2000px;
width: 100%;
background: rgb(255,201,114);
background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}出力結果
See the Pen fixed-transform by ZeroPlus (@zeroplus-programming) on CodePen.
transform以外にもperspective、filterのプロパティが指定されていても同様の事象が発生します。
対処法としては親要素や先祖要素にtransformやperspective、filterプロパティを使わない方法で実装することです。
親要素のtransformプロパティを外せない場合は、fixedを適用した要素を、その親要素の外側に配置してあげましょう。例えば上記のコードであれば、下記のように書き換えます。
<header class="header"></header> <!-- transformプロパティが適用されたcontainer要素の外に出す -->
<div class="container"> <!-- transformプロパティが設定されている -->
<main>
<div class="contents"> </div>
</main>
<footer></footer>
/div>ヘッダーの親要素containerのtransformプロパティが外せない場合、container要素の外側にヘッダーを配置させます。この配置なら、fixedの追従が効くようになります。
fixedを適用している要素に、heightを%で適用している（fixedの場合）
position: fixed;を適用した要素にheightを%指定している場合は、その要素の高さが画面全体の高さになってしまいます。fixedが指定された要素は、基準位置が画面全体になるので、要素の高さが画面全体の高さに合わせて大きくなります。
<header class="header"></header>
<main>
<div class="contents">
</div>
</main>
<footer></footer>.header {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
height: 100%; /* 高さを%指定している */
background: orange;
position: fixed;
top: 0;
left: 0;
}
.contents {
height: 2000px;
width: 100%;
background: rgb(255,201,114);
background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}出力結果
See the Pen fixed-height by ZeroPlus (@zeroplus-programming) on CodePen.
この場合は、heightの高さを%ではなくpx単位で指定するようにしましょう。
topを指定していない（stickyの場合）
position: sticky; はtopを適用しないとうまく動作しません。topやleftは要素の位置を指定しますが、left, right, bottomを指定しない場合であっても、最低でもtop: 0; は指定しましょう。
親要素に高さがない（stickyの場合）
position: sticky; がうまく動作しない原因で最も多いのが、「親要素に高さがない」、という場合です。stickyを指定した要素にtop: 0; が適用されていたとしても、その親要素に高さがない場合はその要素は追従しません。
<div class="container">
<div class="sticky"></div>
<div class="sticky2"></div>
</div>
<div class="contents"></div>.container {
width: 100%;
background: rgb(255,201,114);
background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}
.sticky {
position: sticky;
top: 10px;
left: 50px;
width: 100px;
height: 100px;
background: blue;
}
.contents {
width: 100%;
height: 200px;
background: lightcoral;
position: relative;
}出力結果
See the Pen sticky-親要素高さ by ZeroPlus (@zeroplus-programming) on CodePen.
この場合は、親要素に高さを指定しましょう。
position: sticky; を適用した要素にtop: 0; や親要素に高さが確保されていたとしても、親要素にoverflow: hidden; が適用されていた場合は、stickyを適用した要素は追従しません。
<div class="container">
<div class="container__block">
<div class="sticky"></div>
</div>
</div>
<div class="contents"></div>.container {
width: 100%;
height: 2000px;
background: rgb(255,201,114);
background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}
.container__block {
overflow: hidden;
}
.sticky {
position: sticky;
top: 10px;
left: 50px;
width: 150px;
height: 150px;
background: blue;
}
.contents {
width: 100%;
height: 500px;
background: lightcoral;
position: relative;
}出力結果
See the Pen sticky-overflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.
この場合には、親要素のoverflow: hidden; を外しましょう。
もしoverflow: hidden; を外せない場合は、sticky要素をoverflow: hidden; が適用された要素の外側に配置しましょう。
<div class="container">
<div class="container__block"></div> <!-- overflow: hidden; が適用された要素-->
<div class="sticky"></div> <!-- overflow: hidden; が適用された要素の外側に配置-->
</div>
<div class="contents"></div>次の画像のようなイメージです。
まとめ
positionプロパティについて解説しました。 static, relative, absolute, fixed, sticky の5つの値にはそれぞれ特徴があります。状況に応じて使い分けていきましょう。
CSSは、プロパティ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
positionプロパティの値まとめ
- static：位置も重なりも指定できない、positionプロパティの初期値
- relative：相対位置を指定する
- absolute：要素の絶対位置を指定する
- fixed：要素を固定し追従する
- sticky：スクロールで動き、要素を固定する
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
