■日記用テーブルの作り方

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

HOME | DIARY | PROFILE

【フォローする】【ログイン】

INDEX

【楽天ブログTips】

【ブログ用フリー素材】
・日記用テーブルの作り方
・日記用テンプレート#1
・日記用テンプレート#1
（黒バック用）
・写真掲載用黒テーブル
・日記用テンプレート#2
・白猫のテーブル
・タイトル画-Kitchen
・タイトル画-Ｂａｂｙ
・タイトル画-Cosme
・タイトル画-Classic
・タイトル画-Rabbit

【暮らし】

【お小遣い関連】

日記用テーブルの作り方

☆実はこの文章も今、枠（ボーダー）の見えないテーブルの中で書いています。このテーブルのＨＴＭＬ文は下記の通りです。

<center><table border="0" width="90%" cellspacing="0" style="line-height:140%;"><tr><td width="100%"><p><b><div align="center">
<big> 日記用テンプレートの作り方 </big></div></b><p><font size= "3" face= "ＭＳＰゴシック" > ☆実はこの文章も枠の見えないテーブルの中で書いています。 <br> このテーブルのＨＴＭＬ文は下記の通りです。
</font></p></td></tr></table></center>

★上の赤字で書かれている部分が枠なしテーブルの基本文です。

center はテーブルを中央に配置するタグ。

border="0" が枠（ボーダー）を見えなくする数値。ちなみに、このテーブルはその数値を"1"にして細い茶色の枠で囲んでいます。

width （幅の指定）に入れる数値は 530px といった数値の他に上記のように全体幅の 90% といった数値を入れることも出来ます。
日記の幅やフリーページの幅がいくつなのかを気にせずに％で指定できるので、こちらの方が楽かも知れませんね。

★この枠なしテーブルはボーダーで囲みたくはないけれど、文章のレイアウトを整えたい場合などに重宝します♪

★上記のテーブルには cellpadding (ボーダーから値で指定した分だけ文字位置を離す）指定はしていないので、文章がボーダーにぴったりくっついています。ただ、ボーダーが見えないので判らないだけなのです。ボーダーが見えないのですから、くっついていても構わないですよね。

でも、このテーブルのようにボーダーが見える場合、文字や画像がボーダーに接触しているとレイアウトとしては見にくいですから、ボーダーから少し離すよう cellpadding="10" と指定しています。

指定の方法は【cellspaceing="1" cellpadding="10" 】のように加えればＯＫです。

下図は画像を縮小したので少し見えにくいですが上のベージュ部分のＨＴＭＬ文を【エディタ】に貼り付けたものとそれを【プレビューを開く】で見たものです。テーブルの中で文章を書いているけれど枠は表示されていないでしょう？　

＊＊＊＊＊＊＊＊＊＊＊＊＊＊

さて、下記のテーブルは以前アップしたテンプレートの一部ですがそれぞれのタグとその値の説明の為、再掲載しました。

これを元にボーダーを変化させて
バリエーションを作る方法を説明します。

【　ここから画像をアップしたり文章を書きます。
縦の長さに制限はありません。】

下のベージュ背景内のＨＴＭＬ文をコピーして
日記の【エディタ】に貼り付けてご使用ください。

<center><table style="border:#339966 double 5px;" width="510" cellspacing="1"><tr><td style="border:#DC143C double 5px;padding:5px;"><div style="overflow:auto;width:480px;padding:10px;line-height:140%;">【　ここから画像をアップしたり文章を書きます。
縦の長さに制限はありません。
</div></td></tr></table></center>

★ＨＴＭＬ文の解説です。太字部分を下表で解説しています。
下記のＨＴＭＬ文は解説用に太字にしたりして余計なＨＴＭＬ文が追加されているので、コピーしないでくださいね(^^ゞ
<center><table style=" border:#339966 double 5px;" width="510" cellspacing="1"><tr><td style=" border:#DC143C double 5px;padding:5px ;"><div style="overflow:auto; width:480px; padding:10px; line-height:140%;">【　ここから画像をアップしたり文章を書きます。
縦の長さに制限はありません。
</div></td></tr></table></center>

★幅（width）の指定が２カ所ありますので間違えないようにしてくださいね。

border:#339966	外側ボーダーの色を指定しています。
double 5px	外側ボーダーのスタイルと太さの指定
width="510"	テーブル全体の幅を指定
cellspacing="1"	ボーダー間の幅を指定
width:480px	テーブル内側の幅を指定
padding:10px	テーブルボーダーと文字の間隔を指定
line-height:140%	文字行間の間隔を指定

■ボーダースタイルの値

★上の緑と赤の二重ボーダーで囲まれたテーブルは double という値を２回使用したものです。その他にも下記のような値があり、これらを適当に組み合わせ、色も様々に変えることで変化に富んだテーブルを作ることが出来ます。

none	ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
hidden	ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
solid	1本線で表示されます。
double	2本線で表示されます。
groove	立体的に窪んだ線で表示されます。
ridge	立体的に隆起した線で表示されます。
inset	上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset	上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
dashed	破線で表示されます。
dotted	点線で表示されます。