ページ
- 109件ヒットしました。全11ページ中10ページ目を表示しています。
クリアフィックス
.clearfix を親要素に追加することでfloatを簡単にクリアすることが可能。mixinとしても使用可能。 設定例 コピー<div class="clearfix"></div> Sassでの設定// 自身をmixin @mixin clearfix() { &::after { display: block; content: ""; clear: b...
閉じるアイコンボタン
aria-label には、必ずスクリーンリーダー用のテキストを入れること。 見本 × 設定例 ※ボタン部分のみの記載 <button type="button" class="close" aria-label="閉じる"> <span aria-hidden="true">×</span> </button>...
カラーユーティリティ
特異性の扱い 各色のクラスは、別のセレクタの特異性のために適用できないことがある。場合によっては、要素のコンテンツを <div> で囲むようにすれば十分。 文字色（Color）v4.1.0一部追加 文字色の種類 各文字色のクラスは、提供されたホバーとフォーカス状態のアンカーでもうまく機能する。.text-white と .text-muted クラスでは下線以外のリンクのスタ...
表示ユーティリティ
※v3のレスポンシブ・ユーティリティより変更。 使い方（How it works） レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更。Bootstrapでは意図的に表示可能なすべての値のサブセットのみをサポート。クラスは、必要に応じてさまざまなエフェクトが組み合わせ可能。 記法について（Notation）v4.0.0クラス名変更、一部追加 xs か...
動画の埋め込み
概要（About） ルールは <iframe>, <embed>, <video>, <object> 要素に直接適用される。別の属性のスタイルに合わせる場合は、オプションで明示的な子孫クラス .embed-responsive-item を使用。 注意： <iframe> に frameborder="0" を入れる必要はない。 &n...
Flexユーティリティ
※参考 CSS flexible box の利用（MDN日本語版） flex レイアウト詳説〜Flex Box Layout（IT工房） Flex動作を有効にする（Enable flex behaviors） 表示ユーティリティを適用してFlexコンテナを作成し、直接の子要素をFlexアイテムに変換。Flexコンテナとアイテムは、追加のFlexプロパティを使用してさらに変更...
横の配置ユーティリティ
概要（Overview） これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を左や右に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。 ...
画像置換
警告 text-hide() 関連のクラスとmixinはv4.1.0から廃止。v5で完全に削除。 .text-hide クラスまたはmixinを使用して、背景画像を持つ見出しなどの要素のテキスト内容を非表示にして画像に置換するのに便利。 設定例 HTMLコピー<h1 class="text-hide">任意の見出し</h1> Sassでの設定// mixinとして...
相互作用ユーティリティ
テキスト選択（Text selection） ユーザーがコンテンツを操作するときのコンテンツの選択方法を変更。InternetExplorerとLegacyEdgeは user-select の all 値をサポートしていないため、.user-select-all は両方のブラウザともサポートされていないので注意。 見本 ●.user-select-all (user-select: all;...
はみ出しユーティリティ
必要最小限の overflow 機能（要素のはみ出し部分の表示）はデフォルトで2つの値（auto,hidden）に対して提供され、レスポンシブはしない。 見本 ●.overflow-auto (overflow: auto;) これは、幅と高さが設定された要素に対して .overflow-auto を使用する例。 設計上、このコンテンツは垂直方向にスクロールする。 ●.overfl...