お正月はドリルで切削はじめを済ませました。初詣は行きそびれています。新年の飲み会に行きました。さすがに松の内はどこの飲み屋も満杯で入れるお店を探すのに苦労します。隣が体育会の元気なチビッコチームで騒々しくて辟易しました。
帰りに観た水戸市民会館をみると南側に飛散防止の壁が完成しています。先々週通ったときに足場を組んでいました。すでにホールの東壁は重機で壊し初めています。南は道路が近いため壁を付けましたが東側は敷地が広いのでそのまま崩すようです。
家に帰ってふと気がつくと、お正月らしいことをしてません。
そういえばサイト直しが必要だったと思い出し、ページの枠にあたるHTMLファイルを作りはじめました。
外部ファイルの読み込みのテスト
ゼロから作るのは大変なので、過去に使ったホームページを横流しします。作り込んであるのはカメラのページです。ありもののHTMLテンプレートにレスポンシブ用のスクリプトを付け足してスマホの狭い画面でも読めるように改造したものです。作ってから二年経っていますのでいまはすでにレスポンシブ対応のHTMLテンプレートが見つかるかもしれません。
HTMLホームページテンプレート無料配布 [Cool Web Window]
Refreshing Like September Rain: 20+ Free HTML/CSS, PSD and GUI Templates for Trendy Designs – noupe
レスポンシブ Web デザインの無料テンプレート – カフィネット
勉強するとゼロから作れますが、あえてここはテンプレートを使います。私はデザインの部分で判断力無いことを知っています。空間とバランスを判断してコレだ！と決めることができませんから、あるもののなかから選ぶだけにしています。
これまでの修正
オリジナルの配布テンプレートはポラロイド風の白枠がつきます。カメラのサイトではできあがった作例がすべて縦でしたので、白い枠が縦になるように直していました。スタイルシートのうち私が自分で改造した5行ほどを元のファイルと付き合わせて元の数値に直します。
レスポンシブのスクリプトと競合しないことを確認します。レスポンシブの設定はページに表示される画像とテキストのブロック要素化とそれを収める枠の幅の指定で成り立っています。アメリカ製なので12進法の何分の幾つなんてものの考え方で組まれています。コードが簡単なので、シンプルなHTMLテンプレートと組み合わせると簡単なページが出来あがります。
複雑なコードとテンプレートを使うとブラックボックスになりますから、なるべく簡単にすませます。簡単な構造を選択すると、微調整の作業量がひどく簡単になります。これを横３列、ページ頭と下部に大きな画像、階層化したレイヤーなどでつくりはじめるといつまで経っても何が正解なのか分からないまま枠作りで終わってしまいます。
共有部分の外部ファイル化
ページのリンクメニューは毎回コピーしてファルの数だけコピーして書き出していました。今回は作業の次いでに外部ファイルにします。拡張子はHTMLでも出来ますが、設定が別に必要となるのでphpを採用します。中の表示はほぼ元のHTMLのままで、共通するメニュー部分をひとつのファイルにして複数のファイルからその共有するひとつのファイルを読み込みます。
HTMLを完全に分解して読み込むこともできますが、保守を考えると枠にあたるHTMLの構造はそのまま残しておきます。