top

Expression Web で WEBサイト作り(1)

別館をExpression Webで全面的に作りかえたので、その覚え書きみたいなのを。

今回はリニューアルですが、実質は一から書き起こしたのと同じになりました。
Expression Webにはcssのテンプレートが最初から数パターン用意されているので、まずはそれを使ってみました。全体のレイアウトからcssでやるのは慣れてない(&よく分かってない)人には難しいので、ソフトが用意してくれるものは素直に使うべし、ということで。

070416_1s.jpg

ファイル→新規作成→ページと進むと、以下のような画面が開くので、この中から好きなのを選んでみます。今回はcssレイアウトの中から上下にヘッダー・フッター入り、真ん中が右サイドバータイプのを選んでみました。そうすると新規頁とそれに対応したスタイルシートが自動で作成されます。
そのままの状態だと適当なid、class名が付いてるので、作業に入る前に自分好みに変えておきました。

■絶対配置レイアウト
で、今回やってみて分かったのですが、Expression Webが用意してるレイアウトって、「position: absolute;」を使った絶対配置だったんですね。これまでcssレイアウトというと「float」を使ったものしか知らなかったので、これは目から鱗でした。なんだ、cssレイアウトってfloatだけじゃなかったんだ! 自分的にfloatはどうも直観的に操作しづらくて苦手意識があったのですが、絶対配置ならまだテーブルレイアウトに感覚が近いものがあるので、「これだっ!」と叫んでしまいました(笑)。

メリット
絶対配置のメリットはレイアウトが崩れないこと。floatでありがちな「カラム落ち」の心配がありません。あらかじめ計算して枠を用意しておけるので、デザイン重視の人に向いてるような気がします。

デメリット
デメリットは絶対配置させてるサイドバーより隣のコンテンツ部分が少ないと、サイドバーとフッターが重なってしまうことですね。ブログの場合はそういうケースがわりとよくあり、かつ頁ごとのコントロールがきかないので、絶対配置よりfloatの方が適していると思います。

しかしブログでないWEBサイトなら頁ごとの細かいコントロールが容易なので、記事部分が少ない頁は記事ボックスに高さを指定する・下部のマージンを多めにとるなどしてサイドバーよりフッターが下にくるよう調整できます。上手く使いこなせるようになれば、かなり自由なデザインができるようになるのではと思っています。

ということで、これからは絶対配置派ですね。MTのスタイルシートはfloatでいくと思いますが、自サイトの方は全部絶対配置レイアウトサイトになっていくと思います。