ようこそ！小技が簡単に使えるテーブル素材屋へ

サイト製作者の皆様。

テーブル素材屋管理人のPETと申します。サイト製作をしておりますと「この角を丸くしたいな」とか 「ヤフーみたいなタブを作りたい」とか色々小さいですが細かいことをしたくなります。 角の部分に画像を使いテーブルタグでレイアウトをそろえていくのですが、少々面倒なのが難点です。 そこで２１５色で数種類の画像とテーブルタグ自動作成をご用意いたしました。 このような画像の使用が初めての初心者からペイントソフトを立ち上げるのが面倒な上級者まで幅広く使っていただいております。


先日このとおりリニューアルいたしました。 以前からの変更点がいくつかございます。
透過画像をやめた等、よりいっそう充実させるために切り捨てる部分もございました。ご理解ください。

• 背景色を白限定としアンチエイリアス処理を実施
• 白抜き画像など種類を増やした

更新履歴

2005/4/1 姉妹サイト「たぬきのしっぽ」を開設。強力なオンラインＣＳＳエディタです。
2004/10/14 文字を利用した枠を新設しました。
2004/10/6 リニューアルいたしました。

使用方法、注意点

部品により若干使用方法が違いますがほとんど変わりません。

1. 左欄から色を選択
2. サイズ等を入力し、変更ボタンをクリック
3. 右側にサンプル画像、ダウンロードファイル、ソースコードが表示されます。
4. ダウンロードファイルを右クリックで、編集するHTMLファイルと同じフォルダに保存
5. ソースコードを編集するHTMLファイルにコピー

以下注意点でございます。

• 背景色を必ず白にしてください。（白抜き以外）
• 画像はご自由にご使用ください。素材サイトとして配布する場合はリンクをお願いします。
• HTMLの多少の知識は必要です。

角を丸くする1

このような四角の看板も角をまるくすると印象が違います。

ようこそ こちらの掲示板に気軽に書き込んでください。 (^-^)/

->

ようこそ こちらの掲示板に気軽に書き込んでください。 (^-^)/

さらに以下の例はビジネス用途としても最適でシンプルで洗練された印象を与えます。
気づきづらいですが、角が丸くなっています。

トップページ サービス紹介 サイトマップ 会社案内

->

トップページ サービス紹介 サイトマップ 会社案内

どうでしょうか。閲覧者は気が付かなくても、ページ全体の印象には大きく違ってきます。
そして、ご存知の方も多いと思いますが、画像なしで角を丸くすることは現在のブラウザではできません （タグ画像などトリッキーな方法はございますが、、）。よって四隅に丸い画像を使用しております。 この画像は透過画像でなく背景が白なので背景が白の場所でご使用ください。

この「角を丸くする１」の自動作成を使ってみる。

角を丸くする2

今度は丸いプレートをご紹介します。 一行見出しなどに使うと効果的です。
HTMLコード少なくても印象がホントに変わってきます。

メール

->

メール

HTMLタグが複雑ではないので、画像だけダウンロードして以下のようにも加工してみてください。

ようこそ

バーベキュー用品

のように画像が利用できます。こちらもアンチエイリアス処理しているため背景は白でお願いします。

この「角を丸くする２」の自動作成を使ってみる。

ヤフーのタブ

ヤフーの右側にあるタブは見たことありますよね。あれも画像なのです。
変化例は以下のようになります。タブが斜めになっているのが分かりますか？

トピックス 火星旅行へ挑戦 南極でオリンピック開催へ 海底都市の建設加速 車自動運転で教習所不況 マゴロー今日も３安打 一覧

->

トピックス 火星旅行へ挑戦 南極でオリンピック開催へ 海底都市の建設加速 車自動運転で教習所不況 マゴロー今日も３安打 一覧

全然印象が違いますよね。こちらも背景は白を使用してください。

この「ヤフーのタブ」の自動作成を使ってみる。

丸いタブ

今度はヤフーのタブを斜めから曲線にしたものです。
丸みを帯びて、楽しい印象になりますね。

Welcome 掲示板を設置しましたので色々書き込んでくださいまし。

->

れんらく 掲示板を設置しましたので色々書き込んでくださいまし。

どうでしょうか。カクカクテーブルに飽きた人はぜひ使ってみてくださいね。こちらも背景は白を使用してください。

この「丸いタブ」の自動作成を使ってみる。

白抜きを丸くする

今度は背景が有色で白抜き部分の四隅を丸くします。
言葉で説明すると大変ですが下のサンプルを見ていただけると一目瞭然だとおもいます。。
以下の周りの枠は実はHTMLコードに入っていません。背景色と考えてください。 もちろんこのように枠がわりに使用することも可能です。色々試してみてください。

しろしろ   ぬきぬき。

->

しろしろ。 ぬきぬき。

背景色と同じものを使用してくださいね。

この「白抜きを丸くする」の自動作成を使ってみる。

文字を利用した枠

今回の枠は画像を使用しません。すべて文字で装飾しています。
世界中には色々な文字があるんすね。HTMLで表現できる絵文字もいれています。
こんなに色々な面白文字が使用できます。。

▩ ▩▩▩▩▩▩▩▩▩▩ ▩ ▩ ▩ ▩ ▩ ▩ 水にうかんでるみたく。 ▩ ▩ ▩ ▩ ▩ ▩ ▩▩▩▩▩▩▩▩▩▩ ▩

or

♥ ♥♥♥♥♥♥♥♥♥♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ 写真立てみたく ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥♥♥♥♥♥♥♥♥♥ ♥

or

ൠ ൠൠൠൠൠൠൠൠൠൠ ൠ ൠ ൠ ൠ ൠ すかぱみたい ൠ ൠ ൠ ൠ ൠ ൠൠൠൠൠൠൠൠൠൠ ൠ

背景色などの制限はありません。もちろんダウンロードの必要もありません。

この「文字を利用した枠」の自動作成を使ってみる。