N予備校プログラミングコースの冬といえばこの　Advent Calendar、そして・・
　冬のプログラミングコンテスト 　が始まる季節！

「Webアプリのプログラミング部分はできた、、けど、、思ったようにボタンが・・、
　　部品が、、置きたい場所に、、配置できないんじゃああああああ

うあああああああああああ！」って方に向けたCSSの記事です。

position: relative・absolute

おおよそ、これで配置はどうにかなります。positionプロパティ。まずはpositionを使って、要素の**中央寄せ**を実装してみます。 **HTML**には**\

タグ一つ**のみです。

html

<body>
<div id="A"></div>
</body>

css

#A{
  position: relative;
  margin: auto;
  width: 500px;
  height: 200px;
  top:calc(100vh - 50vh - 100px);
  border: 4px double skyblue;
}

position: relative;
margin: auto;
top:calc(100vh - 50vh - 100px);

positionプロパティで、配置する場所を直接入力する方法です。まさに力技。
現在のCSSは計算で数値を設定できるので、遠慮なく使っていきます。
calc();
↑　これで計算できます。

top:calc(100vh - 50vh - 100px);

「ブラウザの縦の大きさ」 - 「その５０％」 - 「divAの縦の200pxの半分100px」
で、画面中央に！｡ﾟ+.ヽ(´∀`*)ﾉﾟ+.ﾟ

横も同じ様に設定してもOKですが、この例ではmargin: auto;で済んでしまうので省略。
練習として横の設定も変数にするのもいいのかも？

むずかしい部分としては、position属性にはrelativeとabsoluteと、似たものがあります。
２つの違いは原点　(top: 0px; left: 0px; の場所)

html

<body>
  <div id="A">
    <div id="B">B</div>
    <div id="C">C</div>
  </div>
</body>

css

#A{
  position: relative;
  margin: auto;
  width: 500px;
  height: 200px;
  top:calc(100vh - 50vh - 100px);
  border: 4px double skyblue;
  color: deepskyblue;
}
#B{
  width: 300px;
  height: 50px;
  border: 4px double skyblue;
}
#C{
  width: 300px;
  height: 50px;
  border: 4px double skyblue;
}

さきほど中央寄せしたboxに**B**と**C**というboxを追加しました。現在、 **Aの子要素がBとC**、 **BとCの親要素がA**という状態です。 ![reab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212989/5cf4f578-5826-9353-7d3f-348a5f7d46e7.png) では、**Cにrelativeを付与**して、表示場所を **top:0px, left:0pxの左上端**にしてみます。

css

#C{
  width: 300px;
  height: 50px;
  border: 4px double skyblue;
  position: relative;
  top:0px;
  left:0px;
}

予想としては、２つともAの左上端、(0,0)の座標になり、BとCが重なるのではなかろうか？・・と思いきやどっこい、設定しても**見た目が変わりません**。次に **position: relative;** を　→ **position: absolute;** に書き換えてみます。

css

#C{
  width: 300px;
  height: 50px;
  border: 4px double skyblue;
  position:absolute;
  top:0px;
  left:0px;
}

重なりました。これ、何が違うのかわかるでしょうか？ position: absolute の原点は、周りの兄弟要素無視して、親要素Aの(0,0)が原点となります。それに対し、relativeは、通常の表示場所が原点となります。Cをposition: relative;に戻して位置を top: -25px; と設定してみると、relativeがどこを原点にして移動しているのかわるかと思います。

わかりにくかったら「子要素は全部absolute！」これで問題ないきがします。

そして自由に要素を配置すると、要素同士が重なって、見せたいほうの要素が下に行ってしまい、見えなくなることがままあります。そういうときは、
z-index: 数値;
で調整します。いわゆるレイヤー(階層)みたいなものです。上にしたい方の数値を整数で上に指定すればOK。

css

#B{
  width: 300px;
  height: 50px;
  border: 4px double skyblue;
  position:absolute;
  top:0px;
  left:0px;
  z-index: 2;
}
#C{
  width: 300px;
  height: 50px;
  border: 4px double skyblue;
  position:absolute;
  top:0px;
  left:0px;
  z-index: 1;
}

この例では、ボックスBが上になります。

注意点としては、
positionがstatic(何も設定してない状態)では、z-indexは効きません。

Flex Box

次に、メジャーな機能が**フレックスボックス**。こちらは**親要素**と**子要素**の関係性が重要となってきます。下の**html**では**\

が親要素**。その中に入ってる**\

と\

<body>
  <div id="A">
    <div id="B">B</div>
    <div id="C">C</div>
  </div>
</body>

css

#A{
  position: relative;
  margin: auto;
  width: 500px;
  height: 200px;
  top:calc(100vh - 50vh - 100px);
  border: 4px double skyblue;
  color: deepskyblue;
}
#B{
  width: 100px;
  height: 50px;
  border: 4px double skyblue;
}
#C{
  width: 100px;
  height: 50px;
  border: 4px double skyblue;
}

現在このように表示されます。

フレックスボックスは、親要素に設定を書き込んでいきます。

css

#A{
  position: relative;
  margin: auto;
  width: 500px;
  height: 200px;
  top:calc(100vh - 50vh - 100px);
  border: 4px double skyblue;
  color: deepskyblue;
  display: flex;
  justify-content:center;
  align-items:center;
}
#B{
  width: 100px;
  height: 50px;
  border: 4px double skyblue;
}
#C{
  width: 100px;
  height: 50px;
  border: 4px double skyblue;
}

``display: flex;`` これでこの**\

**タグの**中**は、**フレックスボックス**となります。そして今回、中央寄せにしたいので、

justify-content:center;
align-items:center;

と、水平方向の設定のjustify-contentと、垂直方向の設定のalign-itemsを centerに設定。

こうなっていれば成功です。
フレックスボックスには並び方の設定がもろもろありますので、こちらの**チートシート**をみながら色々試してみてください。

Grid

もう一つ、よく使われるのが **グリッド**。今回はレイアウト機能だけちょこっと。 ![3colum.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212989/6984f5fa-9093-1932-b55b-4341715bb1c2.png) シンプルな３カラムレイアウト。これを**grid**で実装していきます。

html

<body>
  <header>ヘッダー</header>
  <nav>サイドA</nav>
  <main>コンテンツ</main>
  <aside>サイドB</aside>
  <footer>フッター</footer>
</body>

css

header{
  border: 4px skyblue double;
}
nav{
  border: 4px skyblue double;
}
main{
  border: 4px skyblue double;
}
aside{
  border: 4px skyblue double;
}
footer{
  border: 4px skyblue double;
}

**N**予備校のプログラミングコースの人には見慣れない**nav**や**aside**タグなどいっぱいですが、全部**\

**タグと機能が同じです。見やすくするためにできたタグなので、きにしないでください。 ![grilay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212989/defbad4a-8725-e8c7-df29-9b6261c64394.png) 今回のレイアウトの**親要素はbodyタグ**なので、グリッドの設定は**body**に書いていきます。今回記入するのは３つ。まず、bodyをグリットとして設定する ``display: grid;``

グリッドの詳細設定を書き込む
grid-template

そして、子要素にグリットテンプレートで書いた場所を実際にあてがう
grid-area

css

body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template:
    "header header header"
    "sideA  main   sideB "
    "footer footer footer"
　　;
}

header{
  grid-area: header;
  border: 4px skyblue double;
}
nav{
  grid-area: sideA;
  border: 4px skyblue double;
}
main{
  grid-area: main;
  border: 4px skyblue double;
}
aside{
  grid-area: sideB;
  border: 4px skyblue double;
}
footer{
  grid-area: footer;
  border: 4px skyblue double;
}

ここがグリッドのキモですね。

    "header header header"
    "sideA  main   sideB "
    "footer footer footer"
    ;

グリッドのすごさはこの見たまんまのレイアウトできるところ。**ダブルクォート "　"で囲ったところまでが１行**。スペースは**半角スペース**です。**半角ならばどれだけスペース入れても問題ない**ので、見やすく揃えましょう。今回３カラムなので３行。カンマはいりません。**最後にセミコロン**。これだけです。で、重要なのは**各子要素**に追記した ``grid-area`` です。ここの値に、グリッドテンプレートに配置した**名前**をあてがっていきます。名前は自由に決めれます。ただ、列（縦)の数は**必ず合わせる必要があります**。ので、仕切りたくない**header**と**footer**は同じ名前をつけて、列の数に合わせます。

うまくいったでしょうか？
次に、実際のエリアの大きさの設定です。これもかんたん。

  grid-template:
    "header header header" 15vh
    "sideA  main   sideB " 1fr
    "footer footer footer" 15vh
    / 1fr   3fr     1fr
　　;

ただ単に横に**サイズ**を書き込むだけ。**横の設定は / を入れてから書きます**。今回あえて **fr**という謎単位を使ってますがこれ、**比率**です。今回は　**1fr　 3fr　 1fr　**なので横の長さを **1 : 3 : 1** で割り振っています。この縦の設定の時のような、15vh と 15vh　と固定されたものがある場合、のこりの70vh を比率で割り振ります。ちょーべんり。 ![3c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212989/6f9dcc30-dbfd-4004-8285-c5788c504c36.png) できました？ ## import **CSS**は、アプリによっては**膨大**な長さになります。ので、外部ファイルからの**読み込み機能**があったりします。

bundle.css

A.css

B.css

C.css こんな感じにA~Cに分けて書いたCSSを、bundle.cssに一つにまとめて、bundle.cssだけをHTMLファイルに読み込ませたい時につかいます。

bundle.css

@import url("./A.css");
@import url("./B.css");
@import url("./C.css");

のカッコの中に、読み込ませたいファイルのパスを入れるだけ。

　余談 N予備校の冬のWebアプリコンテストでは、応募者全員に、審査する講師陣からアプリのレビューがもらえるのですが、まだこの機能を知らなかった私は、講師陣の皆様全員からすごくソフトに柔らかくやさしく「ファイルを分けてください」という悲痛のレビューをもらってます　

きゃー

ご迷惑おかけしました。

変数

CSSで計算ができるということは、変数も使えたりします。例えば「ボタンはこの色で統一」と、色を変数にしておけば、もし色を変えたい時、変数の色を変えるだけで、すべてのページのボタンの色を変えられたりするので、なかなか便利です。

css

:root {
  --bg-color: blue;
  --main-fontsize: 14px;
}

body{
  background-color: var(--bg-color);
  font-size: var(--main-fontsize);
}

--変数名：値

変数の設定方法はこれだけです。( ハイフン(-)２つは必須 )
変数の記入場所のスタンダードは:rootという擬似クラス。ここは、この変数のスコープ(適用範囲)が、HTML全体になる場所です。

そして設定した変数の使い方
var()
このカッコの中に変数名を書くだけです。Webアプリで大作を作ろうとしてる方は必須かもしれません。

ではここまでです。レビューする講師陣にやさしいコードを皆でめざしましょう！

Merry Christmas