« Antenna House Formatter V5 β版の配布を開始 | メイン | AH Formatter V5 CSSによる文書レイアウト指定セミナー 2009年2月 広島、福岡で開催 »

2008年12月13日

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

今週は、8日東京、11日名古屋、12日大阪の3箇所で「CSSによる文書レイアウト指定セミナー」を開催しました。

来年新しく発売予定の「AH Formatter V5」の事前PRとして、新バージョンの目玉機能であるCSS3を使ったページデザインについて紹介することが目的です。セミナーには東京、名古屋、大阪の合計80名強の方のご参加をいただきました。

CSS3のページレイアウトの実例として、セミナーで配布しました資料の正誤表をCSS3を使って、A4横の用紙にでるようにCSSを変えてみました。

AH Formatter V5は、Webページをページ媒体用に可視化することもできますので、β版でお試しになっていただけると良いと思います。

1.AH FormatterのWebページを開きます。
200812131.PNG

2.AH Formatterを起動して、正誤表のURLをAH Formatterにドラッグ&ドロップします。
200812132.PNG

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

スタイルシートは次のようになっています。

(1)Landscaleという名前付きのページで、A4横のサイズを指定します。
@page Landscape {
size: A4 landscape;
margin-top: 0;
margin-bottom: 0
}

(2)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

コメント

コメントしてください

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

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


情報を登録する?