まろりかモンスター

パソコンだいすき♡ 雑記ブログです!

Bootstrap

Bootstrap 4で固定ヘッダーと固定フッターを設定する簡単な方法

たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。 固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいも…

Bootstrap 4で要素の表示 ↔ 非表示を切り替える簡単な方法【HTMLだけで実現】

ブログやサイトで、リンクやボタンをクリックすると要素が表示したり非表示したり切り替わる部品を見たことありますよね。 今回はそんなリンクやボタンをクリックすると要素が表示 ↔ 非表示と切り替わる方法をBootstrap 4で簡単に実現する方法を紹介します。…

Bootstrapのbuttonの使い方をマスターするポイント【Boostrap 4】

WebフレームワークであるBootstrapを使うと簡単にボタンを設置することができます。 Bootstrapでは様々なスタイルのボタンが定義されているので使いこなせるようになればとても便利ですよ。 今回はBootstrapでボタンを設置する際のポイントを紹介します。 Bo…

【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる

Bootsrapをみなさん使いこなしているでしょうか。 今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。 たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。

Bootstrapでモーダルダイアログを超簡単に実装する方法

モーダルダイアログって知ってますか? 百聞は一見に如かずということで以下にモーダルダイアログが表示されるボタンを設置しました。 モーダルダイアログ例 タイトル × 内容・・・ 閉じる ボタン ボタンクリックで出てくる例のようなダイアログウィンドウの…

Bootstrapやメディアクエリでレスポンシブデザインが反映されない場合の対処方法

Bootstrapを利用していたりメディアクエリを利用して、端末サイズに応じたレスポンシブなデザインにされている人が多いと思います。 先日、Bootstrapでデバイスのサイズに応じたデザインにしていましたが、想定とは異なるデザインになってしまうことがありま…

Bootstrap 4が正式リリース(Bootstrap 3との違いは?)

Booststrap 4の安定版がついに正式リリースされました。2018年1月18日、Boostrap 4.0.0としてリリースされています。 Bootstrap 4の開発が始まったのが2015年後半なので、正式リリースまで約2年ほどかかりましたね。 Bootstrap 3よりも使いやすくなっていて…

Bootstrap 4を導入するための設定方法【2018年最新版】

BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。 また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブ…

はてなブログにBootstrap 4を設定する方法

BootstrapというCSSフレームワークを導入すれば、html上でクラスを指定するだけで、デバイスに応じたレスポンシブなデザインにすることができます。 今回はそのBootstrapをはてなブログに設定する方法についてレクチャーします。