文字に関する小技

●行間を空ける

※見本と説明を兼ねて、大きい文字でいきます。
　この見本の部分だけ、それ以外より行間が広くなっています。
　余白を<br>で作っているのではないので、ウィンドウをこのテーブルより小さくしても、レイアウトが崩れたりしません。
　試しにブラウザの横の長さを縮めてみて下さい。

　また、この一文は<br>タグで複数行に分けていますので、（ここで改行→）

同様にブラウザを縮めて上の行と比べて下さい。

<b style="line-height:150%;">
※見本と説明を兼ねて、大きい文字でいきます。
　この見本の...（省略）
</b>

　小説や解説など、長い文章がメインのサイトでとても便利です。
例では<b>タグにstyle属性を付けていますが、それ以外のタグにももちろん使えます。
<body>タグにつければページ全体に有効なので、テキストサイトならそっちをお勧め。
　なお100%だと通常になります。
よって用法としては間違っていますが、100%以下にすることで前の行と重ねたりできます。

●文字を重ねる

Cloud factory

● 浮雲工房 ●

<div style="font-size:48pt; color:#87ceed; font-weight:bold;">Cloud factory</div>
<div style="font-size:20pt; top:-30; left:150; font-weight:bold;">● 浮雲工房 ●</div>

　このスタイルはブロック要素のタグ（p、divなど）に有効です。
それ以外のタグだとうまくいったり駄目だったりする模様。（divに使うと確実です）
　topは前の行からの位置（上からの位置）、leftは左の字（画面の左端）からの位置をそれぞれ指定しています。
本来は余白（マージン）をとるためのスタイルだったmarginがこのように位置を決めるために使われたので、新たに増やしたスタイルらしいです。
　なので、うまくいかない場合は『top』を『margin-top』、『left』を『margin-left』にしてみてください。

> BACK