質問など掲示板はこちら⇒

トップページホームページビルダー>表のうまい使い方について
■表のうまい使い方について。

スポンサードリンク




■表はまず幅の設定を最初にきっちり振り分けてから使おう。

■画像の横に文字を並べたい!!!というとき


■表の中に表を作るテクニック。

■表に背景をつけてみよう。

■表の枠を消してみよう。

■セルとセルの間の距離の関係を知ろう。









■表はまず幅の設定を最初にきっちり振り分けてから使おう。

表の幅というものは表を指定してを押せば設定することができます。
なぜ幅をきっちり設定しないといけないのかは、今から説明してゆきます。

まず表を作って、文字をたくさん書いてみましょう。
そうするとわかるのですが、下
のように幅が設定されていないために
どこまでも表が大きくなってしまいます。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ  
   

これを治すために、表を指定し、を押して幅を設定してみましょう。
まず、設定の表(全体のこと)を開いてください。




次に「表の幅」の値を「50」にして、値の右の単位をピクセルから「%」に変えてください。
すると、表示画面の50%分の大きさになります。




設定されると下↓のようにすっきりします。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ  
   

さらに「ああああ、、、、」と書かれたセルの幅を50%にすると、表の内の50%の領域に
設定され、下のようになります。





ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ  
   

注意としては、ひとつのセルの幅の%を決めると、下にある同じ列のセルも
同じ%の幅で表示されることとなります。高さの設定の場合は行に影響します。



ここが幅50%になると

ここが高さ100ピクセルになると

 ここも高さ100ピクセルになる

 ここも幅50%になる

 
表全体の幅は50%です



(注意事項)
もし画面を縮小したりしても段落が変わったり、画面が変化しないようにするには、
表の幅を「ピクセル」で指定すれば変化することはありません。
「%」は画面の大きさや、ウィンドウの大きさに比例して大きさを変化させます。

「%」は画面の大きさに対してはオールマイティーですが、縮小されたウィンドウにされると変化し、
表示が変になってしまいます。「ピクセル」は画面の大きさに対しては大きくなればなるほど、その大きさの比率が
小さくなります。しかし、縮小されたウィンドウにされても決定された数値は変化しませんので、その形を絶対的に
保ちます。

たいていの画面は800X600ピクセルか、1024X768ピクセルです。
ピクセルで幅を決める場合は800X600なら「700-750」くらいがスクロールバーを出さない限界でしょう。
1024X768なら「900-960」くらいが限界であるとおもいます。
ちなみにここのページは%で表示しています(^。^;)











■画像の横に文字を並べたい!!!というとき

そういうときはここをクリック!

そうすると


というのがでて、OKを押すとこういうのがでてきます。

   
   

ここに画像を張りつけ、横のマスに文字をいれましょう。

ぜろにーご
   

という風にできます。







■表の中に表を作るテクニック。


表の中に表をつくることが実はできるのですが、「なぜ作る必要があるのか?」
まずこれについて話していきます(^。^)

   
 
 
 
 

こういう表を用意したとします。そして右のセルに大きな画像を入れて、
左のセルにもくじを入れたいとします。しかしこれではうまくいかないのです。
ためしに作ってみます(^。^)


 目次1  
 目次2
 目次3
 目次4
 目次5

作ってみました。もしこの右の画像がもっと大きな物であった場合、目次の一つ一つが
非常に上下にちらばり、見にくいものとなります。 そういうときに表の中に表を作る!というのが
役に立ってきます。
 こういう場合は、左の一番上のセルの中を指定してを押します。

 目次1
 目次2
 目次3
 目次4
 目次5
 
 
 
 
 

表を作り文字をいれ、セルの中の表を上に表示するためにもおしておくと
上のようにすっきり目次が並びます。










■表に背景をつけてみよう。

     
     

表に背景をつけてみましょう。背景をつける理由は、デザイン的なもの、そして
区切りとしてつかうことができます。まず表をだしてから、を押してみましょう。
表やセルの設定には必ず、「色」と「画像」の背景設定ができるはずです。



まずは表全体の背景の「色」を変えてみましょう。試しに赤にしてみましょう。



すると下のように全体が赤になります。

     
     

セルを選んで他の色をつけてみましょう。セルひとつひとつも変えることが出来ます。
ためしに左上のセルを青にしてみましょう。すると、下のようになります。

     
     









■表の枠を消してみよう。


表の枠を消してみましょう。消さなくてもよいばあいはあるのですが、
消したほうがスッキリする場合もあるというだけなので、デザイン的な
方法といえるでしょう。また、表で作ってあるというのが見た目わかりません。

まず表を出して見ましょう。わかりやすく、色を付けた表で説明してみます。

   
   

まずこの表の枠を消すには、を使った方法と、右クリックを押してする方法
があります。どちらも図を使ってあらわしてみます。


を使った場合 右クリックを使った場合

左のを使った場合は表の設定の「枠表示」のチェックをはずすとできます。
右クリックの場合は表を指定して右クリックを押せば、「表の枠を消去」というのを左クリックで選べば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」にしてあらわして書いてみた。















トップページホームページビルダー>表のうまい使い方について
PC操作がサクサク動く!軽さNo.1・検出率No.1のウイルス対策ソフト!