GT-ONE 楽天タグ講座 パイプ奮闘記

TABLEでページ一覧を隠す

    2月17日のプチ講座で【トップページのページ一覧を変える!改】を紹介しました。
    前回は、タグを載せただけだったので、今回はタグの属性の説明をして見ます。

      ◆ テーブル全体の説明 ◆

    紹介のタグは、テーブルのタグです。まずはテーブル全体のタグを説明しましょう。
    <TABLE style=" position:absolute;top:280;left:10;font-family:Comic Sans MS;font-size:9;color:black;" width=110 height=1500 bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black>
    </TABLE>

    ↑これがテーブル全体を指定しているタグです。親要素に対して、絶対的な配置の命令を出しています。
    それが、  position:absolute;top:280;left:10;  です。
    絶対的に配置しますから、そのWEBのスクリーンの一番手前に表示します。
    top:280;left:10; は親要素の左上隅を起点にしてテーブルを何処に配置しなさいと命令しております。
    top:280;  は、上(TOP)から280PX下がったところから表示しなさいと命令しております。
           この数値は個々にいじってみて下さい。数値が小さくなればテーブルは上に行きます。大きくなれば下に下がります。
    left:10;  は左端から10PX の所からテーブルが始まる、ということを命令しています。この数字はいじらないで下さい。( ̄m ̄*)V

    font-family:Comic Sans MS;font-size:9;color:black; はテーブルの中のFONTを指定しています。
    font-family:Comic Sans MS; は字体、Comic Sans MS と指定しています。
    font-size:9;  は字の大きさ、9PX と指定しています。
    color:black;  は字の色です。

    width=110 height=1500 はテーブル全体の幅と高さを指定しています。
    width=110 はテーブルの幅ですがこのまま触らなくてもいいでしょう。
    height=1500 は全体の高さですから、テーブル内の内容と照らし合わせて決めて下さい。

    bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black の属性の説明です。
    bgcolor=#696969 はテーブル全体の背景色です。背景画像も載せられますが、スペースがないので背景色の方がいいと思います。
    cellpadding=0 cellspacing=1 はテーブルの中のセルの間隔を指定しています。1%に指定しています。
    border=1 bordercolor=black はテーブル全体の枠の幅と色を指定しています。

    では!次に各セルを説明します。

      ◆ 各セルの説明 ◆

    正面玄関 ←これが一つのセルです。黄色のテキストの部分が一つのセルのタグです。

    抜き出して書いたものが↓これです。

    <TR> <TD width="110" height="29" bgcolor="silver"><a href="ここにリンクのURL"><img src="ここにアイコンのURL" border="0"></a>ここにリンク説明の文字 </TD></TR>

    width="110" height="29" は各セルの幅 と 高さを指定しています。高さのみアイコンなどの大きさに合わせて、変えてください。
    bgcolor="silver" は各セルの背景色を指定しています。
    背景画像を指定するには、bgcolor="silver"の替わりに background="背景画像のURL"
    を入れますと、このようになります。→→→→→
    正面玄関

    この各セルの中でリンクを張るのですが、ここでは、テキストにリンクを貼らないで、
    あえて アイコンの画像→だけにリンクを張っています。
    テキストにリンクを貼りますと、そのテキストの下にアンダーバーが出てしまうからです。
    アンダーバーがでても差し支えないという人は、テキストにリンクを貼ったほうが簡単ですね。
    テキストにリンクを貼りますと、このようになりますね。 ●正面玄関

    タグは↓ これですね!
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="ここにリンクのURL">ここにリンク説明の文字</a> </TD></TR>

    お判りでしょうか!このタグは <TABLE> のタグに位置を指定して、簡単に言えば
    セルを縦に並べただけなのです。↓簡単に書けば、こんな風です。

    <TABLE>
    <TR><TD>
    <a href="リンクのページのURL"> <img src="アイコン画像のURL"></a> リンク説明文
    </TD></TR>

    <TR><TD>
    <a href="リンクのページのURL"> <img src="アイコン画像のURL"></a> リンク説明文
    </TD></TR>

    <TR><TD>
    これの繰り返しです。
    </TD></TR>

    </TABLE>

    下の方に書いてあります、↓これは、テーブルの高さの調整のためつけています。

    <TR><TD width="110" height="750" VALIGN="top" bgcolor="pink"><BR>   【お知らせ】<BR><BR> ココにTEXTを書きます。<BR> </TR></TD>

    各自の「ページ一覧」の長さで調節して下さい。height="" で調節します。(ピンクの一番下のセル)
    背景色をページの背景色と同じくしたり、背景画像と同じくしますと、よりいっそう同化しますね。



    <TABLE style=" position:absolute;top:280;left:10;font-family:Comic Sans MS;font-size:9;color:black;" width=110 height=1500 bgcolor=#696969 cellpadding=0 cellspacing=1 border=1 bordercolor=black>
    <TR> <TD width="110" height="29" bgcolor="silver"> <a href="http://plaza.rakuten.co.jp/gtone/002001"> <img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"> </a> 正面玄関
    </TD></TR>

    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/003000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>もう一つのプロフ
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/017001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>HPの飾付教室
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/003002"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>おもしろタグ教室
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/004001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プレート教室
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/002000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>写真集
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/006000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>壁紙チェンジャ
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/007000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>リンク集
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/009000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>キリ番
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="darkkhaki"><a href="http://plaza.rakuten.co.jp/gtone/00500"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プレート置き場
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="silver"><a href="http://plaza.rakuten.co.jp/gtone/016000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>日記リンク皆様
    </TD></TR> <TR><TD width="110" height="29"> </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="hotpink"><a href="http://plaza.rakuten.co.jp/gtone/002002"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>プチ講座MENU
    </TD></TR>
    <TR><TD width="110" height="29"> </TD></TR> <TR> <TD width="110" height="29" bgcolor="pink"><a href="http://plaza.rakuten.co.jp/gtone/011000"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>カラーコード表
    </TD></TR>
    <TR> <TD width="110" height="29" bgcolor="pink"><a href="http://plaza.rakuten.co.jp/gtone/011001"><img src="http://plaza.rakuten.co.jp/img/admin/20.gif" border="0"></a>カラーネーム表
    </TD></TR>
    <TR><TD width="110" height="29"> </TD></TR>
    <TR><TD width="110" height="750" VALIGN="top" bgcolor="pink"><BR>   【お知らせ】<BR><BR> ココにTEXTを書きます。<BR> </TR></TD>
    </TABLE>



正面玄関
もう一つのプロフ
HPの飾付教室
おもしろタグ教室
プレート教室
写真集
壁紙チェンジャ
リンク集
キリ番
プレート置き場
日記リンク皆様
プチ講座MENU
カラーコード表
カラーネーム表

  【お知らせ】

ココにTEXTを書きます。




Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.