レイアウトを制御しているtableタグの廃止

はじめに

まずPukiWikiをインストールしたまま,デフォルトの画面がこれである.

PukiWikiデフォルト画面

ページのソースを見るとFrontPageは大きく分けて以下のブロック要素から成り立っている.

header
タイトルやロゴマーク
navigator
タイトルの下にあるメニュー([ リロード ] [ 新規 | 編集・・・)
menubar
最新のnn件を表示しているエリア
body
本文
toolbar
メニューと同じ機能を画像のみで表示.本文の下,右寄せ
lastmodified
FrontPageの最終更新日
related
FrontPageにリンクを張っているページ
footer
Copyright等

この中で,menubarとbodyはtableタグを使用して左と右に配置している.気にしなければそこまでなのだが,tableタグをやめスタイルシートでのレイアウトにしてみよう.

PukiWiki/PHP/Apacheのバージョンは以下の通り.

  • PukiWiki:1.4.3
  • PHP:4.3.6
  • Apache:2.0.48

PukiWikiをインストールしたディレクトリを${PUKIWIKI}と表現する.PukiWiki/PHP/Apacheのインストールは省略する.

tableタグを取る

修正したのは以下の二つのファイルである.

  • ${PUKIWIKI}/skin/pukiwiki.skin.ja.php
  • ${PUKIWIKI}/skin/default.ja.css

pukiwiki.skin.ja.phpの119行目からのコードを以下のように書換える.tableタグを削除し,<div class="clear"/>を追加する.

<!-- 修正前 -->
<?php if (arg_check('read') and exist_plugin_convert('menu')) { ?>
<table border="0" style="width:100%">
<tr>
<td class="menubar">
<div id="menubar">
<?php echo do_plugin_convert('menu') ?>
</div>
</td>
<td valign="top">
<div id="body"><?php echo $body ?></div>
</td>
</tr>
</table>
<?php } else { ?>
<div id="body"><?php echo $body ?></div>
<?php } ?>
        
<!-- 修正後 -->
<?php if (arg_check('read') and exist_plugin_convert('menu')) { ?>
<div id="menubar">
<?php echo do_plugin_convert('menu') ?>
</div>
<div id="body"><?php echo $body ?></div>
<?php } else { ?>
<div id="body"><?php echo $body ?></div>
<?php } ?>
<div class="clear"/> <!-- 追加 -->
        

divタグの追加

テーブルはなくなった代わりに,左右だったレイアウトが上下に変わっている.そこで,default.ja.cssの369行目div#menubarの記述と396行目div#bodyを以下のように変える.

/* 修正前 */
div#menubar
{
    width:9em;
    padding:0px;
    margin:4px;
    word-break:break-all;
    font-size:90%;
    overflow:hidden;
}

          /* 修正後 */
div#menubar
{
    float:left;
    width:18%; /* marginやpaddingの値とブラウザの違いで値を要調整 */
    padding:0px;
    margin:4px;
    word-break:break-all;
    font-size:90%;
    overflow:hidden;
}
        
/*修正前*/
div#body
{
    padding:0px;
    margin:0px 0px 0px .5em;
}

/*修正後*/
div#body
{
    float:right;
    width:80%; /* marginやpaddingの値とブラウザの違いで値を要調整 */
    padding:0px;
    margin:0px 0px 0px .5em
}
        

menubarとbodyのwidthの値は,marginやpaddingに指定した値やブラウザの違いで調整が必要である.例えば,menubarのwidthを20%,bodyのwidthを80%とした場合,ie 6.0では左右に表示できたが,Firefox 0.8では,横幅がおさまらず上下の表示になった.ここでは,menubarのwidthを18%,bodyを80%としている.paddingやmarginの値を変えて,widthの値を変えることも可能である.

以上で,tableタグで制御しているレイアウトの修正は完了である.こんな表示になる.tableタグを使うのかcssを使うのかの違いだけで,見た目はほとんど違いはない.

修正前
PukiWikiデフォルト画面

修正後
tableタグをなくした画面