W3.CSSテキスト
テキストの配置
w3-left- alignクラスとw3-right-alignクラスは、テキストの整列に使用されます。
左揃えのテキスト。
右揃えのテキスト。
例
<div class="w3-container w3-border w3-large">
<div
class="w3-left-align"><p>Left aligned text.</p></div>
<div
class="w3-right-align"><p>Right aligned text.</p></div>
</div>
センタリング要素
w3-centerクラスは、要素を中央揃えするために使用されます。
中心的なコンテンツ
中央揃えのテキスト。
例
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
ワイドテキスト
w3-wideクラスは、より広いテキストを指定します。
このテキストは正常です。
このテキストは幅が広いです。
例
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
テキストの不透明度
w3-opacityクラスは、すべての色で機能するように設計されています。
テキストの不透明度
テキストの不透明度
テキストの不透明度
テキストの不透明度
例
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
テキストシャドウ
CSS3 text-shadowプロパティを使用して、テキストに影またはぼかし効果を追加できます。
テキストシャドウ
テキストシャドウ
テキストシャドウ
テキストシャドウ
例
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
特殊効果
テキストの不透明度+太字
黄色のテキスト+影+太字
オレンジ色のテキスト+影+太字
例
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow"
style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
テキストシャドウは、IE9以前では機能しません。