グラフィックデザインやってる方は一度は手がけるであろう「メニュー」。見てるぶんには何とも思わないんだけど、つくるとなると意外に大変です。だってアレ、階層構造が複雑だったりしますもんね。
たとえば「ドリンク」という大枠があったとして、その下に「アルコール」とか「ソフトドリンク」とかのカテゴリーがあって、さらにその下に「ワイン」とか「焼酎」とかのカテゴリーがあって、やっと個別のメニューの名前がきたとします。さらに個別の説明がついて、値段がボトルとグラスの2種類あって…となると、どこをどう整列したらいいのやら。アレとソレは同じレベルだから…とか考えながら必死に整列してレイアウトを組んでも、内容変更や修正でまたやり直さないといけないことも。
そんなこんなでつくるたびに苦労してたんですが、最近はメニューものはいったんWeb目線で整理してからつくることにしました。いちばん大きなカテゴリ名を「h1」として、その下のカテゴリ名を「h2」「h3」…と階層を潜っていき、個別のメニューは「dl」で。メニュー名は「dt」、価格は「dd」、説明文も「dd」、画像も「dd」（ddが複数の場合はclassを設定）。
それぞれにCSSでスタイルを設定していく感覚で文字サイズや余白を設定すれば、内容が変わろうが右揃えになろうが楽勝です。
んで、整然と並んでるだけだとグラフィック的に退屈なので、最後に崩しを入れてできあがり。これをやるようになってから、メニューものがかなり早くできるようになりました。Webも紙もやる方はぜひ！きれいなHTML構造をつくる訓練にもなっていい感じです。
ものすごくニッチな内容になったので、次回はまたしょうもないことを書こうと思います。