{"id":15501,"date":"2023-04-21T19:21:30","date_gmt":"2023-04-21T10:21:30","guid":{"rendered":"https:\/\/blog.antenna.co.jp\/ILSoft2\/?p=15501"},"modified":"2023-04-21T19:21:30","modified_gmt":"2023-04-21T10:21:30","slug":"%ef%bc%bbcss%e7%b5%84%e7%89%88%ef%bc%bd%e3%83%9a%e3%83%bc%e3%82%b8%e7%95%aa%e5%8f%b7%e3%81%ae%e3%83%aa%e3%82%bb%e3%83%83%e3%83%88","status":"publish","type":"post","link":"https:\/\/blog.antenna.co.jp\/ILSoft2\/archives\/15501\/","title":{"rendered":"\uff3bCSS\u7d44\u7248\uff3d\u30da\u30fc\u30b8\u756a\u53f7\u306e\u30ea\u30bb\u30c3\u30c8"},"content":{"rendered":"<div id=\"cover\">\n<p>\u4eca\u56de\u7d39\u4ecb\u3059\u308b\u306e\u306f\u300c\u8868\u7d19\u3092\u540c\u4e00\u306eHTML\u304b\u3089\u751f\u6210\u3059\u308b\u3068\u304d\u3001<br \/>\n                \u8868\u7d19\u306e\u30da\u30fc\u30b8\u756a\u53f7\u306f\u30ab\u30a6\u30f3\u30c8\u3057\u305f\u304f\u306a\u3044\u300d\u3068\u3044\u3046\u8981\u671b\u306e\u5b9f\u73fe\u306b\u3064\u3044\u3066\u3067\u3059\u3002\u8aa4\u308a\u304c\u3042\u308c\u3070\u3001\u3054\u6307\u6458\u3044\u305f\u3060\u3051\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n<p>\u7d44\u7248\u306b\u306fAntenna House CSS Formatter V7.3MR1\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u753b\u50cf\u306e\u3001\u30da\u30fc\u30b8\u756a\u53f7\u4ee5\u5916\u306e\u672c\u6587\u5185\u5bb9\u306b\u3064\u3044\u3066\u753b\u50cf\u306b\u3088\u3063\u3066\u5dee\u7570\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u8a18\u4e8b\u3092\u4f5c\u308a\u306a\u304c\u3089\u90fd\u5ea6\u7d44\u7248\u3092\u3057\u3066\u3044\u305f\u305f\u3081\u3067\u3001\u672c\u984c\u306b\u306f\u652f\u969c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<\/p><\/div>\n<div id=\"mainmatter\">\n<p>CSS\u30da\u30fc\u30b8\u7d44\u7248\u3067\u30da\u30fc\u30b8\u756a\u53f7\u3092\u53c2\u7167\u3059\u308b\u306b\u306f\u3001<code>content: counter(page)<\/code>\u3068\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u30ea\u30bb\u30c3\u30c8\u672a\u6307\u5b9a\u3067\u306e\u30da\u30fc\u30b8\u756a\u53f7\u30ab\u30a6\u30f3\u30c8\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code>@page {\n    size: JIS-B5 portrait;\n    margin: 2cm;\n    @bottom-center {\n        content: counter(page);\n        font-size: 24pt;\n        font-variant: oldstyle-nums;\n    }\n}<\/code><\/pre>\n<p><code>@page<\/code>\u30eb\u30fc\u30eb\u3067\u5168\u4f53\u306e\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<code>@bottom-center<\/code>\u3067\u30da\u30fc\u30b8\u756a\u53f7\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u306d\u3002<\/p>\n<figure><a href=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/01-1024x723.png\" alt=\"\" width=\"625\" height=\"441\" class=\"aligncenter size-large wp-image-15503\" \/><\/a><\/figure>\n<p>1\u679a\u76ee\u306e\u30da\u30fc\u30b8\u306b\u300c1\u300d\u30012\u679a\u76ee\u306e\u30da\u30fc\u30b8\u306b\u300c2\u300d\u304c\u632f\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2>page\u30ab\u30a6\u30f3\u30bf\u3092\u30ea\u30bb\u30c3\u30c8<\/h2>\n<p>1\u679a\u76ee\u3092\u8868\u7d19\u30da\u30fc\u30b8\u3068\u3057\u3066\u30012\u679a\u76ee\u306e\u30da\u30fc\u30b8\u306b\u300c1\u300d\u304c\u632f\u3089\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u3068\u3053\u308d\u3067CSS\u306e\u30ab\u30a6\u30f3\u30bf\u306f\u30da\u30fc\u30b8\u7d44\u7248\u306b\u9650\u3089\u306a\u3044\u6c4e\u7528\u7684\u306a\u4ed5\u7d44\u307f\u3067\u3059\u3002<code>page<\/code>\u306f\u30da\u30fc\u30b8\u7d44\u7248\u306e\u3068\u304d\u3001\u5b9a\u7fa9\u6e08\u307f\u306e\u30ab\u30a6\u30f3\u30bf\u540d\u3068\u3057\u3066\u5b58\u5728\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3059\u3002<br \/>\n    \u3064\u307e\u308a\u3001\u30ab\u30a6\u30f3\u30bf\u30ea\u30bb\u30c3\u30c8\u306e\u4ed5\u7d44\u307f\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u30da\u30fc\u30b8\u756a\u53f7\u306b\u3064\u3044\u3066\u3082\u30ea\u30bb\u30c3\u30c8\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<pre><code>... {\n      counter-reset: page 1;\n     }<\/code><\/pre>\n<p>\u3067\u304d\u308b\u3053\u3068\u304c\u5206\u304b\u3063\u305f\u3068\u3053\u308d\u3067\u3001\u6b21\u306e\u554f\u984c\u3001\u3059\u306a\u308f\u3061\u300c\u3069\u306e\u30bb\u30ec\u30af\u30bf\uff08\u8981\u7d20\u30fb\u30eb\u30fc\u30eb\uff09\u306b\u30ea\u30bb\u30c3\u30c8\u3092\u8a18\u8ff0\u3059\u308b\u304b\u300d\u306b\u79fb\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u300c\u8868\u7d19\u30da\u30fc\u30b8\u300d\u3068\u300c\u305d\u308c\u4ee5\u5916\u306e\u30da\u30fc\u30b8\u300d\u3068\u3044\u3046\u5206\u3051\u65b9\u304c\u3067\u304d\u307e\u3059\u3002\u300c\u8868\u7d19\u7528\u306e\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u3001<br \/>\n    \u300c\u672c\u6587\u7528\u306e\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u304c\u7528\u610f\u3067\u304d\u308b\u3068\u5b09\u3057\u3044\u308f\u3051\u3067\u3059\u3002<code>@page<\/code>\u30eb\u30fc\u30eb\u3067\u306f\u3001\u305d\u3046\u3044\u3046\u51e6\u7406\u304c\u66f8\u3051\u307e\u3059\u3002<\/p>\n<pre><code>@page {...}\n@page mainmatter {\n  counter-reset: page 1;     \n}\n#cover {\n    break-after: always;  \n}\ndiv#mainmatter {\n    page: mainmatter;\n}<\/code><\/pre>\n<pre><code>&lt;div id=\"cover\">\n    &lt;h1>\uff3bCSS\u7d44\u7248\uff3d\u30da\u30fc\u30b8\u756a\u53f7\u306e\u30ea\u30bb\u30c3\u30c8&lt;\/h1>\n    &lt;p>\u4eca\u56de\u7d39\u4ecb\u3059\u308b\u306e\u306f...&lt;\/p>\n&lt;\/div>\n&lt;div id=\"mainmatter\">\n    &lt;p>CSS\u30da\u30fc\u30b8\u7d44\u7248\u3067\u30da\u30fc\u30b8\u756a\u53f7\u3092\u53c2\u7167\u3059\u308b\u306b\u306f\u3001...&lt;\/p>\n&lt;\/div><\/code><\/pre>\n<figure><a href=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/02-300x211.png\" alt=\"\" width=\"300\" height=\"211\" class=\"aligncenter size-medium wp-image-15508\" \/><\/a><\/figure>\n<p>\u4e0a\u624b\u304f\u3044\u3063\u305f\u2026\u2026\u3068\u6cb9\u65ad\u3059\u308b\u306e\u306f\u307e\u3060\u65e9\u3044\u3067\u3059\u3002\u3053\u306e\u307e\u307e\u3067\u306f\u3001<code>@page mainmatter<\/code>\u306e\u5bfe\u8c61\u30da\u30fc\u30b8\u304c\u5207\u308a\u63db\u308f\u308b\u5ea6\u306bpage\u306f1\u306b\u30ea\u30bb\u30c3\u30c8\u3055\u308c\u308b\u306e\u3067\u3059\u3002<\/p>\n<figure><a href=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/03-300x212.png\" alt=\"\" width=\"300\" height=\"212\" class=\"aligncenter size-medium wp-image-15509\" \/><\/a><\/figure>\n<p>\u30ea\u30bb\u30c3\u30c8\u5bfe\u8c61\u306e\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3067\u6761\u4ef6\u4ed8\u3051\u3059\u308b\u3053\u3068\u3067\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<code>@page mainmatter<\/code>\u306b<code>:first<\/code>\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u3001\u300cmainamtter\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u4f7f\u7528\u3055\u308c\u308b\u6700\u521d\u306e\u30da\u30fc\u30b8\u3067page\u30921\u306b\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u300d\u3068\u3044\u3046\u51e6\u7406\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code> @page mainmatter:first {\n    counter-reset: page 1;     \n}<\/code><\/pre>\n<figure><a href=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/04.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/04-300x210.png\" alt=\"\" width=\"300\" height=\"210\" class=\"aligncenter size-medium wp-image-15510\" \/><\/a><\/figure>\n<p>\u671f\u5f85\u3059\u308b\u51fa\u529b\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<h2>\u8868\u7d19\u306e\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u304b\u3089\u30da\u30fc\u30b8\u756a\u53f7\u3092\u524a\u9664\u3059\u308b<\/h2>\n<p>\u3064\u3044\u3067\u306b\u3001\u8868\u7d19\u30da\u30fc\u30b8\u304b\u3089\u306f\u30da\u30fc\u30b8\u756a\u53f7\u8868\u793a\u3092\u5916\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<pre><code>@page cover {\n    @bottom-center {\n        \/*bottom-center\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4e0a\u66f8\u304d*\/\n        content:\"\";\n    }\n}\n#cover {\n    \/*cover\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u9069\u7528*\/\n    page: cover;\n    break-after:always;\n}<\/code><\/pre>\n<figure><a href=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/05.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2023\/04\/05-300x211.png\" alt=\"\" width=\"300\" height=\"211\" class=\"aligncenter size-medium wp-image-15512\" \/><\/a><\/figure>\n<section>\n<h2>\u53c2\u8003<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.antenna.co.jp\/AHF\/\">XSL-FO\uff0fCSS\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306b\u3088\u308a\u3001XML\u3068HTML\u3092\u30b5\u30fc\u30d0\u30fc\u4e0a\u3067\u9ad8\u901f\u306bPDF\u306b\u5909\u63db\uff01 &#8211; Antenna House Formatter<\/a><\/li>\n<li><a href=\"https:\/\/www.antenna.co.jp\/AHF\/ahf_publication\/index.html#CSSPrint\">\u300eCSS\u30da\u30fc\u30b8\u7d44\u7248\u5165\u9580\u300f\uff08\u30a2\u30f3\u30c6\u30ca\u30cf\u30a6\u30b9\u682a\u5f0f\u4f1a\u793e\uff09<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/2013\/WD-css3-page-20130314\/#page-based-counters\">7.1. Page-based counters  CSS Paged Media Module Level 3<\/a>\n        <\/li>\n<\/ul>\n<\/section>\n<\/div>\n<div><a href=\"https:\/\/www.antenna.co.jp\/AHF\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/192.168.16.141\/ILSoft2\/wp-content\/uploads\/2020\/02\/20200220_v7logo-300x55.png\" alt=\"\" width=\"300\" height=\"55\" class=\"aligncenter size-medium wp-image-10730\" \/><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u7d39\u4ecb\u3059\u308b\u306e\u306f\u300c\u8868\u7d19\u3092\u540c\u4e00\u306eHTML\u304b\u3089\u751f\u6210\u3059\u308b\u3068\u304d\u3001 \u8868\u7d19\u306e\u30da\u30fc\u30b8\u756a\u53f7\u306f\u30ab\u30a6\u30f3\u30c8\u3057\u305f\u304f\u306a\u3044\u300d\u3068\u3044\u3046\u8981\u671b\u306e\u5b9f\u73fe\u306b\u3064\u3044\u3066\u3067\u3059\u3002\u8aa4\u308a\u304c\u3042\u308c\u3070\u3001\u3054\u6307\u6458\u3044\u305f\u3060\u3051\u308c\u3070\u5e78\u3044\u3067\u3059\u3002 \u7d44\u7248\u306b\u306fAntenna House CSS For [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,48],"tags":[89],"class_list":["post-15501","post","type-post","status-publish","format-standard","hentry","category-ah-formatter","category-xsl-fo","tag-css"],"_links":{"self":[{"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/posts\/15501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/comments?post=15501"}],"version-history":[{"count":0,"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/posts\/15501\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/media?parent=15501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/categories?post=15501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.antenna.co.jp\/ILSoft2\/wp-json\/wp\/v2\/tags?post=15501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}