　☆ Sanctuary ☆　　Smile for you

TABLEタグ（７）

||　フリーページ一覧表へ戻る　||　ＴＡＢＬＥタグ（６）へ　||　ＴＡＢＬＥタグ（８）へ　||

テーブルタグ　<table>　の使い方を覚えよう！！（７）

table タグはページの作成に欠かせないものです。
table タグを使うと写真や文章などを縦横に整理して並べたりすることができます。
それでは table タグの便利な使い方を見てみましょう。。

● メニューの画像を変えるには？

今回は、少し高度なテクニックです。
しかし、やってることは大したことではありません。
楽天広場内にはトップページをアレンジしてる方がいらっしゃいますね。
（￣ｏ￣）え？どうやるの？って思われた方もいることでしょう。。
ここでは、メニューをアレンジする方法を試してみましょう！！

メニュー画像は自分でお好みのものをあらかじめ用意しておきましょう！！
ここではデザインテーマの「フェミニン」をあらかじめ用意しておきました。

通常は、ページ作成・編集の本文書込欄（テキストエリア）に記述されたものは、
一番上のリンクカテゴリー、および左端のメニュー、ページ一覧等には反映されず、
右側のコンテンツのエリアに表示されるようになっています。

ですので、メニューを変えるということは、通常のタグの使い方ではできず、
スタイルシートを使って（ＣＳＳ）、絶対座標として指定してあげなければいけなくなります。

絶対座標を指定するためには、 style="position:absolute;" という記述を用いるだけです。
これで、適切な位置に画像をおいてあげるようにしましょう！！
top:78;left:8; くらいが適切な位置になりそうです。
背景色は白 bgcolor="white" にしてみます。
テーブルの幅は bgcolor="110" くらいにしておきましょうか。
メニューとメニューの間隔は、 cellspacing="2" くらいにしてみましょう。

以下のようにすると、左上のようなメニューになります。

どうだったでしょうか？わりと簡単にできる気がしませんか？
ただ、注意しなければいけないのは全画面をカスタマイズするときには注意が必要です。
下手すると、本文書込欄が隠れて、ＨＴＭＬの書き込みができなくなってしまいますから。

他にもＰタグを使ってももちろん同じことはできます。
やり方はいろいろありますので、試してみるとよいでしょう！！
このＨＴＭＬをそのまま、真似して使えると思います。
画像やリンク先は、もちろん変える必要がありますよ。
それで、( ^-^)v ＯＫ！です。

それでは、く(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪

table tag (7)

ジャンル別一覧