CSSによるページレイアウト

今週は、8日東京、11日名古屋、12日大阪の3箇所で「CSSによる文書レイアウト指定セミナー」を開催しました。
来年新しく発売予定の「AH Formatter V5」の事前PRとして、新バージョンの目玉機能であるCSS3を使ったページデザインについて紹介することが目的です。セミナーには東京、名古屋、大阪の合計80名強の方のご参加をいただきました。
CSS3のページレイアウトの実例として、セミナーで配布しました資料の正誤表をCSS3を使って、A4横の用紙にでるようにCSSを変えてみました。
AH Formatter V5は、Webページをページ媒体用に可視化することもできますので、β版でお試しになっていただけると良いと思います。
１．AH FormatterのWebページを開きます。

２．AH Formatterを起動して、正誤表のURLをAH Formatterにドラッグ＆ドロップします。

３．そうしますと次の画面のように正誤表がA4横の用紙を使って表示されます。

スタイルシートは次のようになっています。
（１）Landscaleという名前付きのページで、A4横のサイズを指定します。
@page Landscape {
size: A4 landscape;
margin-top: 0;
margin-bottom: 0
}
（２）landscapeクラスに名前付きページ：Landscapeを適用します。
.landscape {
page: Landscape;
}
正誤表のHTMLでは、body要素にclass=”landscape”を指定していますので、A4横の用紙設定となります。なおFireFoxなどのブラウザでは、まだ、まだこの機能は実装されていませんので、ブラウザでは使用できません。