気まぐれ物置 飾り枠制作 全2頁の2
  「HTMLの解剖」はこちら  
   
 テーブル素材セット 飾り枠の作り方 2.
  ・仕上げです。出来上がったセルのサイズを確認します。
 セルサイズの合計とテーブルサイズに違いが無いかも確認します、
 ここでズレが見つかることもあります。
 始めに幅を決めている方も左右のセルの高さを確認して下さい。
・出来上がったテーブルのサイズが自動的に入っていない場合は、
 幅、高さ共にその数値を入力します。
・スぺーサーgifを入れて空白のセルを無くします。
           (スぺーサーgifとは1px四方の透明な画像です)
  
始めの「ソフト」の個所で、「そんなこと言われてもぉ」の方、お待たせしました、
  こちらです。ソフトで設定出来た方も合わせてやっておいても損はありません。

  これは確実な型崩れ防止策ですが、もう一つ「NN 4.x 」で貴方のべージを
  ご覧くださる方々のためにも是非やっておいて下さい。
  さもないと <図3> の様な四隅の画像しか表示されません。
  これは「NN 4.x 」が空白のセルを認識しないためだそうです。
  背景画像を入れたじゃないかと言いたくなりますが、背景画像はあくまでも
  背景であって画像ではなく、セルとしてはカラッポなのだそうです。
 入れ方は普通の画像と全く 同じです。これを紺色数字セル1,2,3,4に入れて下さい。
 ※DLフォルダーの中にスぺーサー.gif画像のファイルも一つ入れてあります。
                                     


<図6>
以下は<図6>の様にデコボコのラインを
持った画像を使う場合の説明に移ります。
こちらは上記の物よりも、もうひと手間
必要ですが、その値打ちは有ると思います。
では、その"もうひと手間"の部分を説明します。

<デコボコラインの枠>を作る

 紺色数字部分のセルのサイズに制約があります。
  1と4は ------ 画像の幅 × "X" = セルの幅
  2と3は ------ 画像の高さ × "X" = セルの高さ
 例えば<図6>の場合、これの画像1,4の幅は9pxです、
 ついでに言いますと画像2,3の高さも9pxです。 

<図2>

 この"9px"を何倍かしてご希望のセルサイズにすれば良いわけです。

<図7>

<図7>は、紺色1のセル幅を9px×9=81pxにしてみました、
2の部分はセル高さ9px×7=63pxです。

これを怠けてしまうと<図8>のようになってしまいます。
セル位置で言いますとb,c,dのあたりに乱れが有るのが
お解りでしょうか。

 

<図8>
        さて、ここまで出来ましたら仕上げの工程は前記、
        <ストレートラインの枠>と全く同じです。 

このテープルセットは「素材」のコーナーに置いてあります。
素材カタログへ
 

以上です、が、出来るだけ初心者にも解りやすくを心掛けて書いたつもりですが、「出来ない、解りにくい」とおっしゃる方、お気軽にメールをどうぞ、出来うる限りお答えいたします。また、「ここ、違うんじゃないの?!」と思われる個所がございましたら、ご指摘下さると嬉しいです。

    ありがたい参考文献は主に"毎日コミュニケーションズ"発行の
        「ウェッブデザインテクニック」でした。

 
前項 1.へ