Bootstrap4 Bootstrap4の各カラムの隙間を無くす新設クラス「no-gutters」
カラム両脇の空白を無くす（no-gutters） Bootstrapの各カラムは左右に15pxの余白がデフォルト、この余白を0にしたい場合はBootstrap4では新クラス「.no-gutters」を使います。「row」にクラス追加するのが...
Bootstrap4
Bootstrap4 Bootstrap3 Bootstrapのナビゲーションバー（Navbar）をスクロールで出したい
Bootstrapのナビゲーションバー（Navbar）は 上に固定（標準） ・・・ 特に追加設定する必要なし（Bootstrap3では「.navbar-static-top」が必要） 最上部に固定 ・・・ 「.fixed-top」（Boot...
Bootstrap4 スライダー「Slider Pro」がIE（Internet Explorer）で動かない
万能スライダー「Slider Pro」、動きも安定しているのでよく使います。今回もBootstrap4に組み込んだんですが IE（Internet Explorer）で動かないとの連絡が・・・・。 「Slider Pro」はCDNでの読み込...
Bootstrap4 スクロールで要素をふわっと表示させる「jquery.inview.js」ブートストラップ4CDNバージョン
スクロールで要素をアニメーションさせ、アニメーション設定もCSSで簡単にできる「jquery.inview.js」、レスポンシブの1枚ページの利用頻度が高くなってきているので便利なJSです。 でもちょっと「jquery」のバージョンなどの理...
Bootstrap4 アイフォン（iPhone）のiframe（インラインフレーム）と相性が良かったスライダー＜Flickity＞
スライダーをインラインフレームで読み込む、そんなページでアイフォンで不具合が・・・・・ アイフォンとインラインフレームはとても相性が良くない、悩みの種ですね。「Netscape Navigator」全盛期にはマイクロソフトの「IE」の我がま...
Bootstrap4 Bootstrap4で設置が簡単なスライダーは標準のスライダー
Bootstrap4に用意されているスライダー、シンプルなスライダーで良ければ設置が簡単。 基本タグ CDNで確認バージョン・・・単体で動きます
Bootstrap4 Bootstrap4でインラインフレーム（Iframe）をレスポンシブに埋め込む
Bootstrap4ではYoutube動画やインラインフレームをレスポンシブで表示するクラスが用意されています。 <div>でくくり「embed-responsive」とアスペクト比「embed-responsive-16by9」のクラスを...
Bootstrap4 Bootstrap4で固定ヘッダーと固定フッターを利用する
レスポンシブでの固定ヘッダーや固定フッター、Bootstrap4では専用クラスを利用して簡単に実現できます。 最上部に固定（Fixed top） 最下部に固定（Fixed bottom） 最上部に達すると固定（Sticky top） スクロ...
Bootstrap4 レスポンシブで使うカルーセルスライダーなら「slick」が便利
レスポンシブで使うカルーセルスライダーならシンプルな「slick」がおすすめです。 ダウンロードサイト ※「Download Now」はリンク切れの場合は「View On Github」からダウンロードが可能。 今回はヤフーショッピングサイ...
Bootstrap4 ひとつでほとんど対応できるスライダー「Swiper.js」
スライダーはいろいろなものがありますが現在一番便利なのは「Swiper.js」、jQueryに依存しないといのが素晴らしい。 いろいろなフレームワークを使う現在jQueryに依存しないというのはトラブルが少なく、パラメータが豊富でシンプルな...