ヘッダーとフッター

長い横幅であることを前提としない限り、要するに、スマホの狭い画面幅におさまるかぎり、ヘッダーやフッターのレイアウトとして1行(tr)2列(td)のtableタグを使うことはできる。これを「テーブル枠」と呼ぶ。
これを使った場合、パソコンで見ると真ん中が空いて「間の抜けた」感じになる。逆に、パソコン用のヘッダーやフッターのままではスマホではレイアウトが崩れて「見苦しい」感じになる。
ここでは共用できるスタイルとして次の2つを作る。

使用例
(1) テーブル枠
tableタグに使うスタイル。
.tbwk {width:100%;border-width:0;border-spacing:0;}
.tbwk td {padding:2px 0px;}

(2) テーブル枠の右半分
右側のtdタグに使うスタイル。
.vmtr {vertical-align:middle;text-align:right;}

「.tbwk」で「line-height:1;」の設定はしなくてよい。それは「table」タグで設定しているからである。
また、一般的に「td {padding:5px;}」を設定しているが、これはヘッダーとしてはすき間がありすぎて不適当である。そこでテーブル枠用に「.tbwk td {padding:2px 0px;}」を設定する

フッターは不要

多くのファイルにわざわざフッターを付けたのは、かつて一括ダウンロードというソース鳥(取り)が横行したからである。フッターがあればそのファイルはどこかの他人が作ったものだという「印」がつくので、盗取したファイルをそのまま使うことに多少は障害になるだろう。それがそもそもの動機である。

しかし、今ではソースはすべてアクセス制限エリアに置いている。単に検索エンジンから飛んできただけのソース鳥に一括ダウンロードはできなくなっている。原則としてフッターはもう不要である。

ヘッダーは変更

ヘッダーは1行2列のtableで、左にタイトル画像、右にタイトルテキストというパターンが圧倒的に多い。これを使わないとすると、タイトルテキストをどこに置くかが問題になる。
barの下か、end画像の右ぐらいしか置くところはない。