横の配置ユーティリティ
概要(Overview) これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を行頭や行末に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。 配置の種類...
概要(Overview) これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を行頭や行末に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。 配置の種類...
テキスト選択(Text selection) ユーザーがコンテンツを操作するときのコンテンツの選択方法を変更。 選択の種類 全選択:.user-select-all(user-select: all) この段落は、ユーザーがクリックすると全て選択する。 自動選択(デフォルトの動作と同じ):.user-select-auto(user-select: auto) この段落は、デフォルトの選択動作...
リンクの不透明度(Link opacity) ユーティリティでリンクの rgba() カラー値のアルファの不透明度を変更。色の不透明度を変更するとコントラストが不十分なリンクになることがあるので注意。 不透明度の種類 リンクの不透明度10%:.link-opacity-10(--bs-link-opacity: 0.1) 透明なリンク リンクの不透明度25%:.link-opacity-25(...
※参考 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー(INSPIRATION) 使い方(How it works) レスポンシブ object-fit ユーティリティクラスで、object-fitプロパティの値を変更する。このプロパティは、アスペクト比を維持したり、できるだけ多くのスペースを取るために引き伸ばす...
opacity プロパティは、要素の不透明度レベルを設定。不透明度レベルは透明度レベルを表す。1 はまったく不透明で、0.5 は50%可視で、0 は完全に透明。 .opacity-{value} ユーティリティを使用して要素の opacity を設定。 不透明度の種類 .opacity-100(opacity: 1) 100% .opacity-75(opacity: .75) ...
はみ出し(Overflow) 4つのデフォルト値とクラスを使用して、その場で overflow プロパティを調整。これらのクラスはデフォルトではレスポンシブ対応はしていない。 はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります .overflow-auto(overflow: auto) これは、幅と高さが設定された要素に対して .overflow-auto を使用...
※固定位置のクラスはヘルパーに移動 位置の値(Position values) 位置ユーティリティクラスで迅速に設定できるが、レスポンシブには未対応。 設定例 指定なし<div class="position-static">...</div> 相対位置<div class="position-relative">...</div> 絶対位置<...
実例(Examples) Bootstrapではコンポーネントの影はデフォルトでは無効になっており、$enable-shadows で有効にもできるが、box-shadow ユーティリティクラスで影を追加や削除できる。.shadow-none と3つのデフォルトサイズ(対応する変数が一致)のサポートを含む。 影の種類 影なし:.shadow-none(box-shadow: none) 小さめ...
親要素を基準にする(Relative to the parent) 幅と高さのユーティリティは scss/_utilities.scss のユーティリティAPIで生成。デフォルトでは、values に 25%, 50%, 75%, 100%, auto がサポートされている。さまざまなユーティリティを生成する必要がある場合はこれらの値をご変更下さい。 割合幅の設定(Width) 幅の種類見やすいよ...
マージンとパディング(Margin and padding) 可変性に優れた margin や padding 値を、要素かその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、0.25rem から 3rem までのデフォルトのSassマップから構築。 CSS Gridレイアウトモジュールを...