Bootstrap ~基礎編~

前回は、学習に必要な環境を準備しました。

今回は、Bootstrapの基礎を勉強しましょう。

<目次>

Bootstrapとは

KOUKI

Bootstrapを学びましょう!

Bootstrapってそもそも何?使えて何が嬉しいの?

A子

まずは、Bootstrapについて、簡単に説明します。

Bootstrapは、「CSSのフレームワーク」です。

従来、私たちがWebデザインを行う時、CSSによるフルスクラッチで実装してきましたが、Bootstrapは特殊なタグを使うことによって、デザインにおける実装を大幅に簡便化させたものになります。

説明は、以上です。

? 何言っているの??

A子

KOUKI

説明がざっくりしすぎてますよね。しかし、「習うより慣れろ」です。手を動かして学んでいきましょう!

事前準備

Bootstrap ~事前準備編~

テキストとカラー

KOUKI

最初は、テキストとカラーをみていきましょう!

Bootstrapを使うと、テキストとカラーがびっくりするほど簡単にデザインできます。

・color
・text

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
    <style>
    body {
       background: #eee;
    }
    </style>
  </head>
  <body>    
    
   <p class="text-left text-uppercase font-weight-bold">Lorem ipsum, dolor sit amet.</p> 
   <p class="text-center text-lowercase font-weight-normal">Lorem ipsum, dolor sit amet.</p> 
   <p class="text-right text-capitalize font-weight-light">Lorem ipsum, dolor sit amet.</p> 

   <p class="text-justify font-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a perferendis quis, aliquam enim at perspiciatis odio rem numquam nemo adipisci harum dolore magnam tempore? Qui blanditiis aut tenetur accusantium.</p>
 
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Learning Bootstrap</title>

<style>

body {

background: #eee;

}

</style>

</head>

<body>

<p class="text-left text-uppercase font-weight-bold">Lorem ipsum, dolor sit amet.</p>

<p class="text-center text-lowercase font-weight-normal">Lorem ipsum, dolor sit amet.</p>

<p class="text-right text-capitalize font-weight-light">Lorem ipsum, dolor sit amet.</p>

<p class="text-justify font-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a perferendis quis, aliquam enim at perspiciatis odio rem numquam nemo adipisci harum dolore magnam tempore? Qui blanditiis aut tenetur accusantium.</p>

</body>

</html>

<出力結果>

Learning Bootstrap

Lorem ipsum, dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a perferendis quis, aliquam enim at perspiciatis odio rem numquam nemo adipisci harum dolore magnam tempore? Qui blanditiis aut tenetur accusantium.

classに付いている「text-left text-uppercase font-weight-bold」などが、Bootstrapの特殊タグです。

続いて、文字列に色をつけてみます。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
  </head>
  <body>    
    
    <p class="text-primary">Lorem ipsum dolor sit amet.</p>
    <p class="text-secondary">Lorem ipsum dolor sit amet.</p>
    <p class="text-success">Lorem ipsum dolor sit amet.</p>
    <p class="text-danger">Lorem ipsum dolor sit amet.</p>
    <p class="text-warning">Lorem ipsum dolor sit amet.</p>
    <p class="text-info">Lorem ipsum dolor sit amet.</p>
    <p class="text-light">Lorem ipsum dolor sit amet.</p>
    <p class="text-dark">Lorem ipsum dolor sit amet.</p>
    <p class="text-muted">Lorem ipsum dolor sit amet.</p>
    <p class="text-white">Lorem ipsum dolor sit amet.</p>
   
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Learning Bootstrap</title>

</head>

<body>

<p class="text-primary">Lorem ipsum dolor sit amet.</p>

<p class="text-secondary">Lorem ipsum dolor sit amet.</p>

<p class="text-success">Lorem ipsum dolor sit amet.</p>

<p class="text-danger">Lorem ipsum dolor sit amet.</p>

<p class="text-warning">Lorem ipsum dolor sit amet.</p>

<p class="text-info">Lorem ipsum dolor sit amet.</p>

<p class="text-light">Lorem ipsum dolor sit amet.</p>

<p class="text-dark">Lorem ipsum dolor sit amet.</p>

<p class="text-muted">Lorem ipsum dolor sit amet.</p>

<p class="text-white">Lorem ipsum dolor sit amet.</p>

</body>

</html>

<出力結果>

