見積書作成デモンストレーション
ここでは見積書などの、フォーマット化が必要でありながら、表示項目を可変させることのある書類について、デモンストレーションを通して、CSS3に準拠した「Antenna House Formatter V5.0」の機能を体験していただきます。
このデモンストレーションで体験していただけること
| No. | 内容 | class ※１ | プロパティ | デモ方法 |
|---|---|---|---|---|
| １． | 表組みの角設定 | round | -ah-border-radius | 角ありなし、Rも指定できます。 |
| ２． | 縦書きレイアウト | head2 | writing-mode | 入力した文章が縦書きで表示されます。 |
| ３． | 偶数行の網掛け処理 | even-rows-bg | tr:nth-child(even) | 偶数行にグレーの背景色を敷きます。 |
| ４． | セル幅に合わせた文字組み | justify | text-align text-align-last |
入力した文字をセルの幅に合わせ配置します。 |
| ５． | フォントに長体をかける | 100%： 80%：stretch-8 60%：stretch-8 |
font-stretch | セル内に収まるよう長体をかけます。(％指定) |
| ６． | 整数値、分数値表示 | - | 入力した数値によって、整数、分数表示を使い分けます。 | |
| ７． | 値のないセルに斜線を入れる | diagonal-line ※２ |
div:empty | 値のないセルに斜線を入れます。 |
※１：classの設定は活用例です。
下記の[PDFに書き出す]ボタンを押してPDFを書き出した際に、HTMLの作成例もご覧いただけるようになっています。
参考にしてください。
※２：７の斜線設定は、セル空の場合にのみemptyセレクタを使用し、-ah-reverse-diagonal-borderを設定しています。
下記の[PDFに書き出す]ボタンを押してPDFを書き出した際に、HTMLの作成例もご覧いただけるようになっています。
参考にしてください。
※２：７の斜線設定は、セル空の場合にのみemptyセレクタを使用し、-ah-reverse-diagonal-borderを設定しています。
