|
■ line-height
行間の指定 <lenght> <number> <percentage>
文字を読みやすくするために、行間を少し大きく取ったりする事が出来ます。
このページのフォントサイズは 14px に指定されているのですが、行間を指定すると下のようになります。
line-height:20px この文章の行間は20pxです。
16px の文字に対して 20px の行を取っているので、
行間に余裕が出来て見やすくなります。
文字のサイズを途中で変更すると、
その文字のサイズに合わせて行間は変りません。
line-height:1.5 この文章の行間は1.5です。
16px の文字に対して1.5倍の行間になります。
文字のサイズを途中で変更すると、
その文字のサイズに合わせて行間も変ります。
line-height:150% この文章の行間は150%です。
16px の文字に対して150%の行間になります。
文字のサイズを途中で変更すると、
その文字のサイズに合わせて行間は変りません。
■ text-align
横の配置指定 left right center justify
text-align に text が付いているので文章などテキストだけの配置と思われる方もいるかもしれませんが？
イメージな色々なものの横配置に使います。
text-align:left
左寄せでノーマル状態と同じです。
text-align:center
真中に配置します。
text-align:right
右寄せで配置します。
■ vertical-align
縦の配置指定 top middle bottom text-top text-bottom
セーブルの高さを決めた時など、セル内には位置した内容は vertical-align:middle の状態で配置されますが、
上や下に配置したい時は vertical-align を使います。
vertical-align:top
上部に配置されます。
|
vertical-align:middle
中間に配置されます。
|
vertical-align:bottom
下部に配置されます。
|
■ float
回り込み left right none
画像の並びには1行しかテキストが入りませんが、それを画像の高さまで書けるようにするのが float です。
通常はこのように文章は下部に1行しか書けない。
float:left
画像が左に寄って、右側にテキストやテーブルなどを配置できる。
<img src="***.gif" style="float:left">
float:right
画像が右に寄って、右側にテキストやテーブルなどを配置できる。
<img src="***.gif" style="float:right">
回り込みの例
写真などの画像を貼り、その説明の文章を載せる時に有効です。
一般的には画像の横に div などのブロック体を回り込ませ文章を載せます。
<img src="image/fish1.png" style="float:left;margin-right:20px">
<div style="vertical-align:bottom;border:1px solid #0080ff;width:250px;padding:5px;">
このハタダテダイは海水魚で、形が似ているエンゼルフィッシュは淡水魚です。
珊瑚礁の海をイメージした時に連想される代表的な綺麗な魚です。</div>
このハタダテダイは海水魚で、形が似ているエンゼルフィッシュは淡水魚です。
珊瑚礁の海をイメージした時に連想される代表的な綺麗な魚です。
また float:left を div に入れれば、更に右に画像や div などのブロック体を配置できます。
■ clear
回り込みの解除 left right both none
画像の回り込みを解除する場合に使います。
回り込みしたテキストは、回り込みしたものと同じ高さまで書く事が出来ますが、
回り込みを解除したい時に、clear を使って回り込みを途中で終わらせる事が出来ます。
float:right の解除は clear:right / clear:both
float:left の解除は clear:left / clear:both
下の例はもう1行回り込み出来るのですが、<br style="clear:left"> を
「生息する地域」より前に使って回り込みを解除しています。
このハタダテダイは海水魚ですが、形が似ている
エンゼルフィッシュは淡水魚です。
生息する地域
暖かい水域沿岸に住み、日本でも西日本を中心に見られます。
|
