HTML

2022/12/25

Bootstrap4でプログレスバー（Progress）の作り方

Bootstrap4でプログレスバー（Progress）を作成する方法 Bootstrap4の機能であるProgress（プログレスバー）の使い方を紹介します。プログレスバー（Progress）の画面イメージプログレスバー（Progress）の画面イメージは次の通りです。プログレスバー（Progress）のHTML <!doctype html> <html lang="ja"> <head>  & ...

2022/12/25

Bootstrap4でツールチップ（Tooltips）を作成する方法

Bootstrap4でツールチップ（Tooltips）を作成する方法 popper.min.jsのダウンロードツールチップを使うには「popper.min.js」が必要です。 ■ CDNで指定 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrn ...

2022/12/25

popper.min.jsをダウンロードする方法

popper.min.jsをダウンロードする方法 Bootstrap4でツールチップ（Tooltips）を使うには「popper.min.js」が必要です。「popper.min.js」を使うにはCDNで指定するか、「popper.min.js」をダウンロードして使用するかのどちらかです。 ■ CDNで指定 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrit ...

2022/12/25

Bootstrap4でモーダル（Modal）画面を作成する方法

Bootstrap4でモーダル（Modal）表示を作成する方法モーダル（Modal）画面イメージモーダル（Modal）画面のHTML  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> モーダルを表示 </button>  <div clas ...

2022/12/25

Bootstrapでチェックボックスを作成する方法

Bootstrapでチェックボックス（checkbox）を作成する方法縦並びのチェックボックス縦並びチェックボックスは typeにcheckbox、classに .form-check-input を指定することで作成することができます。 ■ HTML表示イメージ ■ HTMLサンプル <div class="form-check-inline"> <div class="custom-control custom-checkbox"> <input class="cus ...

2022/12/25

Bootstrapで入力フォーム（input）を作成する方法

Bootstrapで入力フォームを作成する方法テキストボックステキストボックスは typeにtext、classに.form-control を指定することで作成することができます。 ■ HTML表示イメージ ■ HTMLサンプル <div class="form-group"> <label for="text">名前:</label> <input type="text" id="text" class="form-control"> ...

2022/12/25

Bootstrapでレスポンシブな画像を作成する

Bootstrapでレスポンシブな画像を作成する方法レスポンシブとはPC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることです。 HTMLの「img」タグにBootstrapで用意してある.img-fluidを指定することでレスポンシブな画像を作成することができます。レスポンシブ設定なし ※.img-fluid設定なしレスポンシブ設定をしていない場合、次のようにスマートフォンでは表示でデザインが崩れてしまいます。 ■ PCの表示 ...