Bootstrap

2019/9/1

Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説

ここでは、Bootstrap4で用意されているTabsを利用した、タブメニューの作り方を解説します。 https://webst8.com/blog/wp-content/uploads/2019/06/bootstrap4-tabs.mp4 タブで簡単なカテゴリ分け・切り替えしたいときに使えそうですね！合わせて読みたい記事 BootStrap4の基本・環境設定から実施したい方はこちらの記事をご覧ください。 Bootstrap4の使い方ブートスト ...

Bootstrap

2019/9/1

Bootstrap4 tooltip(ツールチップ)の使い方を徹底解説

ここでは、Bootstrap4で用意されているTooltip(ツールチップ)を利用した、ヒントや注釈表示の作り方を解説します。 https://webst8.com/blog/wp-content/uploads/2019/06/bootstrap4-tooltip-0.mp4 簡単なヘルプ・ヒントを表示するときに使えそうですね。合わせて読みたい記事 BootStrap4の基本・環境設定から実施したい方はこちらの記事をご覧ください。 Bootstr ...

Bootstrap

2019/9/1

Bootstrap4 Popover(ポップオーバー)の使い方を徹底解説

ここでは、Bootstrap4で用意されているPopover(ポップオーバー)を利用した、ヒントや注釈表示の作り方を解説します。 https://webst8.com/blog/wp-content/uploads/2019/06/bootstrap4-popover.mp4 簡単なヘルプ・ヒントを表示するときに使えそうですね。合わせて読みたい記事 BootStrap4の基本・環境設定から実施したい方はこちらの記事をご覧ください。 Bootstra ...

Bootstrap

2019/9/1

Bootstrap4 Carousel(カルーセル)によるスライドショーの使い方を徹底解説

ここでは、Bootstrap4で利用できるCarousel(カルーセル)によるスライドショーの作り方を解説します。 https://webst8.com/blog/wp-content/uploads/2019/05/bootstrap4-caroucel-demo.mp4 合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！カルーセル(Carousel)とはカルーセルとは、回転木馬という意味の英単語で ...

Bootstrap

2020/1/21

Bootstrap4 Pagination(ページネーション)でページ送りを作るやり方を徹底解説

ここではBootstrap4で利用できるPagination(ページネーション)の使い方を説明していきます。 https://webst8.com/blog/wp-content/uploads/2019/05/pagination-example.mp4 合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ Pagination(ページネーション)の基本ページネーションとは、一つのキーワードで複数のペー ...

Bootstrap

2019/9/1

Bootstrap4 Collapse(コラップス)の使い方・コンテンツを開閉するやり方を徹底解説

Bootstrap4で利用できるCollapse(コラップス)を利用してコンテンツを開閉するやり方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/05/bootstrap4-collapse.mp4 よくある質問とかで質問(Question)をクリックしたら回答(Answer)が見えるシーンとかで使えそうですね。合わせて読みたい記事 BootStrapの基本・環境設定から実施したい方 ...

Bootstrap

2020/1/21

Bootstrap4 ナビゲーションバー(Navbar)の使い方を徹底解説

ここではBootstrap4でのNavbar(ナビゲーションバー)の使い方を説明していきます。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ナビゲーションバー(Navbar)の基本的な使い方まずは、ナビゲーションバー(Navbar)の基本的な使い方から説明します。 ■表示例 https://webst8.com/blog/wp-content/uploads/2019/05/bootstrap4 ...

Bootstrap

2020/1/21

Bootstrap4 Dropdown(ドロップダウン)の使い方を徹底解説

Bootstrap4で利用できるDropdown(ドロップダウン)の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/05/bootstrap4-dropdown.mp4 合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ドロップダウンメニューの基本的な使い方 Bootstrapのでは下記のようなドロップダウンメニューを利用することが ...

Bootstrap

2020/1/21

Bootstrap4 フォーム(form)クラスの使い方を徹底解説

