CSSとSmartyな関係

世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル （Web Designing Books）

久々にCSSのお勉強をしよう、ということで買ってみました。Web Designingの連載時には紙面のレイアウトが悪くて読みづらかった印象がありますが、この書籍はすっきりまとまっていて非常に読みやすいです。テクニック的な面で「こういう使い方もありかー」という部分もありますが、何より「これやっていいのか」という指針になるのが心強いです。とは言え、疑問が残る部分もあるのですが…

例えば、段組を作るのに position:absolute の段を作り、それを position:relative で囲むというパターンが紹介されています。position:relative を使ったレイアウトは、WinIE6でスクロールが異常に重くなることがあります。「google:position:relative IE スクロール 重い」でぐぐるといろいろ出てきます。この現象、PCの環境によって出る場合と出ない場合があるらしく、マシンスペックの高低とも関係ないようです。検証の仕方も分からないし、手の打ちようがなかったので封印していたのですが、この本ではバリバリ使ってます。これが広まって各所で不具合が出たのでしょうか？ もし、日本語が原因だとしたら打つ手無しですね。使えれば便利な指定ではあるのですが、やはり使用はためらわれます。

body直下のdivに対するクラス・ID指定で段組のレイアウトを「主副」「副主」といった切り替えを行う、というのはかなり使えそうです。Smartyと連携させて、

{assign var="LAYOUT" value="col-ms"}
{include file="_header.tpl"}

のように変数を渡してヘッダのテンプレートを読み込む、というのをやってみました。実際には、_header.tpl内で

<div class="container"{if $LAYOUT} id="{$LAYOUT}"{/if}>

と書いて、後はCSSでレイアウトしているだけの簡単なものですが、わりと便利そうです。もう少しいろいろ叩けば、いいネタになるかな。