Bootstrap4 もっと見るボタンを付ける＜Bootstrap4＞
「続きを読む」 「もっと見る」ボタンのサンプルが下記サイトで紹介されていました。 参考 コピペでできる！CSSとhtmlのみで作る「続きを読む」の開閉ボタン Bootstrap4ではドグルボタンを使用してもできますが、こちらはCSSだけでい...
Bootstrap4
Bootstrap4 Bootstrap4 Bootstrapが使えない、使いたくない、そんな時に便利な＜CSS Grid＞
レスポンシブなページを作るときに便利な「Bootstrap」、簡単に短時間でページが作れます。 でもワードプレスのページを作成するときや簡単なレスポンシブなページを作るときなど「Bootstrap」が使えない、使いたくないときもあります。 ...
Bootstrap4 Bootstrap4のカードを隙間なく自動整列させる
ブロック要素を自動整列させるときの定番「Masonry」、Bootstrap4でも部分的につかうことはあったのですがBootstrap4を「カード」を「Masonry」で制御する方法を解説しているサイトがありましたので参考にページを作ってみ...
Bootstrap4 カウントダウンタイマー＜jQueryプラグイン「yycoutdown」＞
楽天のスーパーセールやお買い物マラソン、ヤフーショッピングなどのセールに使えるカウントダウンの付いたページ。 そんなページを使う時に便利なのがjQueryプラグイン「yycoutdown」。 jQueryカウントダウンタイマー【デザイン自由...
Bootstrap4 Bootstrap4で背景に画像を使うときの「スタイルシート（CSS）」
Bootstrap4で背景に画像を使う方法。 背景に画像を入れるCSSのおさらい background-image: url("画像へのパス"); ・・・ これは説明不要ですね。 background-repeat: 繰り返しの指定; ・・...
Bootstrap4 ブートストラップ4のHTMLがワードプレスで使えるテーマ＜WP Bootstrap 4＞
最近では静的なHTMLページ作成では「Bootstrap」や「Foundation」を利用することがほとんどです。楽天やヤフーショッピングでも「Bootstrap」を多用してます。 そんな過去に作成したページをワードプレスで再利用しやすいテ...
Bootstrap4 Bootstrap4の＜カード（Cards）で画像が縦に伸びてしまう＞IE対策
IEでBootstrap4で使ったページのカード（card）画像が縦に伸びてしまう場合の対処方法 対処方法【1】 h-100クラスをimgタグに追加 対処方法【2】 d-blockクラスをcardクラスに追加 対処方法【３】 スタイルシート...
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 インライン...