Bootstrap4で利用できるform(フォーム)の使い方をご紹介します。一部追加されたクラスなどありますが、formの基本的な使い方はbootstrap3とほぼ同じです。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ Bootstrap4でのフォーム(form)の基本的な使い方基本的なフォーム部品の使い方フォームを利用する場合の基本的な使い方としては、フォーム部品(input ...

Bootstrap

2020/1/21

Bootstrap4 displayクラスの使い方を徹底解説

Bootstrap4で利用できるディスプレイ(display)の使い方をご紹介します。displayを利用すると、ブレークポイントに応じて表示・非表示の切り替えのほか、色々なdisplay設定をすることができます。 https://webst8.com/blog/wp-content/uploads/2019/04/bootstrap4-display-block.mp4 合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解 ...

Bootstrap

2020/1/21

Bootstrap4 Button(ボタン)の使い方を徹底解説

Bootstrap4で利用できるボタンクラスの使い方をご紹介します。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ Bootstrap3→4に変わってからの主な変更点 Bootstrap3→4になり、廃止・変更されたクラスがいくつかありますので注意して利用しましょう。 button-outline-{color}が登場した button-blockが登場した button-{color}の種類が増え ...

Bootstrap

2020/1/21

Bootstrap4 IMG画像の使い方を徹底解説

Bootstrap4で利用できる画像系の使い方をご紹介します。サムネイルや角丸・円などを設定することができます。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ Bootstrap3→4に変わってからの主な変更点 Bootstrap3→4になり、廃止・変更されたクラスがいくつかありますので注意して利用しましょう。 (旧)Bootstrap3 (新)Bootstrap4 レスポンシブ img-responsive i ...

Bootstrap

2020/1/21

Bootstrap4 Text ユーティリティの使い方を徹底解説

Bootstrap4で用意されているTextユーティリティを利用すれば、文字の整列、折り返し、太さなどを設定できます。ここでは、利用できるTextユーティリティの使い方を説明していきます。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！ Textユーティリティの基本左寄せ・右寄せ・中央揃えを設定 text-{位置} 左寄せ・右寄せ・中央揃えを設定するためには、text-{位置}を利用します。左寄せはtext-le ...

Bootstrap

2020/1/21

Bootstrap4 Border(ボーダー)の使い方を徹底解説

ここではBootstrap4で利用できるBorder「ボーダー」ユーティリティーの使い方を説明していきます。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！枠線 Borderの基本 borderはボックス内の枠線を指定する際に使用するプロパティです。枠線・枠線の色・角丸に設定することができます。デフォルトでは、ボーダー色は薄いグレー(#dee2e6)・1pxの太さの実線で定義されています。クラス ...

Bootstrap

2020/1/21

Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説

ここではBootstrap4系でのフレックスボックス(flex)の使い方を説明していきます。合わせて読みたい記事 Bootstrap4の導入から基本的な使い方については「Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！」をご参照ください。 Flexユーティリティー Flexユーティリティーとは Bootstrap4から新しく実装されたFlexユーティリティは、cssのflexbox（フレックスボックス）と呼ばれるレイアウト ...

Bootstrap

2020/1/21

Bootstrap4 新コンポーネント「Card」の使い方を徹底解説

ここではBootstrap4.0から新しく登場した、カードコンポーネント「Card」の使い方を説明していきます。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！カード「Card」コンポーネントとは Bootstrap3で利用できた「wells」「thumbnails」「panels」の3つのコンポーネントがBootstrap4では廃止となりました。代わりに、Bootstrap4ではCardという新 ...

Bootstrap

2020/1/21

Bootstrap4 テーブル(table)クラスの使い方を徹底解説

ここではBootstrap4系でのテーブル(table)クラスの使い方を説明していきます。合わせて読みたい記事 Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！テーブルtableに関するBootstrapのクラス BootStrapのテーブルスタイルを適用するには、table要素に対してclass="table"という形式で指定します。table-xxxxxを追加してオプションをつけることができます。 ...

Bootstrap

2020/4/20

Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の基本について説明し、バージョン4系の導入の仕方とグリッドシステムの基本、およびBootstrapバージョン3系との違いについて解説していきます。 Bootstrap3を使っていたんですが、Bootstrap4とどういった点が違うんでしょうか？基本的には同じですが、新しく導入された機能や廃止された機能もあります。今回は、Bootstrap4の設定方法とグリッドシステムについて説 ...

Bootstrap

2019/9/1

カルーセル Carouselの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「カルーセル」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/carousel.mp4 スライドショーが作れるんですね。関連 Boo ...

Bootstrap

2019/9/1

コラップス collapseの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「コラップス(collapse)」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/collapse-a.mp4 よくある質問とかで質問(Questi ...

Bootstrap

2019/9/1

状態を保持するボタンの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「ボタン(button.js)」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/button-basic.mp4 普通のボタンと違って、ボタンを押し ...

Bootstrap

2019/9/1

アラートメッセージ alertの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「アラートメッセージ」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/alert.mp4 警告メッセージとかで使えそうですね。 &nb ...

Bootstrap

2019/9/1

ポップオーバー Popoverの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「ポップオーバー」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/popover.mp4 簡単なヘルプ・ヒントを表示するときに使えそうですね。 &n ...

Bootstrap

2019/9/1

ツールチップ tooltipの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「ツールチップ」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/tooltips.mp4 簡単なヘルプ・ヒントを表示するときに使えそうですね。 &n ...

Bootstrap

2019/9/1

タブメニュー Tabの使い方 BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「タブ」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/tab-menu.mp4 カテゴリ別にタブで分けてコンテンツを見せる場合に使えそうですね & ...

Bootstrap

2019/9/1

スクロールスパイ Scrollspyの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「スクロールスパイ」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/scrollspy.mp4 ナビゲーションと連動して自分が今どこを見ているかわか ...

Bootstrap

2019/9/1

モーダルウインドウ Modalsの使い方 | BootStrap 3.3.7 のJavascript

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「モーダル」の使い方をご紹介します。 https://webst8.com/blog/wp-content/uploads/2019/02/modal-window.mp4 モーダルは、サイト訪問者に必ず内容を確認して欲しい注意 ...

Bootstrap

2020/4/20

Bootstrapの使い方導入方法と基本・レスポンシブデザインを徹底解説

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の使い方やよく使うクラスについて解説していきます。「グリッドシステム」とか「レスポンシブデザイン」とか「フレームワーク」とか「ブートストラップ」とか冒頭でいきなり専門用語がたくさんでてきましたね。。ちょっとずつ説明していくので安心してください笑最初は少し覚えることが多いですが、一旦覚えたらスマホ用のWebページも簡単に作っていくことができますよ！頑張ってみます。ちょっと難し ...