- Coding Methodology
- 第119回 制作したページを素早く確認できる！検証用ページ制作のすすめ
第119回 制作したページを素早く確認できる！検証用ページ制作のすすめ
Webサイトの規模は1ページ、100ページ、1,000ページと大小様々です。制作するのはもちろん大変ですが、それと同じくらい検証にも時間が掛かります。URLを1ページずつ入力したり、スプレッドシートのセルを一つ一つクリックしてページを探すのは結構手間がかかるものです。そこで今回は検証の効率を上げるために検証用のページの使用例をご紹介をしたいと思います。
▼
▼
1. 検証用ページとは
一言で言えば、サイトに存在する全てのページのリンク集ページです。 1ページに全てのリンクを集約することで探す手間を必要としませ ん。また、Web ページとして制作するのでExcel やスプレッドシート と比べて自由にCSSやJavaScriptでカスタマイズすることできます。 さらに簡単なレスポンシブ対応をすればスマートフォンなどの小さい デバイスからでも使い勝手が良くなります。
2. 検証用ページの構造と活用例
普段使用している検証用ページは、下記のようにiframeと組み合わせ
てページ内で簡易的なプレビューもできるようにしています。
ページ数が増えてくると、「このモジュールどこかで制作した記憶があ
るんだけど、どのページだっけ・・・。」ということもしばしばあります。
そんなときにも1ページ内で全ページの閲覧ができる機能があるとモ
ジュールが探しやすく、とても便利です。
3. 実装のポイント
画面幅の50%ずつ、左にメニューエリア、右にプレビューエリアと
なるよう配置します。
メニューにマウスオンするとhrefと同じパスがiframeのsrcに代入さ
れるようにjavascriptで設定します。
プレビューエリアはposition:fixed;で固定配置し、iframeに下記の
styleを適用させ、50%縮小表示させています。
iframe {
width:200%; height:200%;
transform: scale(0.5); transform-origin: left top;
}
これは、画面を50%に分割していることで、iframeの幅が狭くなり、
SPレイアウトになってしまうことを防止しています。widthを倍にし
てscaleで半分にすることでブレイクポイントを倍のサイズで解釈さ
せ、PCレイアウトが表示されるようにしています。
また、右上のPCボタンをクリックするとiframeの縮小スタイルを解
除し、最大幅をmax-width:375px;と指定して中央に配置しています。
