フレームワーク

スポンサーリンク
Bootstrap4

Bootstrap4でインラインフレーム(Iframe)をレスポンシブに埋め込む

Bootstrap4ではYoutube動画やインラインフレームをレスポンシブで表示するクラスが用意されています。 <div>でくくり「embed-responsive」とアスペクト比「embed-responsive-16by9」のクラスを...
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-lgnに変更された。 .input-{size} ⇒ .form-contr...
Bootstrap4

Bootstrap4モバイルフレンドリーの為の<要素の表示/非表示>

要素の表示/非表示 デバイスごとに要素を表示および非表示にするためのレスポンシブ表示クラスを使用できるようになりました。同じサイトの全く異なるバージョンを作成するのではなく、代わりに各画面サイズに応じて要素を非表示にする。 画面サイズ クラ...
スポンサーリンク