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

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2003/08/31

楽天は、日記のサイトで有名です。
みなさんも日記にはいろいろな凝った趣向をしていますね。

この【プチ講座】でちょっと前に「日記でボックスを使う」というのを紹介したと思います。
ボックスをいくつか使って、色々なレイアウトをしてみましょう。
まずは、画像の横にテキストを廻りこませてみましょう。
これも、ボックスを２個横に並べますと簡単に出来ます。
画像の説明なんかに使うといいと思います。(*^^)v

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

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

これのタグは↓これです。　

<center style="background-image: url(～背景画像のＵＲＬ～);border-style:double;width:90%;">

<IMG SRC="～画像のＵＲＬ～"> 
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。　
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">



<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。　
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;"> <IMG SRC="～画像のＵＲＬ～">

<a href=></a></center>　

上のボックスはこのように配置されています。

黒いタグが全体のボックスです。
赤い部分が左上の画像のボックスです。
ピンクの部分が右上のテキストボックスです。
青い部分が左下のテキストボックスです。
緑が右下の画像を入れているボックスです。

では次にテキストボックスをスクロールできるボックスにしてみましょう。
スクロールボックスにすると、何行でもテキストが書きこめます。

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

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

↑これのタグを書いてみましょう。

<center style="background-image: url(～背景画像のＵＲＬ～);border-style:double;width: 90%;">

<IMG SRC="～画像のＵＲＬ～">
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。　
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">


<B style="border-style: solid;border-width:1;background:pink; width: 45%; height:200;overflow-y:scroll;overflow-x:auto;scrollbar-base-color:pink;
scrollbar-arrow-color:black;scrollbar-face-color:pink; scrollbar-track-color:white;">
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。　
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">此処に文字を入れます。
<HR style="border-style: dashed; height:1;border-color:blue; width: 90%;">
<IMG SRC="～画像のＵＲＬ～">

<a href=></a></center>

簡単な日記でのボックスの使い方をやってみました。
ではでは・・・みなさんがんばって下さい。(*^^)v

もっと説明を入れたかったのですが、５０００字一杯です。(-_-;)

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