タイトル


 前置き
   非フレームページでスタイルシートでフレームライクな表示をする場合の例

  1. リスト
     リストの内容


  2. 作成中のヒント
    編集中と、編集後アップロード時に以下の行を変更すると、HTML Project2で編集中は下のビュー表示が表示更新によっていつもトップに戻ってしまうことを防げる。しかしそのままだとCSSで非スクロール領域を指定していても、非スクロール領域もスクロールしてしまうので、アップロード時には2行目のように変更する必要がある。
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> :表示更新対策
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> :アップロード時

  3. TABLE の枠線の例
    TABLEに枠線を付けるには、TABLE タグで <TABLE class="tablex"> などの class= 指定をしておいて、更に 各TDタグに <TD class="tdx"> などと class= 指定が必要になる。

    No項目
    100009
    200010

    但し、Tableの幅が CSS指定の id=maincol より広くてBrowserの幅が狭い時は、上位の(この場合 body要素) overflow:hidden; が効いているので横スクロールバーが表示されずに、Tableの右端が隠れて見えない。maincol に overflow-x:auto; を追記したので、横スクロールバーが表示されるがその横スクロールバーは maincolの縦サイズが長い時は下端に隠れてしまい見えない。
    従って、上記の例のように Tableタグを 別のブロック要素で囲んで、そこに  overflow-x:auto; を指定すれば、その要素だけにスクロールバーが表示されてすこし見やすくなる。
    IEでは overflow-x:auto とX方向だけを指定しないと、何故か縦スクロールバーも表示されてしまう。>> Google Chromeと IE8で確認済み

このページのトップへ