Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

N予備校プログラミングコースAdvent Calendar 2021

Day 24
@asazuke

突貫！CSS！

Last updated at Posted at 2021-12-23

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

「Webアプリのプログラミング部分はできた、、けど、、思ったようにボタンが・・、
　　部品が、、置きたい場所に、、配置できないんじゃああああああ
keyboard-crasher-angry.gif
うあああああああああああ！」って方に向けた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プロパティで、配置する場所を直接入力する方法です。まさに力技:fist_tone1:。
現在のCSSは計算で数値を設定できるので、遠慮なく使っていきます。
calc();
↑　これで計算できます。

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

「ブラウザの縦の大きさ」 - 「その５０％」 - 「divAの縦の200pxの半分100px」
で、画面中央に！ ｡ﾟ+.ヽ(´∀`*)ﾉ ﾟ+.ﾟ
center.png
横も同じ様に設定しても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;
}

abs.png

重なりました。これ、何が違うのかわかるでしょうか？ 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;
}

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

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

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に設定。
flecen.png
こうなっていれば成功です。:v_tone1:
フレックスボックスには並び方の設定がもろもろありますので、こちらの**チートシート**をみながら色々試してみてください。

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**は同じ名前をつけて、列の数に合わせます。

3cgri.png

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

  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**は、アプリによっては**膨大**な長さになります。ので、外部ファイルからの**読み込み機能**があったりします。 :green_book: bundle.css :green_book: A.css :green_book: B.css :green_book: C.css こんな感じにA~Cに分けて書いたCSSを、bundle.cssに一つにまとめて、bundle.cssだけをHTMLファイルに読み込ませたい時につかいます。
bundle.css
@import url("./A.css");
@import url("./B.css");
@import url("./C.css");
@importのカッコの中に、読み込ませたいファイルのパスを入れるだけ。 :lipstick:　余談 N予備校の冬のWebアプリコンテストでは、応募者全員に、審査する講師陣からアプリのレビューがもらえるのですが、まだこの機能を知らなかった私は、講師陣の皆様全員からすごくソフトに柔らかくやさしく「ファイルを分けてください」という悲痛のレビューをもらってます　:scream:きゃー

ご迷惑おかけしました。

変数

CSSで計算ができるということは、変数も使えたりします。例えば「ボタンはこの色で統一」と、色を変数にしておけば、もし色を変えたい時、変数の色を変えるだけで、すべてのページのボタンの色を変えられたりするので、なかなか便利です。
css
:root {
  --bg-color: blue;
  --main-fontsize: 14px;
}

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

--変数名：値

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

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

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

:sparkles::christmas_tree: Merry Christmas :christmas_tree::sparkles:
8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?