Style Tiles

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

[link icon]: page_component.html#link icon

borderedList

線つきのリスト表示です。PC版はテーブルのようなデザインになります。

デザイン



Vivliostyle Formatter 評価版 (Version 2016.1)


コードハイライト

<div class="pageBody">
  <div class="borderedList">
    <div class="row">
      <div class="sp-col-12 pc-col-12"><hr></div>
    </div>
    <div class="row">
      <div class="sp-col-12 pc-col-3">
        <h3 class="noborder">Vivliostyle.js</h3>
      </div>
      <div class="sp-col-12 pc-col-9">
        <ul>
        <li><a href="">Download <small>(Version 2016.1)</small></a></li>
        <li><a href="">リリースノート</a></li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="sp-col-12 pc-col-12"><hr></div>
    </div>
    <div class="row">
      <div class="sp-col-12 pc-col-3">
        <h3 class="noborder">Vivliostyle Formatter <small>評価版 (Version 2016.1)</small></h3>
      </div>
      <div class="sp-col-12 pc-col-9">
        <ul>
        <li>OS X [ <a href="">10.7-10.11</a> ]</li>
        <li>Windows [ <a href="">32bit</a> | <a href="">64bit</a> ]</li>
        <li>Linux [ <a href="">tar.gz</a> | <a href="">deb</a> | <a href="">rpm</a></li>
        <li><a href="">リリースノート</a></li>
        </ul>
      </div>
    </div>
    <div class="row pcOnly-block">
      <div class="sp-col-12 pc-col-12"><hr></div>
    </div>
  </div>
</div>

displayChanger

SP版とPC版で要素の表示を変更します

デザイン

SP版のみ表示。インラインで表示。
SP版のみ表示。インラインブロックで表示。
SP版のみ表示。ブロックで表示。
PC版のみ表示。インラインで表示。
PC版のみ表示。インラインブロックで表示。
PC版のみ表示。ブロックで表示。
SP版ブロック、PC版インラインで表示。
SP版インライン、PC版ブロックで表示。

コードハイライト

<div class="spOnly-inline">SP版のみ表示。インラインで表示。</div>
<div class="spOnly-inlineblock">SP版のみ表示。インラインブロックで表示。</div>
<div class="spOnly-block">SP版のみ表示。ブロックで表示。</div>
<div class="pcOnly-inline">PC版のみ表示。インラインで表示。</div>
<div class="pcOnly-inlineblock">PC版のみ表示。インラインブロックで表示。</div>
<div class="pcOnly-block">PC版のみ表示。ブロックで表示。</div>
<div class="spBlock-pcInline">SP版ブロック、PC版インラインで表示。</div>
<div class="spInline-pcBlock">SP版インライン、PC版ブロックで表示。</div>

grid

グリッドです。flexboxを使用しています。
親はrowクラス、
子は、

というクラスのセットでグリッドを作ります。

数字は12分割したうちの1という数字を示します。
2段組は12/6でcol-6、6段組は12/2でcol-2を数値に指定します。

入れ子

入れ子も可能です。
入れ子の場合、クラスで指定する数字は、
入れ子内の幅を12分割したうちの1という数字を示します。

段と段の間の隙間の設定

段と段の間に隙間を開けるときは下記のクラスを使ってカラム単位の幅で左マージンを設けることができます。

デザイン

sp/tb→1段
pc→6段
sp/tb→1段
pc→6段
sp/tb→1段
pc→6段
sp/tb→1段
pc→6段
sp/tb→1段
pc→6段
sp/tb→1段
pc→6段
sp/tb→1段
pc→4段
sp/tb→1段
pc→4段
sp/tb→1段
pc→4段
sp/tb→1段
pc→4段
sp/tb→1段
pc→3段
sp/tb→1段
pc→3段
sp/tb→1段
pc→3段
sp/tb→1段
pc→段
sp/tb→1段
pc→2段
sp/tb→2段組、pc→6段組
sp/tb→2段組、pc→6段組
sp/tb→2段組、pc→6段組
sp/tb→2段組、pc→6段組
sp/tb→2段組、pc→6段組
sp/tb→2段組、pc→6段組
sp/tb→1段
pc→2段
sp/tb→1段
pc→2段
sp/tb→1段
pc→2段
sp/tb→1段
pc→2段
sp/tb→1段
pc→2段
sp/tb→1段
pc→2段

コードハイライト

<div class="row">
  <div class="sp-col-12 pc-col-2">sp/tb→1段<br>pc→6段</div>
  <div class="sp-col-12 pc-col-2">sp/tb→1段<br>pc→6段</div>
  <div class="sp-col-12 pc-col-2">sp/tb→1段<br>pc→6段</div>
  <div class="sp-col-12 pc-col-2">sp/tb→1段<br>pc→6段</div>
  <div class="sp-col-12 pc-col-2">sp/tb→1段<br>pc→6段</div>
  <div class="sp-col-12 pc-col-2">sp/tb→1段<br>pc→6段</div>
</div>
<div class="row">
  <div class="sp-col-12 pc-col-3">sp/tb→1段<br>pc→4段</div>
  <div class="sp-col-12 pc-col-3">sp/tb→1段<br>pc→4段</div>
  <div class="sp-col-12 pc-col-3">sp/tb→1段<br>pc→4段</div>
  <div class="sp-col-12 pc-col-3">sp/tb→1段<br>pc→4段</div>
</div>
<div class="row">
  <div class="sp-col-12 pc-col-4">sp/tb→1段<br>pc→3段</div>
  <div class="sp-col-12 pc-col-4">sp/tb→1段<br>pc→3段</div>
  <div class="sp-col-12 pc-col-4">sp/tb→1段<br>pc→3段</div>
</div>
<div class="row">
  <div class="sp-col-12 pc-col-6">sp/tb→1段<br>pc→段</div>
  <div class="sp-col-12 pc-col-6">sp/tb→1段<br>pc→2段</div>
</div>
<div class="row">
  <div class="sp-col-6 pc-col-2">sp/tb→2段組、pc→6段組</div>
  <div class="sp-col-6 pc-col-2">sp/tb→2段組、pc→6段組</div>
  <div class="sp-col-6 pc-col-2">sp/tb→2段組、pc→6段組</div>
  <div class="sp-col-6 pc-col-2">sp/tb→2段組、pc→6段組</div>
  <div class="sp-col-6 pc-col-2">sp/tb→2段組、pc→6段組</div>
  <div class="sp-col-6 pc-col-2">sp/tb→2段組、pc→6段組</div>
</div>
<div class="row">
  <div class="sp-col-12 pc-col-8">sp/tb→1段<br>pc→2段
    <div class="row">
      <div class="sp-col-12 pc-col-6">sp/tb→1段<br>pc→2段</div>
      <div class="sp-col-12 pc-col-6">sp/tb→1段<br>pc→2段</div>
    </div>
  </div>
  <div class="sp-col-12 pc-col-4">sp/tb→1段<br>pc→2段</div>
</div>
<div class="row">
  <div class="sp-col-12 pc-col-7">sp/tb→1段<br>pc→2段</div>
  <div class="sp-col-12 pc-col-4 pc-col-offset-1">sp/tb→1段<br>pc→2段</div>
</div>

imageWrapper

画像表示用の枠です。
縦長の画像の高さは、横長の画像の幅と同じ高さに調整されます。
また,SP版では縦長の画像は真ん中寄せになります。

デザイン

コードハイライト

<div class="row imageWrapper">
  <div class="sp-col-12 pc-col-4"><p><img src="/images/blog-images/20151014-jepa-1.jpg" alt=""></p></div>
  <div class="sp-col-12 pc-col-4"><p><img src="/images/blog-images/20151014-jepa-3.jpg" alt=""></p></div>
  <div class="sp-col-12 pc-col-4"><p><img src="/images/blog-images/20151014-jepa-2.jpg" alt=""></p></div>
</div>

licensePattern

ライセンス表示です。

デザイン

Server

$5000 USD サーバ 1台

For use interactive or fully automated use by any number of users on a single server, directly or as a component of other software.

Excludes distribution of Vilviostyle Formatter to third parties (OEM use), and offering Vivliostyle Formatter as a service to third parties.

問い合わせる

コードハイライト

<div class="pageBody">
  <div class="licensePattern">
    <h3 class="noborder">Server</h3>
    <h4>$5000 USD <small>サーバ 1台</small></h4>
    <div class="licensePattern_body">
      <p>For use interactive or fully automated use by any number of users on a single server, directly or as a component of other software.</p>
      <p>Excludes distribution of Vilviostyle Formatter to third parties (OEM use), and offering Vivliostyle Formatter as a service to third parties.</p>
    </div>
    <p><a href="#" class="btn btn-medium">問い合わせる</a></p>
  </div>
</div>

navInternal

ページ内リンクです。

デザイン

コードハイライト

<div class="navInternal">
  <p><a href="#about">Vivliostyleとは</a>
  <a href="#w3c">W3C標準化</a>
  <a href="#community">コミュニティ</a>
  <a href="#team">開発チーム・アドバイザー</a>
  <a href="#faq">FAQ</a>
  <a href="#company">会社概要</a>
  <a href="#contact">お問い合わせ</a></p>
</div>
<div class="navInternal navInternal-bottom">
  <p><a href="#secProducts-viv">Vivliostyle</a>
    <a href="#secProducts-function">Vivliostyleの組版機能</a>
    <a href="#secProducts-construction">組版のしくみ</a>
    <a href="#secProducts-file">組版のファイル構成</a>
    <a href="#secProducts-license">Vivliostyle Formatter ライセンス</a>
    <a href="#secProducts-download">ダウンロード</a></p>
</div>

pageFooter

フッタです。

デザイン

コードハイライト

<footer class="pageFooter">
  <div class="row">
    <div class="sp-col-6 pc-col-2">
      <dl>
        <dt><a href="news/">ニュース</a></dt>
        <dd>
          <ul>
            <li><a href="pressrelease/">プレスリリース</a></li>
            <li><a href="blog/">ブログ</a></li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="sp-col-6 pc-col-2">
      <dl>
        <dt><a href="products/">製品情報</a></dt>
        <dd>
          <ul>
            <li><a href="">Vivliostyle.js</a></li>
            <li><a href="">Vivliostyle Formatter</a></li>
            <li><a href="">ダウンロード</a></li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="sp-col-6 pc-col-2">
      <dl>
        <dt><a href="about/">Vivliostyleについて</a></dt>
        <dd>
          <ul>
            <li><a href="">Vivliostyleとは</a></li>
            <li><a href="">会社概要</a></li>
            <li><a href="">お問い合わせ</a></li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="sp-col-6 pc-col-2">
      <dl>
        <dt><a href="sample/">サンプル</a></dt>
        <dd>
          <ul>
            <li><a href="">組版サンプル</a></li>
            <li><a href="">参考文書</a></li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="sp-col-12 pc-col-2">
      <dl>
        <dt><a href="">English</a></dt>
        <dd></dd>
      </dl>
    </div>
    <div class="sp-col-12 pc-col-2 footer_logo">
      <div class="logo"><a href="/">Vivliostyle</a><small>CSS TYPESETTING</small></div>
      <ul class="btnSNS">
        <li><a href="https://twitter.com/Vivliostyle" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
        <li><a href="https://www.facebook.com/vivliostyle" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
      </ul>
      <div class="copyright"><small>© Vivliostyle Inc.</small></div>
    </div>
  </div>
</footer>

pageHeader & pageNav

ヘッダとグローバルナビゲーションです。 グローバルナビゲーションのアクティブ状態はbody要素にクラスを付加することで実装しています。

デザイン

コードハイライト

<header class="pageHeader">
<h1 class="logo"><a href="/">Vivliostyle</a><small>CSS TYPESETTING</small></h1>
</header>
<nav class="pageNav">
<ul>
<li class="pageNav_news"><a href="news/">ニュース</a></li>
<li class="pageNav_products"><a href="products/">製品情報</a></li>
<li class="pageNav_about"><a href="about/"><span class="icon-about"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span>Vivliostyleについて</a></li>
<li class="pageNav_docs"><a href="sample/">サンプル</a></li>
<li class="pageNav_contact"><a href="contact/">お問い合わせ</a></li>
<li class="pageNav_english"><a href="../en/">English</a></li>
</ul>
</nav>

row-inlineBlock

枠内の子要素をインラインブロックにし、上下真ん中寄せにします。

デザイン

W3C標準化

VivliostyleはW3C会員としてW3Cの標準をサポートします。特に次のW3C標準化活動に関心をもっています。

コードハイライト

<article class="secAbout">
  <h2 id="w3c">W3C標準化</h2>
  <div class="row-inlineBlock">
    <p><span class="spInline-pcBlock">VivliostyleはW3C会員としてW3Cの標準をサポートします。</span>特に次のW3C標準化活動に関心をもっています。</p>
    <p><img src="../images/about/fig_w3c_html5.svg" width="273" height="64" alt=""></p>
  </div>
</article>

section in pageBody

pageBody内のsection要素は偶数番目の場合、背景がグレーになります。

デザイン

article+sectionのパターン

article
section

articleやsection内にsectionを複数持つパターン

article内のヘッダ
section
section
section
section
section内のヘッダ
section
section
section
section

コードハイライト