LoginSignup
8
4

More than 1 year has passed since last update.

N予備校プログラミングコースAdvent Calendar 2021Day 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には<div>タグ一つのみです。

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
では、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では<div id="A">が親要素。その中に入ってる<div id="B">と<div id="C> が 子要素です。

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;
これでこの<div id="A">タグの中は、フレックスボックスとなります。そして今回、中央寄せにしたいので、

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

と、水平方向の設定のjustify-contentと、垂直方向の設定のalign-itemsを centerに設定。
flecen.png
こうなっていれば成功です。:v_tone1:
フレックスボックスには並び方の設定がもろもろありますので、こちらのチートシートをみながら色々試してみてください。

Grid


もう一つ、よく使われるのが グリッド。今回はレイアウト機能だけちょこっと。
3colum.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タグなどいっぱいですが、全部<div>タグと機能が同じです。見やすくするためにできたタグなので、きにしないでください。
grilay.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
できました？

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