Learning Bootstrap

Lorem ipsum dolor sit amet.

text-〇〇と指定すると色のデザインができます。便利ですね^^

画面幅の切り替え(ブレイクポイント)

KOUKI

続いては、ブレイクポイントを学びます。

Bootstrapを導入するメリットは、レスポンシブル対応が、驚くほど簡単にできることです。

次に示すのは、画面幅の”単位“です。

単位:ピクセル
xs < 576 <= sm < 768 <= md < 992 <= lg < 1200 <= xl

このxsやxlは、ブラウザの画面幅を表していて、画面幅の拡大・縮小に伴った切り替え(ブレークポイント)を設置できます。

何言ってるのかわからないよ〜

A子

KOUKI

そうですよね。具体例をお見せしましょう。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
  </head>
  <body>    
    
    <h1 class="text-sm-center">SAMPLE TEXT</h1>
   
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Learning Bootstrap</title>

</head>

<body>

<h1 class="text-sm-center">SAMPLE TEXT</h1>

</body>

</html>

「text-sm-center」をh1タグに適用しました。画面を表示させてみましょう。

横幅が「740ピクセル」であるため、「sm」のブレークポイントの範囲内です。そのため「SAMPLE TEXT」の文字列が真ん中に表示されています。

この740ピクセルの横幅を縮小してみましょう。

560ピクセルにしたところ、SAMPLE TEXTが左寄せになりましたね。

これがブレークポイントです。

このブレークポイントは、複数指定も可能です。

<h1 class="text-sm-center text-md-left">SAMPLE TEXT</h1>

1	<h1 class="text-sm-center text-md-left">SAMPLE TEXT</h1>

ブレークポイントは、レスポンシブルデザインに必須な要素なので、覚えておきましょう^^

スペースとサイジング

KOUKI

次は、margin、padding、サイジングについて学びましょう!

ブロックレベルの要素には、margin, paddingの設定ができます。以下の図は、Chromeのデベロッパーツールから切り出してきたものです。

marginは、要素の外側の幅、paddingは要素の内側の幅を設定できます。

Bootstrapには、これらの要素を簡単に扱える機能も存在します。

・Spacing

Where property is one of:
m – for classes that set margin
p – for classes that set padding
Where sides is one of:
t – for classes that set margin-top or padding-top
b – for classes that set margin-bottom or padding-bottom
l – for classes that set margin-left or padding-left
r – for classes that set margin-right or padding-right
x – for classes that set both *-left and *-right
y – for classes that set both *-top and *-bottom
blank – for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 – for classes that eliminate the margin or padding by setting it to 0
1 – (by default) for classes that set the margin or padding to $spacer * .25
2 – (by default) for classes that set the margin or padding to $spacer * .5
3 – (by default) for classes that set the margin or padding to $spacer
4 – (by default) for classes that set the margin or padding to $spacer * 1.5
5 – (by default) for classes that set the margin or padding to $spacer * 3
auto – for classes that set the margin to auto
Bootstrap公式サイトより

$spacer は、Bootstrapがデフォルトで用意している変数名です。通常は1rem（デフォルトは16ピクセル)です。

「1」を指定すると 16 * 0.25 = 4ピクセルになります。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
  </head>
  <body>    
    
    <div class="bg-secondary" style="width: 100%; height: 600px">
      <p class="bg-primary text-light mb-5">Lorem ipsum dolor sit amet.</p>
      <p class="bg-info text-white m-2">Lorem ipsum dolor sit amet.</p>
      <p class="bg-warning text-white m-5 p-5">Lorem ipsum dolor sit amet.</p>
    </div>
   
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Learning Bootstrap</title>

</head>

<body>

<p class="bg-primary text-light mb-5">Lorem ipsum dolor sit amet.</p>

<p class="bg-info text-white m-2">Lorem ipsum dolor sit amet.</p>

<p class="bg-warning text-white m-5 p-5">Lorem ipsum dolor sit amet.</p>

</div>

</body>

</html>

Learning Bootstrap

Lorem ipsum dolor sit amet.

意味がわかると全然難しくないですね。

FloatとPosition

Bootstrapは、FloatとPositionのユーティリティも備えています。

・Float
・Position

