ホームページ キッチントップへ
Q&Aマップ | サイトマップ
フリー素材ホームページ HTML レシピホームページの配色ホームページ作成 環境ホームページ作成 ソフト
ホームページ キッチントップへ

-- 便せんに文字を書く --
文字サイズ、行間隔の応用


行間隔の設定を応用して便せんの上に文字を書くような効果をつけてみよう

 文字サイズと行間を決めよう

まずは文字サイズと行間隔を決めましょう。間にラインが入ることを考えて、行間隔はおおきくとります。
ここでは、文字サイズを12ピクセル、行間隔を22ピクセルにしました。

<span style="font-size:12px; line-height:22px;">ここに文字が入ります</span>



 背景画像の作成

←行間隔の22ピクセルに合わせて、高さ22ピクセルの背景画像を作ります。(bk.gif)


 テーブルの背景画像に指定

すべての属性を0にしたテーブルの背景画像に、作ったbk.gifを指定します。あとは行間隔22ピクセルで文字を流し込みます。文字サイズは多少調整しても大丈夫ですが、行間隔を22ピクセル以外に変更するときは、bk.gifの高さもそれに合わせて変えてあげないといけません。

<table border="0" cellspacing="0" cellpadding="0" background="bk.gif">
<tr>
<td>
<span style="font-size:12px; line-height:22px;">ここに文字が入ります</span> </td></tr></table>

背景画像のサンプル


| レシピトップへ |
| トップページへ |
-- CopyRight(C) ホームページキッチン 2006 Haruyo --