Bootstrap
たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。 固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいも…
ブログやサイトで、リンクやボタンをクリックすると要素が表示したり非表示したり切り替わる部品を見たことありますよね。 今回はそんなリンクやボタンをクリックすると要素が表示 ↔ 非表示と切り替わる方法をBootstrap 4で簡単に実現する方法を紹介します。…
WebフレームワークであるBootstrapを使うと簡単にボタンを設置することができます。 Bootstrapでは様々なスタイルのボタンが定義されているので使いこなせるようになればとても便利ですよ。 今回はBootstrapでボタンを設置する際のポイントを紹介します。 Bo…
Bootsrapをみなさん使いこなしているでしょうか。 今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。 たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。
モーダルダイアログって知ってますか? 百聞は一見に如かずということで以下にモーダルダイアログが表示されるボタンを設置しました。 モーダルダイアログ例 タイトル × 内容・・・ 閉じる ボタン ボタンクリックで出てくる例のようなダイアログウィンドウの…
Bootstrapを利用していたりメディアクエリを利用して、端末サイズに応じたレスポンシブなデザインにされている人が多いと思います。 先日、Bootstrapでデバイスのサイズに応じたデザインにしていましたが、想定とは異なるデザインになってしまうことがありま…
Booststrap 4の安定版がついに正式リリースされました。2018年1月18日、Boostrap 4.0.0としてリリースされています。 Bootstrap 4の開発が始まったのが2015年後半なので、正式リリースまで約2年ほどかかりましたね。 Bootstrap 3よりも使いやすくなっていて…
BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。 また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブ…
BootstrapというCSSフレームワークを導入すれば、html上でクラスを指定するだけで、デバイスに応じたレスポンシブなデザインにすることができます。 今回はそのBootstrapをはてなブログに設定する方法についてレクチャーします。