上新電機 パソコン買取サービス   Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
HPあれこれメニュー
はじめに
知っておきたい事
HTMLの基本
フレーム
レイアウト
画像
色々なこと
HTML4.01要素一覧
XHTML
テンプレート
エイプスキン
サイトマップ


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ ポラロイド風テーブル
you style
ペンギ〜ン♪
ポラロイド写真風テーブル
テーブルはこういうのが得意なタグ。

デジカメで写した写真にいかが?
コメントを複数行書けます。
サイズ違いの画像でも使えます。


ダウンロード
■ メニュー
一般的なメニュー作りはテーブルで作ります。


TOP COLUMN DIARY BBS ABOUT LINK

<style type="text/css"><!--

.bord1 {
border:1xp solid #0080ff;
background-color:#00ccff;
width:70px;
padding:2px;
text-align:center;
font-weight:bold;}

.bord2 {
filter:dropshadow(offx=3,offy=3,color=#9999cc,positive=1) }

--></style>

<table border="0" cellpadding="0" cellspacing="5" class="bord2">
<tr>
<td class="bord1"><a href="**.html" title="トップへ" style="color:#ffffff">TOP</a>
</td>
<td class="bord1"><a href="**.html" title="コラム" style="color:#ffffff">COLUMN</a>
</td>
<td class="bord1"><a href="**.html" title="日記" style="color:#ffffff">DIARY</a>
</td>
<td class="bord1"><a href="**.html" title="掲示板" style="color:#ffffff">BBS</a>
</td>
<td class="bord1"><a href="**.html" title="〜ついて" style="color:#ffffff>ABOUT</a>
</td>
<td class="bord1"><a href="**.html" title="リンク" style="color:#ffffff">LINK</a>
</td>
</tr>
</table>


TOP COLUMN DIARY BBS ABOUT LINK

<style type="text/css"><!--

.bord3 {
border:1xp solid #ff3333;
background-color:#ffaaaa;
width:70px;
padding:2px;
text-align:center;
font-weight:bold;
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#fff0f0,endColorstr=#ff8888,gradientType=0)}

--></style>

<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td class="bord3"><a href="**.html" title="トップへ" style="color:#ffffff">TOP</a>
</td>
<td class="bord3"><a href="**.html" title="コラム" style="color:#ffffff">COLUMN</a>
</td>
<td class="bord3"><a href="**.html" title="日記" style="color:#ffffff">DIARY</a>
</td>
<td class="bord3"><a href="**.html" title="掲示板" style="color:#ffffff">BBS</a>
</td>
<td class="bord3"><a href="**.html" title="〜ついて" style="color:#ffffff>ABOUT</a>
</td>
<td class="bord3"><a href="**.html" title="リンク" style="color:#ffffff">LINK</a>
</td>
</tr>
</table>

■ 単純なテーブル素材の例
テーブルを使った単純な枠の素材。divで同じような事をしたら、ブラウザを替えると崩れた。

table 素材。

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#ffdd00; border:3px double #ffaa00;">
<tr>
<td style="background-color:#ffffff; width:200px; height:120px; padding:5px; vertical-align:top;">
table 素材。
</td>
</tr>
</table>


news
table 素材。

<table border="0" cellpadding="0" cellspacing="3" style="background-color:#88ccff;border:1px solid #0080ff;">
<tr>
<td style="padding:1px; text-align:center;">
news
</td>
</tr>
<tr>
<td style="border:1px solid #0080ff; background-color:#ffffff; width:200px; height:120px; padding:5px; vertical-align:top;">
table 素材。
</td>
</tr>
</table>
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.