Bootstrap4 Bootstrap4に用意された空白ユーティリティ
Bootstrapまでは、個別に「mt20」などのクラスを追加して空白を調整していましたが、Bootstrap4では簡潔なレスポンシブマージンとパディングユーティリティクラスが用意されました。 マージン（Margin） ビューポートサイズ ...
フレームワーク
Bootstrap4 Bootstrap4 Bootstrap4のグローバルナビ Navbarで使われるクラス
Bootstrapで用意されているナビゲーションバー、Bootstrap４ではdiv.container-fluid, div.navbar-header の設定は不要になりました。 基本・・・全幅 基本・・・全幅だけどメニューは「cont...
Bootstrap4 Bootstrap4、Bootstrap3からの主な変更点と利用頻度の高いクラス
カラム Bootstrap3.xとの変更箇所 ブレークポイント：ポイントが3つから4つに増加（定義済みクラスの種類は4つから5つに増加） 極小サイズは、全てのサイズで対応可能なので、.col-xs- から .col- に名称変更 モバイルサ...
Foundation Foundation6「CDN」の基本タグ
Foundation6.4.3の場合 スタイルシートとJSの読み込み※integrity属性入り サンプルHTML※integrity属性入り ※組み込むプログラムによってはjqueryのバージョンの変更が必要な場合があります。
Bootstrap4 Bootstrap4「CDN」の基本タグ
Bootstrap4.0.0の場合 <head>内に下記を追加 </body>の直前に下記を追加 サンプルHTML※integrity属性入り ※Font Awesome 最新と旧バージョン ※4.00のJSファイル「bundle.min....
Foundation FoundationとBootstrapの違い
はじめに使っていたフレームワークの「Foundation」、この頃「Bootstrap」が多くなってしまって忘れがち。 2つのフレームワークの大きな違いは”row”の使い方 「Foundation」の”row”は隙間を空ける、「Bootst...
Bootstrap3 Bootstrap３に「レスポンシブ対応する画像（背景）を入れる」
Foundationには不要ですがBootstrapでは画像にクラス.img-responsiveが必要。 背景画像では通常のCSSで行う。
Bootstrap3 Bootstrap３に「Swiperスライダー」
<head>内に下記を追加 </body>の直前に下記を追加 </body>の直前にSwiperの実行scriptを追加 <body>内HTML
Bootstrap3 Bootstrap３に「レスポンシブな埋め込み」
iframe要素、embed要素、video要素、object要素で使える。 利用方法 class属性にembed-responsiveを指定したdiv要素を用意する。 16：9のアスペクト比の場合、１のdiv要素のclass属性にembe...
Bootstrap3 Bootstrap３「CDN」の基本タグ
Bootstrap3.3.7の場合 <head>内に下記を追加 </body>の直前に下記を追加 サンプルHTML