CSSで 書 籍 組 版 を ( 有 )イー エイド 藤 島 雅 宏 FormatterClub CSS 書 籍 組 版 セミナー 講 演 資 料 開 催 日 2013 年 10 月 18 日 会 場 東 京 都 中 央 区 浜 町 区 民 館
簡 単 そう 易 しい 簡 単 なことしかできない CSSはWeb 用 であり 組 版 機 能 が 劣 る コンテンツはHTMLなので 構 造 が 簡 単 デフォルトのスタイルでそれらしく 組 める CSSによるスタイルシートは 直 截 的 に 分 かる
HTMLコンテンツの 構 造 <html> <head> <title>htmlコンテンツ</title> </head> <body> <h1> 大 見 出 し</h1> <p>テキスト</p> <h2> 中 見 出 し</h2> <p>テキスト</p> <h3> 小 見 出 し</h3> <p>テキスト</p> </body> </html>
Listの 構 造 <ul> <li> </li> <li> </li> </ul> <ol> <li> </li> <li> </li> </ol> <dl> <dt> </dt> <dd> </dd> </dl>
Tableの 構 造 (1) <table> <caption> 表 題 </caption> <colgroup> <col> </col> <col> </col> </colgroup> <thead> <tr><th> </th> <th> </th> </tr> </thead>
Tableの 構 造 (2) <tfoot> <tr><td> </td> <td> </td> </tr> </tfoot> <tbody> <tr><td> </td> <td> </td> </tr> </tbody> </table>
Bodyの 構 造 (2) <div> <h2>タイトル</h2> <p> </p> </div> <blockquote> <p> </p> </blockquote> <hr> <address> <br> </address>
CSSの 記 述 が 分 かりやすい 整 形 されたコンテンツが 相 手 だから 目 的 の 要 素 に 対 して 必 要 な 組 み 指 定 をして いけばよい 共 通 指 定 固 別 指 定 選 択 指 定 など 様 々な 要 素 選 別 機 能 がある 複 雑 な 親 子 関 係 階 層 構 造 を 取 らない
スタイルの 指 定 方 法 デフォルト 設 定 AH Formatterのデフォルト <link rel= stylesheet type= text/css href= css/styles.css /> <style> @import css/styles.css ; p { font family: sans serif; } </style> <p style= font family: sans serif; > </p>
セレクタ タイプセレクタ h1 { font size: 24pt; } 属 性 セレクタ h1[class= display ] { color: red; } 部 分 一 致 の 属 性 セレクタ ~= copyright = en ^= image $=.html *= hellow IDで 分 類 h1#chapter1 { font family: fantasy; }
疑 似 クラス 要 素 :root 要 素 :nth child() 要 素 :nth last child() 要 素 :nth of type() 要 素 :nth last of type() 要 素 :first child 要 素 :last child 要 素 :first of type 要 素 :last of type 要 素 :only child 要 素 :only of type 要 素 :empty 要 素 :not
疑 似 要 素 要 素 ::first line p::first line { text transform: uppercase; } 要 素 ::first letter p::first letter { font size: 3em; color: red; } 要 素 ::before h1::before { content: counter(chapno). } 要 素 ::after h1::after { content: counter(chapno). }
結 合 子 子 要 素 または 子 孫 要 素 親 要 素 子 要 素 子 供 要 素 親 要 素 > 子 要 素 隣 接 要 素 要 素 名 1+ 要 素 名 2 兄 弟 要 素 要 素 名 1~ 要 素 名 2
脚 注 側 注 リストマーカー 脚 注 呼 び 出 し 疑 似 要 素 要 素 名 ::footnote call 脚 注 マーカー 疑 似 要 素 要 素 名 ::footnote marker 側 注 呼 び 出 し 疑 似 要 素 要 素 名 ::sidenote call 側 注 マーカー 疑 似 要 素 要 素 ::sidenote marker リストマーカー 疑 似 要 素 list::marker
@ルール ファイルの 取 り 込 み 対 象 媒 体 指 定 文 字 コード 指 定 ネームスペース フォント 指 定 ページ 指 定 @page Name @page:first @pqge:right @footnote @import url(url) @media @charset @namespace @font face @page @page:blank @page:left マージンボックス @sidenote
関 数 (1) 属 性 関 数 attr(ident type? [, value]? ) 計 算 関 数 calc(16em + 6pt ) カウンタ 関 数 counter( par num, upper roman) 複 合 カウンタ 関 数 counters( ident, string, list style type ) リーダ 関 数 矩 形 関 数 left) 埋 込 矩 形 関 数 leader(dotted) rect( top, right, bottom,
関 数 (2) 文 字 列 関 数 string( ident ) 対 象 カウンタ 関 数 target counter() 対 象 複 合 カウンタ 関 数 target counters() 対 象 テキスト 関 数 target text() URL 関 数 url( string ) 拡 張 属 性 関 数 ah attr from() 拡 張 色 指 定 関 数 ah rgb icc()
関 数 (3) 連 裁 関 数 running() 連 載 要 素 関 数 element() 装 置 依 存 色 指 定 関 数 device cmyk() 線 形 グラデーション 関 数 linear gradient() 円 形 グラデーション 関 数 radial gradient() 繰 り 返 し 線 形 グラデーション liear gradient() 繰 り 返 し 円 形 グラデーション radial gradient()
関 数 (4) 変 形 ( ah )transform 変 形 原 点 ( ah )transform origin マトリックス 関 数 matrix() 平 行 移 動 関 数 translate() X/Y 縮 尺 関 数 scale() X/Y 回 転 関 数 rotate() 傾 斜 関 数 skew() X/Y
基 本 的 な 組 版 機 能 ボックス margin border padding 文 字 設 定 font line height 段 落 設 定 行 揃 え 段 組 み 日 本 語 文 字 組 版 ルビおよび 圏 点 表 組 リスト 画 像 配 置 背 景 色 フロート 脚 注 側 注
複 雑 多 岐 な 組 版 機 能 日 本 語 組 版 機 能 の 拡 張 仕 様 縦 組 み ルビ 圏 点 多 段 組 み 等 の 機 能 充 実 フロート 機 能 でボックスの 位 置 決 め 機 能 トンボ ツメ 塗 足 し 等 印 刷 固 有 の 指 定 SVG MathMLをサポート 目 次 と 索 引 手 作 りによる 補 助 作 業 PDF 出 力 による 汎 用 性 拡 充
AH FormatterのCSS 拡 張 値 の 拡 張 関 数 の 拡 張 単 位 の 拡 張 dot dash, dot dot dash, wave グラデーション 関 数 など PDF 出 力 における 文 書 情 報 q, vmin, vmax, pvw, pvh, gr 脚 注 行 番 号 行 継 続 マーク 改 定 バー オーバーフローの 拡 張 CSS3プロパティ V6.1 拡 張
CSS 指 南 V2.α 可 能 な 限 り 全 てのプロパティを 紹 介 用 例 を 豊 富 に 掲 載 した Formatter V6.1の 機 能 を 収 録 章 別 にページの 振 り 直 し 爪 の 高 さ 位 置 を 改 段 状 に 配 置 章 番 号 ページ 巻 末 索 引 を 付 け プロパティの 参 照 を 容 易 に 多 言 語 組 版 の 事 例 欠 如 ーーゴメンナサイ
爪 の 作 成 @page Chapter:left { @left middle { margin left: 3mm; margin right: 4mm; background color: #eee; content: string(chapterno) " 章 "; font size: 4mm; line height: 1.2; font family: sans serif; text align: center; padding: 1mm 1mm 1mm 4mm; } }
階 段 状 ツメの 作 成 @page Chapter:left { @left middle { margin top: calc( 0mm + 20mm * ((counter(chapterno) 1) mod 10) ); margin bottom: calc(197mm 20mm * ((counter(chapterno) 1) mod 10) ); } }
その 他 事 例 紹 介 章 ごとの 分 冊 組 版 レイアウトデザイン 見 本 帳 から ガリ 版 刷 り 創 立 記 念 誌 の 復 刻
これからの 課 題 HTMLデータの 構 造 化 セレクタ @ルール 関 数 の 機 能 拡 張 -- 指 定 の 輻 輳 による 混 乱 -- 組 版 機 能 の 多 国 語 対 応 拡 充 組 版 機 能 の 詳 細 化 特 殊 化 自 動 化 の 限 界 -- 手 作 業 による 補 助 機 能 の 多 様 化 に 伴 い 学 習 が 困 難 に 特 殊 記 号 の 拡 充
HTML5の 活 用 構 造 化 のすすめ section article aside hgroup header footer nav figure figcaption
将 来 性 W3C 規 格 のモジュール 化 した 課 題 ごとの 開 発 必 要 な 機 能 から 随 時 取 り 込 み W3CのWGでは 連 日 多 くの 意 見 交 換 が 電 子 組 版 への 展 望 を 見 据 えた 開 発 まだまだ 先 の 開 発 目 標
CSS 拡 張 メタ 言 語 SCSS(Sass) Rubyで 書 かれたスタイルシート 言 語 (Syntactically Awesom Style Sheet) LESS JavaScriptで 書 かれたスタイルシート 言 語 メリット CSSの 効 率 的 なコーディング 統 一 された 記 述 による 可 読 性 向 上 デメリット 環 境 構 築 が 必 要 開 発 チーム 全 員 の 再 教 育 クライアントへのデータ 渡 しの 検 討
終 わりに 組 版 機 能 は 拡 張 を 含 めて 豊 富 にある カスタマイズ ローカライズができる ウィットに 富 んだ 構 成 を 楽 しむ データとスタイルの 分 離 にこだわらない HTMLデータの 作 り 方 に 工 夫 を 構 造 的 なCSS 構 築 の 工 夫 を
有 難 うございました ( 有 )イー エイド 藤 島 雅 宏