Style Tiles

[pageHeader & pageNav]: basics.html#pageHeader & pageNav

[link icon]: page_component.html#link icon

btnList

ボタンのリストです。

デザイン

コードハイライト

<ul class="btnList">
  <li><a href="/ja/sample/" class="btn">ベータ版を試す</a></li>
  <li><a href="https://groups.google.com/forum/?hl=ja#!forum/vivliostyle-ja" target="_blank" class="btn">Vivliostyleの最新情報を受け取る<small>(メーリングリストに登録)</small></a></li>
</ul>

dateList

日付&リンクのリストです。

デザイン

2015/11/12
Vivliostyle、札幌TPACでW3C CEO Jeff Jaffe氏と面談
2015/10/16
EPAセミナー「電子出版ビューア最前線 Vivliostyleと超縦書」
2015/11/24
Vivliostyle Formatter 0.1.4 リリースしました

コードハイライト

<dl class="dateList dateList-press">
  <dt>2015/11/12</dt>
  <dd><a href="DUMMY">Vivliostyle、札幌TPACでW3C CEO Jeff Jaffe氏と面談</a></dd>
</dl>
<dl class="dateList dateList-blog">
  <dt>2015/10/16</dt>
  <dd><a href="DUMMY">EPAセミナー「電子出版ビューア最前線 Vivliostyleと超縦書」</a></dd>
</dl>
<dl class="dateList dateList-updates">
  <dt>2015/11/24</dt>
  <dd><a href="DUMMY">Vivliostyle Formatter 0.1.4 リリースしました</a></dd>
</dl>

directoryNav

パンくずナビです。

デザイン

コードハイライト

<ul class="directoryNav">
  <li><a href="DUMMY">News</a></li>
  <li><a href="DUMMY">Blog</a></li>
</ul>

docList

仕様のリストです。行間が広めのリスト表示です。

デザイン

コードハイライト

