CSS での柱

CSS での簡単な柱の実現方法を解説します。FO での柱は、<fo:marker> と <fo:static-content> などを利用して行ないますが、CSS ではまったく異なる方法で行ないます。

柱を出す位置を決めます。
```
    @page {
      @top-right {
        content: element(xxx, first);
      }
    }
```
この例では、ページの右上 top-right に柱を出すことを示しています。xxx と first については後述します。
柱用の class を決めます。
```
    .header {
      position: running(xxx);
    }
```
ここでは header という class名を用います。xxx は、先の element で指定した柱の名前です。

HTML本文中の適当な位置に、柱を挿入します。

    <h1><span class="header">Lorem Ipsum</span > Lorem Ipsum </h1>
    <p>Lorem ipsum dolor sit amet, ...</p>
    <h1><span class="header">Aenean varius porta</span> Aenean varius porta </h1>
    <p>Proin vestibulum. Phasellus lacus magna, ...</p>
    ...

ここで、<span class="header"> の内容が柱となります。この内容は、本文中には表示されません。

ページ中に出現する複数の柱の要素に対して、element に first を指定すると最初に出現した柱が、last を指定すると最後に出現した柱が採用されます。柱の要素が出現しなければ、直前のページの柱と同じ柱となります。
ついでに、ノンブルを付けるには次のようにします。
```
    @bottom-center {
      content: "-" counter(page) "-";
    }
```
この例では、ページの下中央に “- 1 -“, “- 2 -“… とノンブルを出力します。