まず、Floatですが、画面の要素の位置を制御できるものです。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
  </head>
  <body>    
    
    <div class="bg-secondary text-center p-1">
      <p class="bg-success p-1 float-left">FIRST</p>
      <p class="bg-primary p-1 float-right">SECOND</p>
    </div>
   
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Learning Bootstrap</title>

</head>

<body>

<p class="bg-success p-1 float-left">FIRST</p>

<p class="bg-primary p-1 float-right">SECOND</p>

</div>

</body>

</html>

Learning Bootstrap

FIRST

SECOND

この例では、親要素上に、FIRSTとSECONDの要素を左右に移動させました。

BootstrapにはCSSのclearと似た機能もありまして、親要素に「clearfix」をつけます。

<div class="bg-secondary text-center p-1 clearfix">
  <p class="bg-success p-1 float-left">FIRST</p>
  <p class="bg-primary p-1 float-right">SECOND</p>
</div>

<p class="bg-success p-1 float-left">FIRST</p>

<p class="bg-primary p-1 float-right">SECOND</p>

</div>

Learning Bootstrap

FIRST

SECOND

このプロパティは、先に出てきたsm等のブレークポイントとも組み合わせることができるので、覚えておきましょう。

.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none
Bootstrap公式サイトより

positionも若干面白いです。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Bootstra公式サイトより

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="title icon" type="image/png" href="images/title-img.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- fontawesome　-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <title>Learning Bootstrap</title>
  </head>
  <body>    
    
    <div class="bg-secondary text-center p-1 clearfix fixed-top">
      <p class="bg-success p-1 float-md-left">FIRST</p>
      <p class="bg-primary p-1 float-md-right">SECOND</p>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil illum tenetur eligendi harum sunt aut alias modi dolorem praesentium accusantium culpa molestias voluptas, enim quisquam officia beatae minima veniam eum.
    Perferendis saepe accusantium adipisci? A voluptatem, nisi sunt nemo eius tenetur alias illum architecto ut corrupti pariatur eligendi nostrum aliquid maiores illo quidem sed voluptas porro quis eos officia. Laboriosam.
    Quisquam, explicabo, minus hic sunt cupiditate unde dolorem eum excepturi recusandae minima eaque a officiis voluptas? Incidunt pariatur explicabo aliquam blanditiis quia vero, earum sapiente officia iure natus optio eum!
    Delectus ipsam aspernatur repellat magnam veniam! Suscipit facilis accusamus asperiores minus cumque. Nihil soluta eum deserunt! Aliquid, voluptatem labore. Earum saepe corrupti aliquid fugiat quasi sunt sapiente sint animi magni.
    Impedit minima sit dicta architecto nisi, adipisci aut ipsa esse animi iste dolores odit libero ab magnam quasi, totam assumenda eos maiores! Odit officia, quis aliquid dicta delectus blanditiis labore?
    Atque consequatur voluptates reprehenderit alias ipsam molestias, quisquam necessitatibus, nobis voluptatibus mollitia nihil expedita. Suscipit velit repellat, vero ullam id voluptas consequatur! Commodi iure quam eos esse atque quos placeat.
    Excepturi tempora, maiores officiis molestias nihil corporis hic asperiores ut officia. Accusantium sit repellendus mollitia eveniet quia, expedita, nulla illum quibusdam dolorum incidunt ratione pariatur voluptas iste, iusto dolore molestias.
    Culpa rerum laboriosam iure unde, non corrupti eum est, nemo nesciunt magnam expedita aut consequuntur et in. Ab, eum. Ad maxime dolore accusamus harum iusto a doloremque iste, assumenda officia!
    Voluptatem, porro, consectetur maiores corrupti iste eius soluta ratione, quasi totam est amet accusamus assumenda ad repellendus impedit nostrum delectus dignissimos. Inventore velit repellat amet maxime deserunt voluptates tempore eos.
    Consectetur quia sequi quos voluptatibus accusamus iure, vitae asperiores a, sed aut ab optio deserunt id doloremque maiores quae reiciendis iste modi consequuntur soluta? Cum ad quo totam laudantium non!
    Tempore quasi harum asperiores consectetur exercitationem nulla earum fugiat dolorum nisi veniam dolor eius, quisquam natus vero odio. Sequi maxime quas quaerat aliquid nemo architecto ullam minus suscipit illo necessitatibus!
    Hic a, minima eaque maiores quasi et libero laudantium reiciendis dolorem debitis possimus voluptatum est cupiditate saepe itaque fugiat, aliquam consequatur quo officia aspernatur quam tempora distinctio! Quos, cum a.
    Ipsum error, obcaecati facere sit adipisci ipsam sunt nobis accusamus veritatis a dolores voluptatibus, fuga sequi cum laboriosam fugit omnis sapiente? Voluptate, aut ullam temporibus ex molestiae harum veritatis facere!
    Id, commodi ut! Nemo fugiat animi, natus aliquid reiciendis doloremque expedita! Perspiciatis porro inventore neque aliquid laudantium quam aliquam amet unde incidunt minus culpa et quaerat eos, praesentium quis eaque.
    Adipisci dignissimos quia autem provident, minus dicta distinctio laboriosam ratione sapiente, eius tempore consequatur odit animi. Laborum, officiis placeat nesciunt eveniet, quasi suscipit adipisci unde quidem commodi maiores veritatis. Magnam?
    Commodi incidunt nobis nostrum, sit repellendus temporibus nisi officiis minus provident explicabo ab at? Totam expedita cumque ducimus, quidem quos facilis. Adipisci laudantium consequuntur sed? Eos doloremque laborum natus dolores.
    Impedit laboriosam doloribus natus illo earum eveniet officia nemo enim iste ratione rerum veritatis recusandae accusamus assumenda necessitatibus beatae, fugit ad iusto maxime eum pariatur sequi. Nam ut debitis ullam.
    Inventore et incidunt sapiente unde. Sit suscipit praesentium accusantium veritatis! Mollitia, repudiandae tempora doloribus voluptatem placeat assumenda totam nisi, dolorum saepe minus obcaecati unde porro illum accusantium asperiores exercitationem et?
    Natus dolore minus nobis itaque repudiandae odio pariatur libero! Aperiam, cum. Quo dolores ratione maiores dolorem esse harum optio. Cumque deleniti velit neque reprehenderit. Expedita porro obcaecati veritatis consequatur quo.
    Quod, consequatur pariatur. Voluptas numquam nobis facilis dolores ipsam omnis beatae minima. Saepe labore sit, a non fuga quidem odit sapiente quia incidunt? Dolores blanditiis quo enim illum dolore voluptates?</p>
   
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