<div class="pageBody">
  <ul class="docList">
    <li><a href="http://www.w3.org/TR/html5/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://www.w3.org/TR/html5/', 'HTML5');"><b>HTML5</b></a></li>
    <li><a href="http://www.w3.org/Style/CSS/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://www.w3.org/Style/CSS/', 'CSS: Cascading Style Sheets');"><b>CSS: Cascading Style Sheets</b></a></li>
    <li><a href="http://www.w3.org/TR/CSS2/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://www.w3.org/TR/CSS2/', 'CSS2.1');">CSS2.1</a> / <a href="http://dev.w3.org/csswg/css2/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css2/', 'CSS2.2(Editors&#8217;s Draft)');">CSS2.2(Editors&#8217;s Draft)</a></li>
    <li><a href="http://dev.w3.org/csswg/css-page/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css-page/', 'CSS Paged Media');">CSS Paged Media</a></li>
    <li><a href="http://dev.w3.org/csswg/css-gcpm/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css-gcpm/', 'CSS Generated Content for Paged Media (GCPM) 3');">CSS Generated Content for Paged Media (GCPM) 3</a> / <a href="http://dev.w3.org/csswg/css-gcpm-4/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css-gcpm-4/', 'GCPM 4');">GCPM 4</a> / <a href="https://books.spec.whatwg.org/" onclick="__gaTracker('send', 'event', 'outbound-article', 'https://books.spec.whatwg.org/', 'Books(whatwg)');">Books(whatwg)</a></li>
    <li><a href="http://dev.w3.org/csswg/css-regions/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css-regions/', 'CSS Regions');">CSS Regions</a></li>
    <li><a href="http://dev.w3.org/csswg/css-break/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css-break/', 'CSS Fragmentation');">CSS Fragmentation</a></li>
    <li><a href="http://dev.w3.org/csswg/css-writing-modes/" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://dev.w3.org/csswg/css-writing-modes/', 'CSS Writing Modes');">CSS Writing Modes</a></li>
  </ul>
</div>

faqList

FAQのリストです。

デザイン

Webブラウザエンジンに足りないページ組版機能はどうしますか?
必要なCSS仕様のW3C標準化とWebブラウザへの実装を促すとともに、必要な組版機能をJavaScriptで実装します。
Webブラウザエンジンを使ってPDF出力を行うオープンソースのツールは既にいくつか存在しますが、それらを利用するのですか?
すでにあるオープンソースをできるかぎり利用し、それで足りない機能を実装していくことになるでしょう。その成果はもとのオープンソースにも還元・貢献して、より多くの人が恩恵を得られるようにします。

コードハイライト

<dl class="faqList">
  <dt>Webブラウザエンジンに足りないページ組版機能はどうしますか?</dt>
  <dd>必要なCSS仕様のW3C標準化とWebブラウザへの実装を促すとともに、必要な組版機能をJavaScriptで実装します。</dd>
  <dt>Webブラウザエンジンを使ってPDF出力を行うオープンソースのツールは既にいくつか存在しますが、それらを利用するのですか?</dt>
  <dd>すでにあるオープンソースをできるかぎり利用し、それで足りない機能を実装していくことになるでしょう。その成果はもとのオープンソースにも還元・貢献して、より多くの人が恩恵を得られるようにします。</dd>
</dl>

figureList

画像&見出し&テキストのリストです。

デザイン

柱・ノンブル
各ページ共通の柱やノンブルを配置できます。

1つのhtmlファイルによる構成

HTMLとCSSをひと組用意するだけのシンプルな構成です。長大な文章もVivliostyleが自動的にページ分割して表示します。ヘッダ・フッタや柱・ノンブルなども表示できます。

コードハイライト

<div class="pageBody">
  <figure class="figureList">
    <img src="/images/top/fig_function_01.png" alt="" />
    <dl>
    <dt>柱・ノンブル</dt>
    <dd>各ページ共通の柱やノンブルを配置できます。</dd>
    </dl>
  </figure>
  <figure class="figureList">
    <img src="/images/top/fig_file_01.png" alt="" />
    <h3 class="noborder">1つのhtmlファイルによる構成</h3>
    <figcaption>HTMLとCSSをひと組用意するだけのシンプルな構成です。長大な文章もVivliostyleが自動的にページ分割して表示します。ヘッダ・フッタや柱・ノンブルなども表示できます。</figcaption>
  </figure>
</div>

groupList

見出しとリンク集がセットになったリストです。

デザイン

コードハイライト

<div class="pageBody">
  <aside class="groupList">
    <h2>Updates</h2>
    <ul class="linkList linkList-updates">
      <li><a href="DUMMY">Vivliostyle Formatter 0.1.4 リリースしました</a></li>
      <li><a href="DUMMY">Vivliostyle Formatter 0.1.3 リリース EPUBを扱えるようになりました</a></li>
      <li><a href="DUMMY">Vivliostyle Formatter Linux版をリリースしました</a></li>
      <li><a href="DUMMY">Vivliostyle Formatter 0.1.0 (OS X, Windows) リリースしました</a></li>
      <li><a href="DUMMY">Vivliostyleのベータ版をリリースしました!</a></li>
    </ul>
  </aside>
</div>

linkList

リンクのリストです。
下記のクラスをul要素につけることで左端のアイコンを変更できます。

デザイン

コードハイライト

<div class="pageBody">
  <ul class="linkList">
    <li><a href="DUMMY">セミナーの概要、資料および映像</a></li>
    <li><a href="DUMMY">BPS株式会社</a></li>
    <li><a href="DUMMY">BPS株式会社|EPUB電子書籍</a></li>
    <li><a href="DUMMY">講演資料(Vivliostyle.jsを使用)</a></li>
  </ul>
  <ul class="linkList linkList-updates">
    <li><a href="DUMMY">Vivliostyle Formatter 0.1.4 リリースしました</a></li>
    <li><a href="DUMMY">Vivliostyle Formatter 0.1.3 リリース EPUBを扱えるようになりました</a></li>
    <li><a href="DUMMY">Vivliostyle Formatter Linux版をリリースしました</a></li>
    <li><a href="DUMMY">Vivliostyle Formatter 0.1.0 (OS X, Windows) リリースしました</a></li>
    <li><a href="DUMMY">Vivliostyleのベータ版をリリースしました!</a></li>
  </ul>
  <ul class="linkList linkList-blog">
    <li><a href="DUMMY">JEPAセミナー「電子出版ビューア最前線 Vivliostyleと超縦書」</a></li>
    <li><a href="DUMMY">大阪DTPの勉強会(8/29)で、Vivliostyle CSS組版の話をします</a></li>
    <li><a href="DUMMY">Balisage: The Markup Conference 2015 で発表します</a></li>
    <li><a href="DUMMY">電子出版EXPOに出展しました</a></li>
    <li><a href="DUMMY">XML London 2015 で Vivliostyle のプレゼンしました</a></li>
  </ul>
  <ul class="linkList linkList-press">
    <li><a href="DUMMY">Vivliostyle、札幌TPACでW3C CEO Jeff Jaffe氏と面談</a></li>
  </ul>
</div>

outlineList

項目名と説明文のセットのリストです。

デザイン

社名
株式会社ビブリオスタイル
Vivliostyle Inc.
URL
http://vivliostyle.com
代表者
代表取締役社長 村上 真雄(MURAKAMI Shinyu)
Twitter: @MurakamiShinyu
E-Mail: murakami@vivliostyle.com
設立
2014年8月12日
事業内容
ソフトウェア開発(とくにWeb・電子出版・印刷出版の組版関連)
Webおよび出版に関する技術標準の普及推進
Vivliostyleオープンソースプロジェクトの推進
パートナー
販売パートナー:株式会社エクスイズム
販売・技術パートナー:イースト株式会社
(Vivliostyle製品の技術サポート、カスタマイズ、一部開発など担当)

コードハイライト

<dl class="outlineList row">
  <dt class="pc-col-2">社名</dt>
  <dd class="pc-col-10">株式会社ビブリオスタイル<br>Vivliostyle Inc.</dd>
  <dt class="pc-col-2">URL</dt>
  <dd class="pc-col-10">http://vivliostyle.com</dd>
  <dt class="pc-col-2">代表者</dt>
  <dd class="pc-col-10">代表取締役社長 村上 真雄(MURAKAMI Shinyu)<br>Twitter: <a href="https://twitter.com/murakamishinyu">@MurakamiShinyu</a><br>E-Mail: <a href="mailto:murakami@vivliostyle.com">murakami@vivliostyle.com</a></dd>
  <dt class="pc-col-2">設立</dt>
  <dd class="pc-col-10">2014年8月12日</dd>
  <dt class="pc-col-2">事業内容</dt>
  <dd class="pc-col-10">ソフトウェア開発(とくにWeb・電子出版・印刷出版の組版関連)<br>Webおよび出版に関する技術標準の普及推進<br>Vivliostyleオープンソースプロジェクトの推進</dd>
  <dt class="pc-col-2">パートナー</dt>
  <dd class="pc-col-10">販売パートナー:株式会社エクスイズム<br>販売・技術パートナー:イースト株式会社<br>(Vivliostyle製品の技術サポート、カスタマイズ、一部開発など担当)</dd>
</dl>