フレームワーク

スポンサーリンク
Bootstrap4

Bootstrap4の<カード(Cards)で画像が縦に伸びてしまう>IE対策

IEでBootstrap4で使ったページのカード(card)画像が縦に伸びてしまう場合の対処方法 対処方法【1】 h-100クラスをimgタグに追加 対処方法【2】 d-blockクラスをcardクラスに追加 対処方法【3】 スタイルシート...
Bootstrap4

Bootstrap4の<タブナビゲーション>を理解する

基本 Bootstrap4のタブナビゲーションはボタン部分は基本ナビゲーション(Navs)と同じです、そこにコンテンツ部分へのリンクを貼ります。 ボタン部分 親要素に「nav」クラスと「nav-tabs」クラスを設定する。 子要素に「nav...
Bootstrap4

つい忘れてしまうメディアクエリ(Media Queries)の以下/以上と文字列によるCSSの適用

つい忘れてしまうメディアクエリ(Media Queries)の以下と以上や文字列によるCSSの適用 横幅を条件にしてCSSの適用 「max-width」: 表示領域の最大幅。この横幅以下の場合にのみ適用。 「mix-width」: 表示領域...
スポンサーリンク
Bootstrap4

Bootstrap4の<要素の配置>

ブロック要素 ブロック要素の左寄せ .float-left ブロック要素の右寄せ .float-right ブロック要素の中央揃え .d-block .mx-auto インライン要素 インライン要素の左寄せ .text-left インライン...
Bootstrap4

Bootstrap4の各カラムの隙間を無くす新設クラス「no-gutters」

カラム両脇の空白を無くす(no-gutters) Bootstrapの各カラムは左右に15pxの余白がデフォルト、この余白を0にしたい場合はBootstrap4では新クラス「.no-gutters」を使います。「row」にクラス追加するのが...
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で確認バージョン・・・単体で動きます
スポンサーリンク