テキストを揃える方法
テキストの両端を揃える方法
WEBでテキストを揃える方法には、右揃え、左揃えが一般的ですが、テキストの両端を揃えたい場面も多々有ると思います。
そんな時はCSSで揃えましょう。
ただし、OperaとSafariでは日本語テキストには適用されないので注意してください。
【CSSの記述】
p {
text-align:justify;
text-justify:distribute-all-lines;
}
文章のマーカーをインデントさせる方法
注釈文などで「※」などを使った場合に、マーカーの部分をインデントさせて頭ひとつ飛び出したようにしたい場合もCSSのtext-indentで可能になります。
ポイントはpaddingでの余白指定です。
リストとしてマークアップしたテキストの一文字分が飛び出ます。
【CSSの記述】
ul .hedtop li {
list-style-type:none;
text-indent:-1em;
padding-left:1em;
}
【HTMLの記述】
<ul class="hedtop">
<li>※テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。</li>
<li>※テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。</li>
<li>※テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。</li>
</ul>
