CSSによるレイアウト見本
このページの見本は、HTML+CSSファイルを編集して作成したものです。
PDFファイルは、「HTML+CSS見本」を AH Formatter V5にて組版して、PDFに出力したものです。
ページの構造を示す見本
| @page ルールのmargin プロパティでページ余白を指定します。 ページヘッダやページフッタはマージンボックスと呼ばれるページの周辺の領域に割り当て ます。 |
HTML+CSS見本 | CSS | |
| -ah-writing-mode: tb-rl;（縦書き）、-ah-reference-orientation（回転）を設定した例です。 | HTML+CSS見本 | CSS | |
| 偶数ページと奇数ページで自動的にレイアウトを変更する例です。ページの左と右でヘッダーやフッターの内容を切り替えたい場合に応用できます。 | HTML+CSS見本 | CSS | |
| 脚注の設定例です。本文に対しページの下部に注釈を付け加えるときに利用します。 | HTML+CSS見本 | CSS | |
| 段組の見本です。段組はページ単位で設定できます。見出し等の段抜き設定ができます。 | HTML+CSS見本 | CSS | |
| 本文領域の内部には、本文のテキストの中に配置された内容により、脚注領域、前方フロート領域、開始フロート領域、終了フロート領域が作られます。 | HTML+CSS見本 | CSS |
段落の属性に関連する見本
| 本文、ヘッダ、フッタ、段落、セルなどの上下、左右に境界線を引くことができます。線種は8種類あり、太さは自由に設定できます。 | HTML+CSS見本 | CSS | |
| ブロック内で文字を様々に配置できます。左寄せ、右寄せ、センタリング 、 ジャスティフィケーション等です。 | HTML+CSS見本 | CSS | |
| 上記文字の配置例の英文のケースです。 | HTML+CSS見本 | CSS | |
| ボックス間の空きを自由に設定することができます。 | HTML+CSS見本 | CSS | |
| ボックス内のテキストの周りに任意の空きを確保できます。 | HTML+CSS見本 | CSS | |
| 行ピッチの設定例です。 | HTML+CSS見本 | CSS | |
| 文字ピッチの設定例です。 | HTML+CSS見本 | CSS | |
| 段落に-ah-column-break-before:avoid;の属性を設定することで、段落を次の段落と同じページ、カラムに配置されるように強制できます。 | HTML+CSS見本 | CSS | |
| ブロック全体にpage-break-inside:avoid;の属性を設定することで、全体を１ページ、あるいは１段に収めることができます。 | HTML+CSS見本 | CSS |
文字の属性に関連する見本
フォント・ファミリーや、フォント・サイズ、文字修飾などの属性は段落単位でも文字単位でも設定できます。
| フォントサイズの設定例です。 | HTML+CSS見本 | CSS | |
| 太字や斜体、アンダーライン、背景色等、文字を修飾する機能を紹介します。 | HTML+CSS見本 | CSS | |
| フォントストレッチでフォントを長体にしたり、平体にできます。 | HTML+CSS見本 | CSS | |
| 空白を保持する設定にして、固定ピッチのフォントを指定することでコンピュータのプログラム・リストを組版できます。 | HTML+CSS見本 | CSS | |
| 英文の単語の先頭を自動的に大文字にしたり、全てを大文字にしたり、あるいは小文字にすることができます。 | HTML+CSS見本 | CSS |
ページ番号に関連する見本
| 目次のページ番号を組版結果から自動的に設定することができます。 | HTML+CSS見本 | CSS | |
| 名前付きページごとにページ番号の形式などのページスタイルを指定できます。 | HTML+CSS見本 | CSS |
ボックスの位置指定、縦書き、ルビの見本
| 文字を配置するボックスの位置、大きさを絶対値で指定することができます。自由度の高い組版をすることができます。 | HTML+CSS見本 | CSS | |
| ボックスは相対位置指定、絶対位置指定、用紙に対する固定位置指定が使えます。 | HTML+CSS見本 | CSS | |
| ページ全体を縦書きに設定できます。さらに、ページの中の一部分を縦書きに設定することもできます。 | HTML+CSS見本 | CSS | |
| <ruby>要素を使って漢字の読み（ルビ）の表現ができます。 | HTML+CSS見本 | CSS |
表と箇条書きの見本
| テーブルのカラム幅の設定例です。 | HTML+CSS見本 | CSS | |
| テーブルのカラムスパンとロースパンの設定例です。見栄えのいい表を作成するのに必須の機能です。 | HTML+CSS見本 | CSS | |
| テーブルの枠の幅や文字との間隔を自由に設定することができます。 | HTML+CSS見本 | CSS | |
| テーブルのセル内の文字を上端に寄せたり下端に寄せたりすることができます。 | HTML+CSS見本 | CSS | |
| テーブルに関するさまざまな機能を組み合わせて作成した貸借対照表の例です。 | HTML+CSS見本 | CSS | |
| 表全体を右寄せ、中央、左寄せ、外側寄せ、内側寄せをすることができます。 | HTML+CSS見本 | CSS | |
| 表がページを跨るとき、ヘッダ、フッタを各ページ毎に繰り返すか、繰り返さないかを指定できます。 | HTML+CSS見本 | CSS | |
| 表の行がページを跨るか、跨らないようにする（同一ページに入れる）かを指定できます。 | HTML+CSS見本 | CSS | |
| 表全体を回転できます。 | HTML+CSS見本 | CSS | |
| 箇条書きは、見出し、本文の幅、見出しと本文の間隔などを自由に設定できます。 | HTML+CSS見本 | CSS |
PDFのリンクを自動生成する見本
PDFのリンクは、PDF文書内の特定位置へのリンクと外部ファイルへのリンクがあります。
| <a> タグからPDFのリンクを生成します。内部リンクと外部リンクは、href 属性で設定します。指定されているのがid なら内部リンク、外部のURL なら外部リンクです。 | HTML+CSS見本 | CSS |
カラー空間の指定
| rgb-icc(R,G,B,#GrayScale,value)。valueにグレースケール値を設定します。value0が黒、value1が白です。画面表示などに使う代替色をRGBの値に指定します。 | HTML+CSS見本 | CSS | |
| rgb-icc(R,G,B,#CMYK,<C>,<M>,<Y>,<K>)。CMYK値に0.0 - 1.0 または%値を設定します。 | HTML+CSS見本 | CSS |
フロートを使って画像と本文を配置する見本
フロート機能を使うことでテクニカル・マニュアルのような図と本文の並列、本文を図を避けて流すレイアウトができます。
| サイド・フロートで、float="start", float="end"を指定した例、及びグラフィックスがテキストのインデントの領域の中にフロートしている例です。 | HTML+CSS見本 | CSS | |
| フロートを応用して、日本語と英語を並列表記するレイアウトを実現した例です。 | HTML+CSS見本 | CSS |
文庫本のページのように出力する見本
| AH Formatter に青空文庫のXHTMLのURLとサンプルCSSを指定して組版すると、文庫本のページのようにA6版縦書きで組版されます。PDFは、「走れメロス」を、サンプルCSSを使って組版後、PDFファイルに出力した結果です。 | HTML | CSS |
Antenna House による拡張仕様を使用したレイアウト見本
日本語組版機能
| 行頭にNonStarter文字「ゃゅょ」「っ」「ー・ゝゞヽヾ々」などを配置しないように禁則処理を行います。 | HTML+CSS見本 | CSS | |
| 仮名漢字と数字の間、あるいは仮名漢字とアルファベットの間に空白を自動挿入することができます。 | HTML+CSS見本 | CSS | |
| 行頭で全角約物(開き括弧など)を半角に扱いしたり、行末で全角約物(閉じ括弧など)を半角することができます。 | HTML+CSS見本 | CSS | |
| 日本語での隣接する全角約物の間詰めや文字と全角約物の間の詰めの有無を指定できます。 | HTML+CSS見本 | CSS | |
| 行末で句読点（全角の「。、．，」）のぶら下げを処理します。 | HTML+CSS見本 | CSS |
欧文組版機能
| 欧文ペアカーニングを行うことができます。 | HTML+CSS見本 | CSS | |
| フォントに合字が定義されていれば、欧文合字処理（リガチャ）を行うことができます。 | HTML+CSS見本 | CSS |
PDF作成のための機能追加
| PDFには「しおり」と呼ばれる機能があります。Acrobat Readerでは「しおり」は、目次を階層化した概観を持っており、項目をクリックすることにより目的の位置へジャンプすることができます。AH Formatterでは、しおりを作成したいオブジェクトに -ah-bookmark-level、-ah-bookmark-label等のプロパティを付加することでPDFに自動的にしおりを作成することができます。 | HTML+CSS見本 | CSS | |
| -ah-outline-group指定により、PDFの「しおり」をグループ化して、まとめて出力することができます。この例では「サンプル」というグループを作っています。 | HTML+CSS見本 | CSS | |
| PDFには注釈（annotation）と呼ばれる機能があります。AH Formatterを使用すると、このうちテキスト注釈、フリーテキスト注釈、ラバースタンプ注釈、添付ファイル注釈を作成することができます。 | HTML+CSS見本 | CSS | |
| 印刷用にトンボをつけることができます。トンボの種類、色、長さ、幅などを指定できます。 | HTML+CSS見本 | CSS |
CSS仕様の拡張
| ページ全体に色を付けることができます。 | HTML+CSS見本 | CSS | |
| ページ全体の背景画像を指定することができます。 | HTML+CSS見本 | CSS | |
| ページの各領域の境界に境界線を引くことができます。 | HTML+CSS見本 | CSS | |
| 改訂バーを本文の左右に置くことができます。バーのスタイルや幅、色、位置等を指定することができます。 | HTML+CSS見本 | CSS | |
| counter-reset: footnote; で脚注番号を初期化し、::footnote-marker で脚注番号を参照することができます。 | HTML+CSS見本 | CSS | |
| 段組したとき段間に罫線を引くことができます。線種や線幅、色、長さ等を設定することができます。 | HTML+CSS見本 | CSS | |
| 段組の段間罫の指定を適用することができます。 | HTML+CSS見本 | CSS | |
| ボーダーを拡張して、「丸め罫」を作成することができます。またボーダーに影（ボックスシャドウ）をつけることができます。 | HTML+CSS見本 | CSS | |
| ボーダーの一種として「対角罫」を作成することができます。色、スタイル、幅が指定できます。 | HTML+CSS見本 | CSS |
グラフィックスの見本
| EPSを埋め込んだ例です。EPSは画面とWindowsプリンタ出力、PDF出力ではプレビューイメージを表示します。Windows2000/XPでPostscriptプリンタドライバ、AcrobatDistillerの組み合わせでPDFを作成するとEPSの画像がPDFに埋め込まれます。EPSにプレビューイメージがない場合、XSL FormatterのPDF出力では、DistillerもしくはGhostscriptを設定ファイルに指定すればEPSの画像をPDFに埋め込むことができます。 | HTML+CSS見本 | CSS | |
| SVGオプションを使用すれば、SVGの描画命令をPDFの描画命令に変換してPDFに埋め込みますので、Acrobat Distillerと同様の高精度な画像品質となります。 | HTML+CSS見本 | CSS | |
| SVGを使って「すかし」を入れることができます。 | HTML+CSS見本 | CSS | |
| CGMオプションを使用するれば、科学技術分野で使用されるCGM画像を表示することができます。 | HTML+CSS見本 | CSS |
MathMLによる数式の見本
| MathMLでマークアップした数式をインライン・オブジェクトやブロック・オブジェクトとして埋め込むことが可能です。 | HTML+CSS見本 | CSS | |
| MathMLをつかって、科学技術出版物を作成することができます。 | HTML+CSS見本 | CSS |
※AH Formatter V5 Lite版でMathMLを利用するには、MathMLオプションが必要です。