Bootstrap | ITのあれこれ https://himatoto.com 初心者視点で分かりやすく Mon, 17 Jul 2023 10:25:47 +0000 ja hourly 1 https://wordpress.org/?v=6.7.2 https://himatoto.com/wp-content/uploads/2020/06/cropped-4495bed8051fcc9fd4ac4bababda36e3-32x32.png Bootstrap | ITのあれこれ https://himatoto.com 32 32 【Bootstrap】表示する画面に合わせて、横に並べる要素数を変える(row、col） https://himatoto.com/bootstrap5/ https://himatoto.com/bootstrap5/#respond Fri, 07 Apr 2023 18:25:29 +0000 https://himatoto.com/?p=686 前回紹介したBootstrapの「row」「col」を利用し、パソコンとスマートフォンでそれぞれ横に並べる要素数を変える方法を紹介します。

パソコンで1行4列表示、スマートフォン2行2列

HTMLを書いてみると

<div class="row">
  <div class="col-6 col-lg-3 bg-primary">
    １個目
  </div>
  <div class="col-6 col-lg-3 bg-secondary">
    ２個目
  </div>
  <div class="col-6 col-lg-3 bg-success">
    ３個目
  </div>
  <div class="col-6 col-lg-3 bg-info">
    ４個目
  </div>
</div>

パソコンでの表示イメージは

ブラウザで表示すると

スマートフォンでの表示イメージは

ブラウザで表示すると

要素を横に４個並べて表示する場合「col-3」を指定します。

要素を横に2個並べて表示する場合「col-6」を指定します。

　※colは横に最大12等分あります。

　　例）4等分にしたい場合「12÷4」して、１個分は「3」となる。

①はじめに全体を２等分にする指定をします。

「col-6」を指定することで、すべての表示が横に2個表示されます。

②次にパソコン表示の部分を指定します。

「lg」を付けると、パソコンでの表示操作ができます。

よって、パソコン表示の時に要素を4個横に並べて表示させたい場合「col-lg-3」となります。

　※lg・・・画面横サイズが992px以上の場合、操作したい時に追加します。

まとめ

  1. row・colを使用し、行・列を指定
  2. colに数字を指定し、横に表示する要素数を指定
  3. スマートフォン（小さい画面サイズ）を意識したスタイルを指定（全体のスタイルを指定）
  4. パソコン表示を意識したスタイルを指定（条件下で全体の指定を上書き）
]]> https://himatoto.com/bootstrap5/feed/ 0 【Bootstrap】要素を縦横並べて表示（row、col） https://himatoto.com/bootstrap4/ https://himatoto.com/bootstrap4/#respond Fri, 24 Dec 2021 15:18:22 +0000 https://himatoto.com/?p=610 Bootstrapの「row」「col」classを使用し要素を並べる方法を紹介します。

（Bootstrap v5を使用しています。）

１行３列表示

HTMLを書いてみると

<div class="row">
  <div class="col bg-primary">
    １個目
  </div>
  <div class="col bg-secondary">
    ２個目
  </div>
  <div class="col bg-success">
    ３個目
  </div>
</div>

イメージは

ブラウザで表示すると

２行３列表示

HTMLを書いてみると

<div class="row">
  <div class="col bg-primary">
    １個目
  </div>
  <div class="col bg-secondary">
    ２個目
  </div>
  <div class="col bg-success">
    ３個目
  </div>
</div>
<div class="row">
  <div class="col bg-danger">
    ４個目
  </div>
  <div class="col bg-warning">
    ５個目
  </div>
  <div class="col bg-info">
    ６個目
  </div>
</div>

イメージは

ブラウザで表示すると

まとめ

行を追加したい場合「row」、列を追加したい場合「col」をclassに追加する。

class名説明
row行
col列

「row」「col」を使用した情報を追加しました。

【Bootstrap】表示する画面に合わせて、横に並べる要素数を変える(row、col）
表示する画面（パソコン・スマートフォン）に合わせて、横に並べる要素数を変える方法を説明します。
himatoto.com
2023.04.08
]]> https://himatoto.com/bootstrap4/feed/ 0 【Bootstrap】tableを簡単に整える https://himatoto.com/bootstrap3/ https://himatoto.com/bootstrap3/#respond Thu, 14 Jan 2021 16:26:44 +0000 https://himatoto.com/?p=513 HTMLのtableをBootstrapを使用して簡単に整える方法を説明します。

（Bootstrap4を使用しています。）

スタイルを適用していない状態

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
  </tbody>
</table>

ベースを整える

tableタグに「table」を追加

<table>
  <thead class="table">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
  </tbody>
</table>

線を表示する

tableタグに「table-bordered」を追加

<table>
  <thead class="table table-bordered">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
  </tbody>
</table>

行の背景色を1行飛びで表示する

tableタグに「table-striped」を追加

<table>
  <thead class="table table-bordered table-striped">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト次郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト三郎</td>
    </tr>
  </tbody>
</table>

マウスオーバーした時に行の背景色を表示する

tableタグに「table-hover」を追加

<table>
  <thead class="table table-bordered table-striped table-hover">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト次郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト三郎</td>
    </tr>
  </tbody>
</table>

行の高さを狭くする

tableタグに「table-sm」を追加

