インターネットを有効活用しよう！【 BLUE LAKE 】 UMPCの紹介

テキストの両端を揃える方法

 

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>

 

 

 

 

マウスオーバーをCSSのみで表現。

 

JavaScriptを使用したマウスオーバーが一般的だが、CSSのみの方がシンプルにタグを記述できるのでお勧めです。

 

メンテナンス性も良いので使う価値が大きいと思います。

 

 

 

【準備】

ロールアウト・ロールオーバーの画像を用意する。一枚の画像で用意した方が画像表示位置の変更のみで表現出来るのでお勧めです。

 

 

【CSSの記述】

ナビゲーションの場合は画像一つ分のwidthを指定して、hover疑似クラスでポジションを指定する。

 

a#navi01 {
display:block;
width:100px;
height:30px;
text-indent:-9999px;
background:url(画像リンク先) no-repeat 0 0;
}

a#navi01:hover {
background:url(画像リンク先) no-repeat 0 -30px;
}

 

 

 

 

画像をマウスオーバーした祭に、「画像をロールオーバーさせたように見せる」方法

opacityプロバティを使えば可能です。 IE用にはfilterを使い対応しています。

 

【HTMLの記述】画像はあらかじめ用意しておく

<p>
<a href="リンク先"><img src="画像名" alt="画像名テキスト" height="画像の高さ" width="画像の幅" /></a>
</p>

 

【CSSの記述】img要素のborderは0に指定しておく

img {
border:0;

}

 

a:hover img {
opacity:0.8;
filter:alpha(opacity=80);
}