Webページアイデア 其の１ 其の２（このページ） 其の３ テーブルの背景画像でインデックスシールの印象 ページに別のWebペーを読み込む １．テーブルの背景画像でインデックスシールの印象 このページのTopに戻る 当サイトの最初のページのメニューをご覧になったかと思いますが、細長い角の丸い画像を使っているだけです。 １． 元の画像 60x27pic　311Byte ２． これを画像ソフトで分割 →7px← →任意← 右 中央 ３． 右側の画像は 右の画像を左右反転画像で作成する ４． 最後に不要部分を透過処理を行う ５． Webページアイデア講座 普通のテーブルの場合 約2ピクセルの隙間が発生する Webページアイデア講座 セルとセルの間隔を「０ピクセル」とする ６． ポイント１ 高さは画像の高さの70%程度とする（下の角が表示されない状態） ７． ポイント２ 中央のセルは途中で折り返しがしない「nowrap」とする。 こうする事で、文字の長さに自動対応した表示となる。 ８． ポイント３ 両サイドは表示される状態で調節が必要です。 ９． ポイント４ 画像の組み合わせはピクセル単で行い、非常に細かな作業です。 プログラムソース <TABLE cellspacing="0" cellpadding="0"> 　<TR> 　　<TD nowrap align="center" width="6" height="21" background="menu/menu-bl2-left.gif"></TD> 　　<TD nowrap align="center" background="menu/menu-bl2-center.gif"> <A href="***.htm" target="****">Webページアイデア講座</A></TD> 　　<TD nowrap align="center" width="6" background="menu/menu-bl2-right.gif"></TD> 　　　・ 　　　・ 　　　・ 　　　・</TR> </TABLE> 帳簿のインデックスシールをイメージしたメニュー 修正前 はじめに 私のプロファイル 倒れる直前の勤務 倒れたその瞬間 入院生活 ・・・・・ 2度目の入院 パソコンを使えた 役立つ運動 慢性脳卒中麻痺に特効薬？ 妻の看護１ 妻の看護２ リンクのページ 修正処理後 はじめに 私のプロファイル 倒れる直前の勤務 倒れたその瞬間 入院生活 ・・・・・ 2度目の入院 パソコンを使えた 役立つ運動 慢性脳卒中麻痺に特効薬？ 妻の看護１ 妻の看護２ リンクのページ 背景画像とする理由 １． 背景画像は必ず画像の最上部、左端を基点と表示される事を利用します。 ２． 上記の例の場合、画像サイズに両サイドのセルの幅を設定すると、隣り合わせたセルとの時に、インデックスシールの枠線が2本分となって見た目では不具合が生じるために、左側を1ピクセル狭くする事で隣り合わせた画像が均一に1ピクセルの線で表示されます。 ３． 一番右端のインデックスシールだけは画像と同じ幅でなければなりません。 ４． メニュー項目の文字部分は自動折り返しを禁止するため「<TD nowrap>」を記述します。 ２．ページに別のWebペーを読み込む このページのTopに戻る Webページにまったく違うサイトのページを読み込む事も可能です。まさにインターネットらしい使い方ですが、必ず相手の了解を取り付けましょう。 また、自分のサイトのページでも同じです。（こちらは分かりやすく枠線を表示しました） このページのトップに戻る　　　　戻る　　　Homeに戻る