<table>
  <thead class="table table-bordered table-striped table-hover table-sm">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト次郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト三郎</td>
    </tr>
  </tbody>
</table>
]]> https://himatoto.com/bootstrap3/feed/ 0 【Bootstrap】簡単に要素と要素の間隔をあける https://himatoto.com/bootstrap2/ https://himatoto.com/bootstrap2/#respond Tue, 18 Aug 2020 06:02:57 +0000 https://himatoto.com/?p=346 Bootstrapを利用して便利だと感じたことをまとめてます。

困った時に参考にして頂ければと思います。

（Bootstrapの逆引きとして参考にして頂ければと思います。）

※Bootstrap4での記述となります。

要素と要素の間隔をあける

HTMLでWebページを作成していると要素と要素の間隔をあけたい！ってことがあるかと思います。

下記図のように要素と要素の間隔をあける方法を説明します。

要素同士の間隔をあける場合、色んな方法がります。

今回は要素の外側に余白を設定し間隔をあける方法を説明します。

余白を設定したい要素のclsssに「m方向-余白のサイズ」を設定する。

<img src="./images/item1.png" class="mr-3" />
<img src="./images/item2.png" />
左側の要素の右側に余白を入れて間隔をあける場合
<img src="./images/item1.png" />
<img src="./images/item2.png" class="ml-3" />
右側の要素の左側に余白を入れて間隔をあける場合
少し詳しく

mr-3・・・要素の右側に余白（マージン）を設定

ml-3・・・要素の左側に予約（マージン）を設定

「r」or「l」の部分を変更すると余白を入れる方向が変わります。

Bootstrapのクラス名
（m隣に記載するもの）		 例 説明
なし m-1 要素の上右下左に余白（マージン）を設定
t mt-1 要素の上側に予約（マージン）を設定
r mr-1 要素の右側に余白（マージン）を設定
b mb-1 要素の下側に余白（マージン）を設定
l ml-1 要素の左側に余白（マージン）を設定

「3」の部分を変更すると余白の幅が変わります。

※数字の部分は「1」～「5」が設定できます。

もっと詳しく

下記表示は、Bootstrapのクラス名とそのクラス名内で書かれているCSSの対応表です。

Bootstrapのクラス名 CSS
mr-3 margin-right: 1rem!important;
ml-3 margin-left: 1rem!important;

※余白の部分に関する部分を記載しています。

]]> https://himatoto.com/bootstrap2/feed/ 0 【Bootstrap】スマートフォンの時だけ改行する https://himatoto.com/bootstrap1/ https://himatoto.com/bootstrap1/#respond Sat, 18 Jul 2020 03:08:09 +0000 https://himatoto.com/?p=200 Bootstrapを利用して便利だと感じたことをまとめてます。

困った時に参考にして頂ければと思います。

（Bootstrapの逆引きとして参考にして頂ければと思います。）

※Bootstrap4での記述となります。

横のサイズ

bootstrapでは横のサイズを表す時にclass名の一部に「sm, md, lg, xl」を使用します。

それぞれのclass名が表しているサイズは下記の通りです。

サイズをあらわすclass サイズ
sm 576px以上
md 768px以上
lg 992px以上
xl 1200px以上

スマートフォン表示の時改行する

スマートフォン表示の時だけ改行させたい！

そんな場合のclass指定の方法について説明します。

brタグ（改行）のclassに「d-sm-none」を指定すると、スマートフォン表示時に改行が有効になります。

<p>あいうえお<br class="d-sm-none" />かきくけこ</p>
パソコン表示イメージ
スマートフォン表示イメージ
少し詳しく

d-sm-none・・・表示領域が576px以上の場合、改行タグが非表示になります。

「sm」の部分を「md」「lg」「xl」に変更することでそれぞれのサイズで表示・表示の調整ができます。

もっと詳しく

下記表示は、Bootstrapのクラス名とそのクラス名内で書かれているCSSの対応表です。

Bootstrapのクラス名 CSS
d-sm-none @media (min-width:576px){
  .d-sm-none{
    display:none!important
  }
}

※表示・表示に関係する部分を記載してます。

パソコン表示の時改行する

上記で記載した内容の逆のパターン。

パソコン表示の時だけ表示させたい！

そんな時のclassの指定の方法を説明します。

<p>あいうえお<br class="d-none d-lg-inline" />かきくけこ</p>

brタグ（改行）のclassに「d-none」と「d-lg-inline」を指定すると、パソコン表示時に改行が有効になります。

パソコン表示イメージ
スマートフォン表示イメージ
少し詳しく

d-none・・・非表示にします。

d-lg-inline・・・表示領域が992px以上の場合、表示（インライン表示）します。

「d-none」で指定したタグを非表示にします。「d-lg-inline」を使用することにより表示領域が992pxの時タグを表示させることができます。

「lg」の部分を「sm」「md」「xl」に変更することでそれぞれのサイズで表示・表示の調整ができます。

もっと詳しく

下記表示は、Bootstrapのクラス名とそのクラス名内で書かれているCSSの対応表です。

Bootstrapのクラス名 CSS
d-none display:none;
d-lg-inline
@media (min-width:992px){
  .d-lg-inline-block{
    display:inline-block!important
  }
}

※表示・表示に関係する部分を記載してます。

]]> https://himatoto.com/bootstrap1/feed/ 0