I love software!: CSSによるページレイアウト　個別　アーカイブ

2008年12月13日

今週は、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などのブラウザでは、まだ、まだこの機能は実装されていませんので、ブラウザでは使用できません。

投稿者 koba : 2008年12月13日 15:25

このエントリーのトラックバックURL:
http://blog.antenna.co.jp/PDFTool/mt-tbng2.cgi/1167

サイン・インを確認しました、さん。コメントしてください。 ( サイン・アウト)

(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)