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

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2003/03/28

【What’s News VOL.12】

(8)

カテゴリ：【プチ講座】

　　【初心者のためのプチ講座 VOL.3】（３月２３日）の日記で
　　テーブルタグのように使える、ボックスを紹介しました。
　　取り急ぎ、ボックスタグの雛形しか載せませんでしたので、
　　今日は属性のタグの説明をしてみましょう。

　　ここに、このように本文を入れましたり、
　　画像を表示するタグを貼りつける事が出来ます。

　　　　この雛形を下に書いて見ます。

　　　　<div style="border-style: double;　background:#FFFF80; color:red; width: 70%; height: 100px;">
　　ここに、このように本文を入れましたり、
　　画像を表示するタグを貼りつける事が出来ます。

</div>

　　　　では、属性に付いて紹介します。
● border-style: 枠の属性;　　　枠のスタイルを指定します。

　　　　border-style: double;　　　　属性の指定のところに　doubleと入れますと
　　　　　　　　　　　　　　　　　　一番最初のような枠になります。
　　　　border-style: none;　　　　　枠が表示されません。
　　　　border-style: solid;　　　　　枠が実線で表示されます。
　　　　border-style: dotted;　　　　枠が点線で表示されます。　
　　　　border-style: groove;　　　　枠の部分がへこんだように表示されます。
　　　　border-style: ridge;　　　　　枠の部分が浮き上がったように表示されます。

● background: 背景の属性;　　　背景色を指定します。属性の所に、
　　　　　　　　　　　　　　　　　　カラーコードで「C0C0C0」「FFFF80」と
　　　　　　　　　　　　　　　　　　書いてもいいですし、「red」とか「blue」とか
　　　　　　　　　　　　　　　　　　カラーネームを書き込んでもＯＫです。
【カラーサンプル】はこちらから！

● color: 枠の色;　　　　　　　　枠の色を指定します。背景と同じように
　　　　　　　　　　　　　　　　　　カラーコードやカラーネームを書き込みます。

● width: 幅; height: 高さ　　　　ボックスの幅と高さを指定します。
　　　　　　　　　　　　　　　　　　PX（ピクルス）と％（パーセント）で指定します。
　　　　　　　　　　　　　　　　　　幅も高さも100%にしますと、日記のテーブル枠
　　　　　　　　　　　　　　　　　　いっぱいに表示します。

　　おまけ！（*^_^*）

　　　　↑これもボックスなんですが、このように
　　　　ライン的な使い方も出来ます。
　　　　楽天の編集ページで見出しなどをくくっているのは
　　　　テーブルで作ったラインです。
　　　　ボックスでも↑上のようにラインが出来ます。

　　　　このラインにするタグを書いてみましょう。

　　　　このようになります。
　　　　私のトップページに↓この様な文字の入った
　　　　ラインがありますが、あれもテーブルです。

■ 【ＢＧＭを止めるのは、ブラウザの中止ボタン×を押してください！】

　　　　テーブルでやる場合の雛形を書きますと。
　　　　↓このようになります。

<TABLE WIDTH="100%" BORDER="0" CELLPADDING="3">
<TR>
<TD WIDTH="80%" BGCOLOR="yellow"><B><FONT COLOR="#ff0000">■</FONT> 【ＢＧＭを止めるのは、ブラウザの中止ボタン×を押してください！】 </B></TD>
</TR>
</TABLE>

　　　　日記でやる場合は、↓このようになります。

　　<div style="border-style: none; background:yellow; width: 90%; height:25px;">　　<FONT COLOR="#ff0000">■</FONT> 【ＢＧＭを止めるのは、ブラウザの中止ボタン×を押してください！】 </div>

　　　　では！みなさん色々試して見てください。
　　　　今週はどうにかして、【おもしろタグ教室】の
　　　　「テーブルで整理整頓VOL.2」を更新したいものです。(-_-;)　　　　

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