<head>

<title>Learning Bootstrap</title>

</head>

<body>

<p class="bg-success p-1 float-md-left">FIRST</p>

<p class="bg-primary p-1 float-md-right">SECOND</p>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil illum tenetur eligendi harum sunt aut alias modi dolorem praesentium accusantium culpa molestias voluptas, enim quisquam officia beatae minima veniam eum.

Perferendis saepe accusantium adipisci? A voluptatem, nisi sunt nemo eius tenetur alias illum architecto ut corrupti pariatur eligendi nostrum aliquid maiores illo quidem sed voluptas porro quis eos officia. Laboriosam.

Quisquam, explicabo, minus hic sunt cupiditate unde dolorem eum excepturi recusandae minima eaque a officiis voluptas? Incidunt pariatur explicabo aliquam blanditiis quia vero, earum sapiente officia iure natus optio eum!

Delectus ipsam aspernatur repellat magnam veniam! Suscipit facilis accusamus asperiores minus cumque. Nihil soluta eum deserunt! Aliquid, voluptatem labore. Earum saepe corrupti aliquid fugiat quasi sunt sapiente sint animi magni.

Impedit minima sit dicta architecto nisi, adipisci aut ipsa esse animi iste dolores odit libero ab magnam quasi, totam assumenda eos maiores! Odit officia, quis aliquid dicta delectus blanditiis labore?

Atque consequatur voluptates reprehenderit alias ipsam molestias, quisquam necessitatibus, nobis voluptatibus mollitia nihil expedita. Suscipit velit repellat, vero ullam id voluptas consequatur! Commodi iure quam eos esse atque quos placeat.

Excepturi tempora, maiores officiis molestias nihil corporis hic asperiores ut officia. Accusantium sit repellendus mollitia eveniet quia, expedita, nulla illum quibusdam dolorum incidunt ratione pariatur voluptas iste, iusto dolore molestias.

Culpa rerum laboriosam iure unde, non corrupti eum est, nemo nesciunt magnam expedita aut consequuntur et in. Ab, eum. Ad maxime dolore accusamus harum iusto a doloremque iste, assumenda officia!

