Bootstrap4 Bootstrap4でインラインフレーム（Iframe）をレスポンシブに埋め込む
Bootstrap4ではYoutube動画やインラインフレームをレスポンシブで表示するクラスが用意されています。 <div>でくくり「embed-responsive」とアスペクト比「embed-responsive-16by9」のクラスを...
フレームワーク
Bootstrap4 Bootstrap4 Bootstrap4で固定ヘッダーと固定フッターを利用する
レスポンシブでの固定ヘッダーや固定フッター、Bootstrap4では専用クラスを利用して簡単に実現できます。 最上部に固定（Fixed top） 最下部に固定（Fixed bottom） 最上部に達すると固定（Sticky top） スクロ...
フレームワーク Bootstrap（ブートストラップ）で表示崩れ＜スタイルシートを読み込まない＞
ここのところBootstrap（ブートストラップ）3、4で作成したサイトの表示崩れが出ています。ブラウザでの初回表示でBootstrap（ブートストラップ）のスタイルシートを読み込まないようで表示崩れ。 ブラウザを再読み込み（リロード）する...
Bootstrap4 レスポンシブで使うカルーセルスライダーなら「slick」が便利
レスポンシブで使うカルーセルスライダーならシンプルな「slick」がおすすめです。 ダウンロードサイト ※「Download Now」はリンク切れの場合は「View On Github」からダウンロードが可能。 今回はヤフーショッピングサイ...
Bootstrap4 ひとつでほとんど対応できるスライダー「Swiper.js」
スライダーはいろいろなものがありますが現在一番便利なのは「Swiper.js」、jQueryに依存しないといのが素晴らしい。 いろいろなフレームワークを使う現在jQueryに依存しないというのはトラブルが少なく、パラメータが豊富でシンプルな...
Bootstrap3 Bootstrap4、Bootstrap3でガター幅（余白/カラムの隙間）を調整する
Bootstrapの基本 カラム自体にmarginはなく余白はカラムのpaddingで指定されている。 カラムのpaddingは左右15px. Bootstrapのカラムとカラムの間の余白スペースは15px＋15pxで30pxになる。 カラ...
Bootstrap4 Bootstrap4でHTMLパーツの共有化＜ヘッダー、サイド、フッター＞
静的HTMLよく使われるjQueryでのHTMLパーツの共通化。インラインフレームよりも便利なのでよく利用します。 インラインフレームはボーダーやスクロール、高さなどいろいろ面倒なので好きではありません。 今回はBootstrapでこのパー...
Bootstrap4 Bootstrap4イメージの配置（Aligning images）の新設
イメージを左右に配置 イメージの中央揃え （.mx-auto.d-block 使用） イメージの中央揃え （.text(-{breakpoint})-center 使用） 【Bootstrap3.xとの変更箇所】 .float-none が...
Bootstrap4 Bootstrap4のフォームコントロール（Form controls）
Bootstrap3では.form-control ＋ .input-lg等でしたがBootstrapでは.form-control ＋.form-control-lgｎに変更された。 .input-{size} ⇒ .form-contr...
Bootstrap4 Bootstrap4モバイルフレンドリーの為の＜要素の表示/非表示＞
要素の表示/非表示 デバイスごとに要素を表示および非表示にするためのレスポンシブ表示クラスを使用できるようになりました。同じサイトの全く異なるバージョンを作成するのではなく、代わりに各画面サイズに応じて要素を非表示にする。 画面サイズ クラ...