検索サーチエンジンと動画リンク集byねっとねこ

横線の画像とテーブルタグを使ってノートの様にするタグとスタイルシート

ノートの様に横線上にテキスト文章を書くtableタグとスタイルシートline-heightを使う

ここで使用するスタイルシートは、WINDOWSの IE 6.0 7.0 にて
表示確認をしています。古いバージョンの IE や MAC専用の
ブラウザでの表示確認は しておりませんので、正しく表示され
るか?おかしな表示になるか?は ご自身で確認してください!

横線の画像を使いテーブルでノートを作るタグとスタイルシート

テキストや文章もノートに書いたように表示するとステキです。
横線の画像とテーブルを使ってノート表示にしてみます♪

使用する横線のimg画像は、この下の 3つです。
  青横線     赤横線     茶横線  ←良かったら、DLして使ってね♪

画像サイズは、それぞれ 幅:width=10 縦:height=21 です。
色の横線は、中央に引いています。WINDOWSのペイントで作成

青色の横線の画像をテーブルのバック画像に使うと
こんな感じで、何となくノートのページの様になります。

後は、この横線の間に、うまく文章を表示させれば OK!です。

ここに文章を書くと
こんなかんじかな?
横線の枠の中にテキストが表示されたら
成功です。 o(^-^o)(o^-^)o

これで、成功ってことで・・・

※ このタグは、下を参考にしてください♪
エリア内で 右クリック→ コピー

<table タグの width="300" は、テーブルの横幅です。
background="../img/line/aosen.gif" は、バック画像です。
それぞれ、任意に変更しましょう。

<td 内の、valign="top" は、上から表示させる時に使います。
style="padding:10px 8px 5px 15px;"
このスタイルシートは、テキストの
表示位置(セル内のマージン)を指定しています。
うまく、横線の間に表示されるように、この数値を入れました。

左から、10 は、トップマージンで、最初のテキストの書き出しを
今の位置に置くために、10の数値を入れてます。
次の、8 は、セル内の right左側のマージンです。
改行タグ <br> を入れない場合、8 分のマージンで改行されます。
次の、5 は、bottomマージンで、下のマージンです。
次の、15 は、leftマージンで、15 分空けてテキストが表示されます。

数値は、任意に変更しても OKですが、最初の topトップマージンの
数値は、きちんと横線の枠内に納まるように、しないとダメです。

次に、テキストは、<div タグで囲んで書いています。
<div style="font-size:11pt; line-height:145%;"> となってます。
ここで、スタイルを使って style= テキストを指定してます。
ここでの横線画像のサイズは、font-size:11pt; に合わせています。
line-height:145%; は、テキスト文章の行間の幅を指定するもので
ここでの横線画像には、line-height:145%; が、ピッタリです。

あくまで、ここで使っている、横線のバック画像のサイズに合わせて
フォントテキストのサイズと行間を決めているので、横線の画像サイズが 変われば、これらの数値も変わります。
使う横線のバック画像に合わせて、数値を変更しないとダメです。

例えば、フォントサイズを 10pt にしたい場合は、
横線のバック画像の縦幅も、少し小さくしないとダメです。
ここに文章を書くと
こんなかんじかな?
横線の枠の中にテキストが表示されたら
成功です。 o(^-^o)(o^-^)o

これで、成功ってことで・・・
フォントサイズ 10pt 用の横線用の画像は、この下です。
  青横線     赤横線     茶横線  ←良かったら、DLして使ってね♪
画像サイズは、それぞれ 幅:width=10 縦:height=19 です。

この場合の、divタグのスタイルシートは、以下のようになります。
<div style="font-size:10pt; line-height:140%;">

一度、表示させてから、line-height の 数値% を変更するようにして
うまく横線の枠内にテキストが表示されるようにします。

最後に、素材屋さんでノート用のテーブル素材をダウンロードして
横線を加えることによって、更に良くなったりします。

 
 
ここに文章を書くと
こんなかんじかな?
横線の枠の中にテキストが表示されたら
成功です。 o(^-^o)(o^-^)o

これで、成功ってことで・・・

 


おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング