モックン☆彡の部屋

テーブルで整頓７（応）

テーブルで整頓７（応）

ここのページではテーブルタグの応用を紹介しています。

ＨＰなどで角が丸まった枠を見かけませんか？

例えば、右のような感じのものです。

てすと

この様に角が丸い枠を作るには主に２通りの方法があります。

１つ目は角以外をテーブルタグで作成し、角の部分を画像ファイルで補う方法。

２つ目はテーブルタグのみで作る方法。

それぞれの長所と短所をまとめてみました。下の表を見てください。

画像ファイルで補う方法

テーブルタグのみで作る方法

長

所

使う文字数が少ないので、編集する時に見やすい。
画像ファイルが用意してあれば簡単に組み立てられる。

全てタグなので色などを比較的簡単に変えられる。
細かい修正が直ぐに反映される。
８角形も簡単に作成できる。

短

所

角の画像を用意しないといけないし、回りの色を変更するたびに画像ファイルも作り直す必要がある。
通常４つ分の画像ファイルが必要。

使う文字数が増えてしまい、馴れないと修正するのに少し大変。

どちらも一長一短ですが、ここでは２つ目について説明していきます。

まずは簡単な原理から･･･

図１

図２

図３

→

上の図を見てもらえれば分かると思いますが、

まずは長さの違う線を５本用意します。（図１）

長さの違う線５本を中央に寄せます。（図２）

最後に束ねると２つの角の出来上がり。（図３）

今回は上側の角を作りましたが、下側の角を作るには徐々に短くなる線を用意して

束ねるとできます。また、線の数は多いほど丸みが出てきます。

通常、線を描く場合は < HR > のタグを使いますが、このタグ同士は束ねられないので、

上に載せている線１本１本はテーブルタグで書いています。

< TABLE cellspacing="0" >< TR >< TD bgcolor="aqua" width="110" ></ TD ></ TR ></ TABLE >

上のように書いて線１本を表しています。

《お手本４》 ：ページ用、：コメント、：日記用

< TABLE align=" center " >< TR >< TD align="center" >

< TABLE cellspacing="0" >< TR >< TD bgcolor=" #0000FF " width=209 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #002AFF " width=213 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #0055FF " width=217 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #007FFF " width=218 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #00AAFF " width= 220 >
< TR >< TD bgcolor=" #C3D3FD " align="center" >< FONT style="font-size:15px;color:#882829;" > 適当な文１ < BR > 適当な文２ < BR > 適当な文３ < BR > ･･･ </ FONT ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #00AAFF " width= 220 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #007FFF " width=218 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #0055FF " width=217 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #002AFF " width=213 ></ TD ></ TR ></ TABLE >
< TABLE cellspacing="0" >< TR >< TD bgcolor=" #0000FF " width=209 ></ TD ></ TR ></ TABLE >

</ TD ></ TR ></ TABLE >


適当な文１適当な文２適当な文３･･･

応用とも言えるお手本で、テーブルタグの中にテーブルタグが
ふんだんに使われています。
少し見づらいかもしれませんが、比較的分かり易いと思います。
上記のタグをコピーして、テーブルタグの中に「 border="1" 」を挿入してみると、
どのテーブルタグが完成品のどこに該当しているかわかると思います。」
（<TABLE border="1" > こんな感じです）

一番最初の行の『 align=" center " 』はテーブル本体の位置を表します。
左に寄せるには『 align=" left " 』、右に寄せるには『 align=" right " 』と書いて下さい。

このお手本では一番広い横幅を 220 に設定してあります。
横幅を変えるには、上で白く 220 と書かれている部分の大きさを調節して下さい。
ただし、その際に他の数字も調節が必要です。
例えば、 220 を 200 へ変更した場合を考えると、「220 - 200 = 20」となり、
20小さくなった事がわかります。すると、他に書いてある数字も20引いて、
209 → 189、213 → 193、217 → 197、218 → 198と変更します。（全部で10箇所）
グラデーションを調節する場合は、基本的な色の５色を変更します。
もちろん、全て同じ色にするとグラデーションが省かれて単色になります。
上の方に書いてある色の
「 #0055FF 」を色１、「 #0044FF 」を色２、「 #0033EE 」を色３、「 #0033DD 」を色４、
「 #0033CC 」を色５とし、徐々に色を変えて下さい。
縦幅は書いた行の分だけ増えます。
縦幅を固定したい場合や上に述べた色のお手本は、
テーブルで整頓８（応）を参考にして下さい。

メイン部分の背景色は「 bgcolor=" #C3D3FD " 」を変更して下さい。

下に日記用お持ち帰りタグを載せます。ページ設定で自動改行の方は
こちらを持ち帰ると便利ですが、日記を考慮して横幅は520に調節してあります。

日記用お持ち帰りタグ（お手本）

日記用お持ち帰りタグ（枠入り）

《お手本５》 ：コメント、：日記用


適当な文１適当な文２適当な文３･･･

少し分かりづらいので、お手本の背景を桃色にしましたが、
角を丸くしないで、直線にして８角形にしました。
上の 《お手本４》 の横幅を209 → 212、213 → 214、217 → 216と変更し、
２つずつ数字を上げていくと直線になります。
つまり、最大の横幅が220なので、212、214、216、218、220と等間隔で
横幅が広がるように調節していくと四隅が直線的に表示されます。
数値だけの変更なので、タグは省略させて頂きます。

日記用お持ち帰りタグ

テーブルで整頓６（高）へ

テーブルで整頓８（高）へ

ジャンル別一覧