メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

画像置換(Image replacement) v4.1.0廃止

画像置換クラスで背景画像のテキストを入れ替える。

.text-hide クラスまたはmixinを使用して、背景画像を持つ見出しなどの要素のテキスト内容を非表示にして画像に置換するのに便利。

設定例
HTML<h1 class="text-hide">任意の見出し</h1>
Sassでの設定// mixinとして使用
.heading {
	@include text-hide;
}

見出しタグのアクセシビリティとSEOの利点を維持するために .text-hide クラスを使用するが、テキストの代わりに background-image を利用可能。

見本

Bootstrap

設定例
<h1 class="text-hide" style="background: url('...') no-repeat; width: 50px; height: 50px;">Bootstrap</h1>

【設定】

  • 見出しの部分に .text-hide を入れる