レイアウトを制御しているtableタグの廃止
はじめに
まず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を使うのかの違いだけで,見た目はほとんど違いはない.
修正前
修正後