ツイート
« 2009年02月26日 | メイン | 2009年03月04日 »
2009年03月02日
CSS3で得する話（１） URLを脚注に出す
CSSでWebを綺麗に印刷する方法として 「Improving Link Display for Print」（印刷するときURLを脚注にリストとして出す）という記事があります。
これはJavascriptを使って、URLを集めるようです。
ふーーん。便利そうだね。
ですが、CSS3の脚注機能を使うと、もっと簡単にできます。
ここに簡単なサンプルを作りました。
ｈｔｔｐ://www.antenna.co.jp/AHF/Samples/Footnote.html
このサンプルは、ブラウザで見ても勿論だめです。AH Formatterで見てください。インストールしたくない方は、AH Formatter のデモサイトで次のように見ることができます。
１．AH Formatter のデモサイト http://cssfo.antenna.co.jp/ を表示します。
２．Webへの活用例のページを表示します。
http://cssfo.antenna.co.jp/demo2.php
３．一般のサイトをみるの
URL入力に「http://www.antenna.co.jp/AHF/Samples/Footnote.html」を入力します。
４．URLを送信ボタンを押します。
５．PDF化が完了したら確認してみてください。
URLのリストが脚注になっているのが確認できると思います。
この部分のCSS3はこんな感じです。
・URLをaの後ろに出して、脚注に出す。
a:after {float: footnote;
content: attr(href) ;
font-size: 0.9em;
}
・脚注のレイアウト
@page {
...
@footnote {
counter-increment: footnote;
float: page bottom;
border-top: thin solid black;
border-length: 30%;
margin-top: 0.5em;
padding-top: 0.2em;
}
・脚注番号の追加
::footnote-call {
content: counter(footnote, decimal);
}
::footnote-marker {
content: counter(footnote, decimal);
-ah-margin-end: 0.5em;
text-indent: 0;
}
※ご注意
AH Formatterに添付のデフォルトスタイルシートでは、脚注番号にsuper-decimalを指定しています。
しかし、サーバのLinuxにはIPAフォントのみを乗せているため、super-decimalの脚注番号はMissing glyphになってしまいます。
そこで、デモサーバ上のCSSは、decimalに変更しています。ちょっとみすぼらしいですが、super-decimalのグリフのあるフォントを使えば綺麗にでます。
※super-decimalでは次のようになります。
ファイルをダウンロード
