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

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2004/01/18

【日記で使う！ボックスのお勉強　3(幅と高さの特性)】

(13)

カテゴリ：カテゴリ未分類

幅と高さがどのように影響を受けて変化するか、
　　　　特性についてお話しました。
　　　　ボックスの幅は大きさを指定しますと、テキストが自然に改行しましたが、
　　　　高さはテキストによって広げられましたね。

　　　　では！画像を入れた場合はどうでしょうか？

　　　width=１５０

　　　height=１５０

この幅１５０×高さ１５０のボックスに元画像の大きさが、幅２７０×高さ１８４の画像を入れてみましょう。

それが↓このボックスです。ボックスも幅２７０×高１８４になります。

　　　　お判りでしょうか！画像をボックスに入れますと、ボックスより大きな画像では
　　　　いくらボックスの幅と高さを指定しても、画像の大きさにボックスが押し広げられてしまいます。

　　　　この辺をよく理解しておくとボックスに画像を入れたとき、戸惑う事がありません。

<center>
<div style="border-style:solid;border-color:blue;border-width:1px;width: 80%;height:100px;background-color:burlywood;background-image:url(～背景画像のＵＲＬ～);">
此処に文字や画像のＵＲＬ、ボックスのタグを入れます。
</div>

　　　　ここで　<center></center>　のタグを入れていますから、日記の幅を１００％とすれば
　　　　センターリングして８０％の表示になります。
承知願いたいのは、ボックスの中のテキストもみなセンターリングします。

　　　　ボックスの枠を指定しているタグはこれです。
　　　　border-style:solid;border-color:red;border-width:1;
　　　　詳しくは、こちら→ 【ボックスの枠を変える(1)】【ボックスの枠を変える(2)】に行ってみて下さい。
　　　　背景画像を指定しなければ、背景色が表示されます。
　　　　背景色も表示しなければ、透過します。背景色の背景画像を指定するタグはこれですね。
　　　　background-color:背景色;beige;background-image:url(背景画像のＵＲＬ);

　　　　ではみなさんがんばって下さいませ。【日記で使う！ボックスのお勉強！】まだまだ続きます！(￣m￣*)V

Σ(゜ロ゜)ノノあれえぇぇぇ～～～！ボックスがはみ出してる・・・（￣д￣）　エーなぜ？？？
【おまけ！】
　　　　こんな風にボックスを自在に動かす事が出来ます。
　　　　日記のＴＡＢＬＥの外にも置けます。
　　　　次回やってみましょうか！(￣m￣*)V
　　　　日記の飾り付け【プチ講座メニュー】はこちらから！
ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。
　　　　　　　　ご承知おきください。

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