|
|
|
|
トップページ>ホームページビルダー>表のうまい使い方について |
|
| ■表のうまい使い方について。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
スポンサードリンク ■表はまず幅の設定を最初にきっちり振り分けてから使おう。 ■画像の横に文字を並べたい!!!というとき ■表の中に表を作るテクニック。 ■表に背景をつけてみよう。 ■表の枠を消してみよう。 ■セルとセルの間の距離の関係を知ろう。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
■表はまず幅の設定を最初にきっちり振り分けてから使おう。
これを治すために、表を指定し、 まず、設定の表(全体のこと)を開いてください。 ![]() 次に「表の幅」の値を「50」にして、値の右の単位をピクセルから「%」に変えてください。 すると、表示画面の50%分の大きさになります。 ![]() 設定されると下↓のようにすっきりします。
さらに「ああああ、、、、」と書かれたセルの幅を50%にすると、表の内の50%の領域に 設定され、下のようになります。 ![]()
注意としては、ひとつのセルの幅の%を決めると、下にある同じ列のセルも 同じ%の幅で表示されることとなります。高さの設定の場合は行に影響します。
(注意事項) もし画面を縮小したりしても段落が変わったり、画面が変化しないようにするには、 表の幅を「ピクセル」で指定すれば変化することはありません。 「%」は画面の大きさや、ウィンドウの大きさに比例して大きさを変化させます。 「%」は画面の大きさに対してはオールマイティーですが、縮小されたウィンドウにされると変化し、 表示が変になってしまいます。「ピクセル」は画面の大きさに対しては大きくなればなるほど、その大きさの比率が 小さくなります。しかし、縮小されたウィンドウにされても決定された数値は変化しませんので、その形を絶対的に 保ちます。 たいていの画面は800X600ピクセルか、1024X768ピクセルです。 ピクセルで幅を決める場合は800X600なら「700-750」くらいがスクロールバーを出さない限界でしょう。 1024X768なら「900-960」くらいが限界であるとおもいます。 ちなみにここのページは%で表示しています(^。^;) ■画像の横に文字を並べたい!!!というとき そうすると
ここに画像を張りつけ、横のマスに文字をいれましょう。
という風にできます。 こういう表を用意したとします。そして右のセルに大きな画像を入れて、 左のセルにもくじを入れたいとします。しかしこれではうまくいかないのです。 ためしに作ってみます(^。^)
作ってみました。もしこの右の画像がもっと大きな物であった場合、目次の一つ一つが
表を作り文字をいれ、セルの中の表を上に表示するために 表に背景をつけてみましょう。背景をつける理由は、デザイン的なもの、そして 区切りとしてつかうことができます。まず表をだしてから、 表やセルの設定には必ず、「色」と「画像」の背景設定ができるはずです。 ![]() まずは表全体の背景の「色」を変えてみましょう。試しに赤にしてみましょう。 ![]() すると下のように全体が赤になります。 セルを選んで他の色をつけてみましょう。セルひとつひとつも変えることが出来ます。 ためしに左上のセルを青にしてみましょう。すると、下のようになります。 ■表の枠を消してみよう。 表の枠を消してみましょう。消さなくてもよいばあいはあるのですが、 消したほうがスッキリする場合もあるというだけなので、デザイン的な 方法といえるでしょう。また、表で作ってあるというのが見た目わかりません。 まず表を出して見ましょう。わかりやすく、色を付けた表で説明してみます。 まずこの表の枠を消すには、 があります。どちらも図を使ってあらわしてみます。
左の 右クリックの場合は表を指定して右クリックを押せば、「表の枠を消去」というのを左クリックで選べばOKです。 下のように枠が消えてスッキリします。↓ ■セルとセルの間の距離の関係を知ろう。 セルとセルの間の距離というものは「罫線の幅、セルの余白、枠表示」で変わってくるものである。 つまり三つの数値(ピクセル)を1づつあげることによって、実はセルとセルの距離は3ピクセルも変わるのだ。 表の基本でも述べた下の表だが、3つの数値のうち罫線の幅、セルの余白は最初のうちは見てみるとわかるように 表示されず空欄である。しかし、空欄に見えるだけで実は1と同じ意味を持っているのである。 そこで下の図のようにすべて3つとも「0」にしてみるとよいだろう。 (注意)枠表示のみ、「0」にした場合、セルとセルの間の距離が1縮まるだけでなく、 枠を消去した状態にもなることに注意しよう。
「0」にできただろうか?表であらわしてみるが、三つの数値を「1、1、1」の時と、「0、0、0」にした時をくらべてみる。 「1、1、1」の時
「0、0、0」の時
みてのとおり、画像がぴったり引っ付いた状態になる。 なぜなら、セルとセルの距離が0になったからである。 ちなみに三つの距離+枠表示(有り無し)の意味をわかりやすいように「10、10、10」にしてあらわして書いてみた。↓ ![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
トップページ>ホームページビルダー>表のうまい使い方について |