Bootstrap

【Bootstrap】Navbarのハンバーガーメニューアイコンを変更

Bootstrapのnavbarで作成したレスポンシブなハンバーガーメニューのアイコンは、デフォルトで「bars」です。ナビゲーションバーのカスタマイズとして、アイコンをfontawsomeのアイコンに変更する方法を説明します。

  1. Bootstrapでレスポンシブなハンバーガーメニュー作成
  2. Fontawsomeでアイコン選択
  3. アイコン変更
続きを読む

【Bootstrap4】画面幅に応じてテーブルの特定列の表示・非表示をレスポンシブに切り替える

テーブル(表)を利用すると、データを見やすく表示することができますが、画面幅の狭いスマホだと横長のテーブルは見にくくなってしまいます。そこで、レスポンシブで特定列の表示・非表示を切り替えることができれば、スマホサイズでも見やすいテーブルに変更することができます。今回は、Bootstrapでテーブルを作成し、レスポンシブで特定列の表示・非表示を切り替える方法をサンプルコードを提示しながら説明します。

  1. Bootstrapでテーブル作成
  2. Bootstrapのdisplayクラスを利用して特定列を非表示にする
  3. 画面幅に応じて表示・非表示をレスポンシブに切り替え
続きを読む

【Bootstrap】Navbarを利用してレスポンシブなハンバーガーメニューを作成

画面幅によってヘッダー内のメニューがハンバーガーメニューに切り替わるECサイトをよく見かけます。今回は、Bootstrapに用意されているナビゲーションバーを使用し、レスポンシブなハンバーガーメニューを作成する方法をサンプルコードを提示しながら説明します。

  1. PCサイズ:ヘッダー内にメニュー表示
  2. レスポンシブなハンバーガーメニュー作成
続きを読む

【Bootstrap】タブメニューの基本的な作成方法|コピペ可能

タブを利用するとスッキリとしたレイアウトを作成することができ、表示内容が多い場合には有効なレイアウト方法です。Bootstrapを利用すると、簡単にタブレイアウトを再現することができます。基本的な利用方法をサンプルコードを提示しながら説明していきます。

  1. 下準備:タブ部分
  2. 下準備:コンテンツ部分
  3. タブで表示コンテンツを切り替え
続きを読む

【Bootstrap】アコーディオンを利用(メニュー・Table)| コピペ可能

アコーディオンとは、ターゲット要素をクリックし、非表示になっている要素が開閉するWebページなどの表示・操作要素のことです。ユーザーが必要な最低限の情報を表示し、詳細情報を見たい場合のみ任意で表示できるため、よく利用されるユーザーインターフェースの1つです。

今回はBootstrapを利用し、アコーディオンメニューの作成方法とアコーディオンTableの作成方法をサンプルコードを提示しながら説明します。

  1. メニュー作成(下準備)
  2. Bootstrapを利用してアコーディオンメニューに変更
  3. Table作成(下準備)
  4. Bootstrapを利用してTableをアコーディオンにする
続きを読む

【Bootstrap】モーダルウィンドウ作成|コピペ可能

Bootstrapを使用すると、CssやJavaScriptを利用しなくても簡単にモーダルウィンドウを作成することができます。今回は、Bootstrapを利用したモーダルウインドウの作成方法を、サンプルコードを提示しながら説明します。

  1. モーダルウインドウとは
  2. Bootstrapを利用せずにモーダルウィンドウを作成
  3. Bootstrapを利用してモーダルウィンドウを作成
続きを読む