ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2003/09/23

【日記の雛形Ⅴ】でみなさんに結構反響がありました。
　　　　やはりみなさん、素材屋さんでテーブルタグを使った枠を見ているのですね。

　　　　楽天の日記ではテーブルは使えませんから、「どうにか出来ないかな」と
　　　　思っていた人も多かったことと思います。

　　　　前回は、テキストボックスを囲む枠を四分割（上下左右の枠）にして見ました。
　　　　とりあえず、簡単に出来ますように！

ご質問がありました、・・というより・・要望ですかね？(^_-)-☆
　　　　８分割にした、雛形も載せてくれとのことでした。
　　　　上の枠と下の枠にコーナーのボックスを入れたいとのことです。

　　　　今日はそれをやってみましょう。(￣‥￣)=3 ﾌﾝ

　　　　まずは、どのようにボックスを並べるのかボックスに枠をつけて表示してみましょう。

一番外のぼっくす
左 上の真中のボックス枠 右
左枠テキストボックス
スクロールのテキストボックス

右枠
左 下の真中のボックスの枠 右

　　　　↑このようにボックスを並べてみます。

余談ですが、ボックスに画像を入れてテストしてみるときには、
　　　　各ボックスのborder-style:none;(枠を表示しない)　を　
　　　　border-style:ridge;(枠を表示する)にしてやってみると
　　　　ボックスの位置関係がよく分かりますよ。(*^^)v

此処に文字を入れます。
此処に文字を入れます。
此処に文字を入れます。
此処に文字を入れます。　
此処に文字を入れます。　　

此処に文字を入れます。
此処に文字を入れます。
此処に文字を入れます。
此処に文字を入れます。　
此処に文字を入れます。
此処に文字を入れます。
此処に文字を入れます。

　　　　こんな風になります。(*^^)v

　　　　ここで少し説明を入れておきますね。
　　　　各コーナーのボックスには画像が直接いれてありますが、
　　　　縦横のサイズが同じでないといけません。
　　　　左下角(20×20)　と　左上角(20×20)　はこのように、
　　　　画像自体のサイズが同じ大きさです。

　　　　右上角、右下角、も同様です。

　　　　残りの４つのボックスは、ボックスの中に背景画像として入れています。
　　　　例えば、上の枠の真中のボックスには　　という画像を背景画像に指定しています。
　　　　この画像の大きさは　50(幅)×20(高さ)となっていまして、両脇の画像の高さと同じです。
　　　　そして、真中のボックスの幅を４００に指定していますから、
　　　　横に８回（50×８回＝４００）リピートしてくれます。

　　　　下の枠の真中のボックスも同様です。

　　　　左右の枠には、という画像を背景画像に指定しています。
　　　　この画像の大きさは　20(幅)×50(高さ)になっています。
　　　　上下のコーナーの画像の幅２０と同じです。
　　　　そしてこの画像を左右のボックスの背景画像に指定しています。
　　　　左右のボックスの高さは４００にしていますから
　　　　縦に８回（50×８回＝４００）リピートしてくれます。

　　　　お判りでしょうか・・・・・・・・・・・・？お願い・・・わかって(-_-;)　

　　　　この下に書くタグを言葉で説明するとこのようになります。(￣‥￣)=3 ﾌﾝ

と勢いよくアップしましたが・・・また字数制限ですべてアップできません。
　　　　９月２２日にタグは載せますね。(-_-;)
　　　　この↓したです。

【プチ講座メニュー】は←こちらから！

お気に入りの記事を「いいね！」で応援しよう