bootstrap
サイズ不明要素のposition:absolute;で親要素の角への配置方法
2019年12月31日
position:absolute;を用いて親要素の中央や角に位置指定する場合、子要素の「サイズ(幅、高さ)」がわかっていれば問題はありません。 一方、子要素のサイズが可変で固定値を指定することが難しい場合はtransf...
【Bootstrap・JS】カルーセルで高さを合わせる
2019年12月2日
Bootstrapのカルーセル(フェードイン)実行時に、それぞれのスライドの高さがまばらだと、フェードトランジション終わってから高さが付くので前のスライドの高さに依存する。 なのでJSに と追加してみる。...
【Bootstrap】Like / Dislikeをトグルボタンで実装する
2019年10月27日
コメントやアンケートで、該当項目を「 好き 」「 嫌い 」、「 いいね! 」「 どうだろう... 」のような二者択一の選択ラジオボタンをアイコン付きボタンをBootstrapで実装します。 ラジオボタンをトグルボタンとし...
★アイコンのラジオフォームの横にラベルを表示する方法
2019年8月7日
先日Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法で評価レビューで使う★アイコンのラジオフォームを作成しましたが、ここに選択した★数に応じて横にラベルを表示する方法を試してみました。 と言っ...
Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法
2019年8月7日
Amazonや楽天など、多くのショッピングサイトで実装されている★数を選択して評価するフォーム。 複数の選択肢から1つの値を選択するフォームとしては、セレクトフォームとラジオフォームがありますが、今回はラジオフォームとF...
Bootstrapでメガメニュー表示するCSS設定
2019年7月18日
Bootstrapの標準機能に少しスタイルシートをカスタマイズすることで、簡単にメガメニューを実装することが出来ます。 元々Bootstrapにはメニューアイテムをクリックすると、ドロップダウンとしてサブメニューが表示さ...
Bootstrapでモーダルウィンドウを画面中央でズーム表示するCSS設定
2019年7月16日
Bootstrapのモーダルはボタンクリック時に画面上部からスライド+フェードで表示されます。 これをLightboxのように画面中央からズームしながら表示するようにCSSに追記します。 CSSの設定 transform...
BootstrapのPopoverにテーマカラーを反映させるSASS設定
2019年4月26日
Bootstrapで吹き出しを作ることを想定した場合、既にBootstrapの中で設定されているpopoverのスタイルを継承して使用するのが手軽だと思います。 PopoverはJSと連携して、対象ボタンを押すと吹き出し...
BootstrapのSASSコンパイル時にはブラウザーリストも確認
2019年4月25日
これまで特に何も考えず、Visual Studio Code + Live Sass Compilerを使用して、BootstrapのSASSファイルを編集してCSSにコンパイルしていました。 で、Bootstrap 4...
WordPressのログイン画面をカスタマイズしてみました。
2019年2月2日
せっかくWordPressのテーマを作成しているのだから、ログイン画面も少し手を加えてみました。 参考にしたのはこちら。 カスタマイズ ・背景色をbootstrapのprimaryカラーを利用 ・ロゴをテーマオプションを...