あぱれる男子のつぶやき

プログラミングを奮闘中

トップ > PROGRAMMING > 【Bootstrapその①】基本的な使い方～特徴からcontainerまで～【学習積み上げ】

【Bootstrapその①】基本的な使い方～特徴からcontainerまで～【学習積み上げ】

PROGRAMMING Bootstrap

f:id:mmmouh8845:20200123002523p:plain


最近、ここの最初の一言で書くネタがなくなってきました、マサです。

今日から本格的にブログで勉強内容発信をやっていこうと思います。

元々は、勉強した内容を定着させるためのアウトプットとしてブログを初めたわけですからね。

ブログ×勉強内容はノートに書くより効率的。なはず、、


ということでBootstrap①です。

Bootstrapの特徴

Bootstrapを使うにあたって


まず、公式のトップのリンクを貼っておきます。

getbootstrap.com



BootstrapとはCSSを効率的に書くためのフレームワークですね。

記述が楽になるようにEmmetのようなショートカットした書き方があったり、class名に予め意味を持たせてあったり、とかなり便利な代物。

ただ、現場ではそこまで使われていないという書き込みもちらほら見かけます。

なので間を取って、実装したいデザインにあわせて部分的に使えるスキルを持ち合わせているとといいですね！



使い方は色々ありますが、CDNで読み込ませるのが一番簡単でいいですよね。

font awesomeとかJqueryのライブラリをscriptで読み込ませるのとかと同様にHTMLのhead内に記述すればOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Bootstrap</title>
</head>



Bootstrapの特徴

予めリセットCSSが使われている

例えば、bodyの中にこのような記述をすると、

<h1>HELLO!</h1>
    <p>こんにちは！</p>

CDNでBootstrapを読み込ませていると、こんな感じで

f:id:mmmouh8845:20200118233659p:plain


逆に読み込ませていないと、こんな感じです。

f:id:mmmouh8845:20200118233715p:plain


containerで囲ったものは最低限の余白が設定されている

早速出てきました。Bootstrapのclass名の指定による便利な機能の1つです。

先ほどのh1とpですが、containerで囲むとこのようになります。

<div class="container">
    <h1>HELLO!</h1>
    <p>こんにちは！</p>
  </div>

　
　

f:id:mmmouh8845:20200118231945p:plain
小さいので拡大してください。。


これの画面幅を縮めていくと、一定の余白を保ったまま調整してくれてます。便利ですね。
そして、スマホの幅になったときは余白をなくしてくれると、、

レスポンシブ対応が完璧ですね。CSSの苦労が嘘のようだ。


余白の記述について

margin, paddingなどの余白とtop、right,、bottom、leftの扱い方

頭文字を取って、mt,mr,mb,mlや、pt,pr,pb,plと示すことができます。

これを、余白を付けたい要素のclass名につけると適用されます。

見にくいので表にします。

top right bottom left
padding pt pr pb pl
margin mt mr mb ml


また、t,b(縦方向)の指定はmy,　l,r(横方向)の指定はmxで示すことで省略できます。

これはCSSで記述する時の、
{ margin: 0, 0; } と
{ margin: 0, 0, 0, 0; }の違いと似てますね。

top, bottom right, left
padding py px
margin my mx


ちなみに、全方向に余白をつけたいときは単純にmのみで指定できます。

そして、この余白は0～5で設定でき、marginの場合、例えばm-1、paddingの場合p-3といった付け方になります。

この数字は恐らくemかremを基準にしている、と書いてあったような。
0...0rem
1...* 0.25
2...* 0.5
3...* 1.0
4...* 1.5
5...* 3.0

html { font-size: 62.5%; }でを指定するとコーディングをするときに1rem=10pxになることから、私はよく使ってますが、これを基準にすると、、
0...0rem＝0px
1...* 0.25＝2.5px
2...* 0.5=5px
3...* 1.0=10px
4...* 1.5=15px
5...* 3.0=30px

となりますよね。

試しにこう記述します。

<head>
~
  <style>
    html {
      font-size: 62.5%;
    }
  </style> 
</head>
<body>
  <div class="container">
    <h1 class="mt-5">HELLO!</h1>
    <p>こんにちは！</p>
  </div>
</body>


f:id:mmmouh8845:20200118235759p:plain
合ってた。




書き方をまとめると、、

top, bottom, (top+bottom) right, left, (right+left)
padding pt-1~5, pb-1~5, (py-1~5) pr-1~5, pl-1~5, (px-1~5)
margin mt-1~5, mb-1~5, (mx-1~5) mr-1~5, ml-1~5, (mx-1~5)


このようにして指定すれば良いわけですね！


BootstrapもCSSと同様に奥が深いですね、、
今日はここまでとします。


次は今回紹介したcontainerとも関連があるグリッドについてです。


www.appatwi.com




それでは。