Voluptatem, porro, consectetur maiores corrupti iste eius soluta ratione, quasi totam est amet accusamus assumenda ad repellendus impedit nostrum delectus dignissimos. Inventore velit repellat amet maxime deserunt voluptates tempore eos.

Consectetur quia sequi quos voluptatibus accusamus iure, vitae asperiores a, sed aut ab optio deserunt id doloremque maiores quae reiciendis iste modi consequuntur soluta? Cum ad quo totam laudantium non!

Tempore quasi harum asperiores consectetur exercitationem nulla earum fugiat dolorum nisi veniam dolor eius, quisquam natus vero odio. Sequi maxime quas quaerat aliquid nemo architecto ullam minus suscipit illo necessitatibus!

Hic a, minima eaque maiores quasi et libero laudantium reiciendis dolorem debitis possimus voluptatum est cupiditate saepe itaque fugiat, aliquam consequatur quo officia aspernatur quam tempora distinctio! Quos, cum a.

Ipsum error, obcaecati facere sit adipisci ipsam sunt nobis accusamus veritatis a dolores voluptatibus, fuga sequi cum laboriosam fugit omnis sapiente? Voluptate, aut ullam temporibus ex molestiae harum veritatis facere!

Id, commodi ut! Nemo fugiat animi, natus aliquid reiciendis doloremque expedita! Perspiciatis porro inventore neque aliquid laudantium quam aliquam amet unde incidunt minus culpa et quaerat eos, praesentium quis eaque.

Adipisci dignissimos quia autem provident, minus dicta distinctio laboriosam ratione sapiente, eius tempore consequatur odit animi. Laborum, officiis placeat nesciunt eveniet, quasi suscipit adipisci unde quidem commodi maiores veritatis. Magnam?

Commodi incidunt nobis nostrum, sit repellendus temporibus nisi officiis minus provident explicabo ab at? Totam expedita cumque ducimus, quidem quos facilis. Adipisci laudantium consequuntur sed? Eos doloremque laborum natus dolores.

Impedit laboriosam doloribus natus illo earum eveniet officia nemo enim iste ratione rerum veritatis recusandae accusamus assumenda necessitatibus beatae, fugit ad iusto maxime eum pariatur sequi. Nam ut debitis ullam.

Inventore et incidunt sapiente unde. Sit suscipit praesentium accusantium veritatis! Mollitia, repudiandae tempora doloribus voluptatem placeat assumenda totam nisi, dolorum saepe minus obcaecati unde porro illum accusantium asperiores exercitationem et?

Natus dolore minus nobis itaque repudiandae odio pariatur libero! Aperiam, cum. Quo dolores ratione maiores dolorem esse harum optio. Cumque deleniti velit neque reprehenderit. Expedita porro obcaecati veritatis consequatur quo.

Quod, consequatur pariatur. Voluptas numquam nobis facilis dolores ipsam omnis beatae minima. Saepe labore sit, a non fuga quidem odit sapiente quia incidunt? Dolores blanditiis quo enim illum dolore voluptates?</p>

</body>

</html>

画面で確認してみると、先ほどのFIRST、SECONDがヘッダーみたいに画面上に固定化されています。

引用にも書きましたが、色々と種類があるので、試してみてください。

次回

次回は、レイアウト(CSS FlexboxとBootstrap Grid)を学びましょう。

Bootstrap 4　フロントエンド開発の教科書ウェブ開発の知識とコツをしっかりマスター [ 宮本麻矢 ]

楽天で購入

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Bootstrapとは

事前準備

テキストとカラー

画面幅の切り替え(ブレイクポイント)

スペースとサイジング

FloatとPosition

次回

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

Bootstrapとは

事前準備

テキストとカラー

画面幅の切り替え(ブレイクポイント)

スペースとサイジング

FloatとPosition

次回

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[golang]fiber API8~Ambassador: ページネーショ…

[まとめ]webpackの使い方

JavaScriptでToggleボタンの開閉処理を実装しよう!

JavaScriptとGo言語でToDoリストアプリを作ろう!~検索機能~

JavaScript(あとCSS)でSticky Navigationを実装…

[Go言語]Stateパターンで数当てゲームを作ろう!

[Golang/Go言語]ファイル検索ツールを作って業務効率化を目指そう!

[Go言語]Builderパターン ~Facets~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル