Style Tiles

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

[link icon]: page_component.html#link icon

cite

citeタグの指定です。

デザイン

Vivliostyleのスタッフとして働いているが、本職は言語聴覚士、認定コーチングスペシャリスト®。
著書『声と話し方のトレーニング』(平凡社新書)、『アスペルガーの館』(講談社)、『ことばの発達が気になる子どもの相談室』(明石書店)、他。

コードハイライト

<p>Vivliostyleのスタッフとして働いているが、本職は言語聴覚士、認定コーチングスペシャリスト®。<br>
著書『<cite><a href="http://www.heibonsha.co.jp/book/b163403.html" target="_blank">声と話し方のトレーニング</a></cite>』(平凡社新書)、『<cite><a href="http://bookclub.kodansha.co.jp/product?isbn=9784062175043" target="_blank">アスペルガーの館</a></cite>』(講談社)、『<cite><a href="http://www.akashi.co.jp/book/b193614.html" target="_blank">ことばの発達が気になる子どもの相談室</a></cite>』(明石書店)、他。</p>

EntryHeader

投稿ヘッダです。

デザイン

Vivliostyle、札幌TPACでW3C CEO Jeff Jaffe氏と面談

2015/10/16

JEPAセミナー「電子出版ビューア最前線 Vivliostyleと超縦書」

2015/10/16Vivliostyle

コードハイライト

<header class="contentHeader">
<section class="pageBody">
    <header class="contentHeader">
        <ul class="directoryNav">
            <li><a href="DUMMY">News</a></li>
            <li><a href="DUMMY">Press Release</a></li>
        </ul>
        <h1>Vivliostyle、札幌TPACでW3C CEO Jeff Jaffe氏と面談</h1>
        <div class="date_author"><span>2015/10/16</span></div>
    </header>
    <header class="contentHeader">
        <ul class="directoryNav">
            <li><a href="DUMMY">News</a></li>
            <li><a href="DUMMY">Blog</a></li>
        </ul>
        <h1>JEPAセミナー「電子出版ビューア最前線 Vivliostyleと超縦書」</h1>
        <div class="date_author"><span class="date">2015/10/16</span><span class="author">Vivliostyle</span></div>
    </header>
</section>

Heading

pageBody内の見出しです。

デザイン

News

Press Release

コードハイライト

<section class="pageBody">
    <h1>News</h1>
    <h2>Press Release</h2>
</section>

link icon

linkクラスをつけるとアイコンを表示します。

デザイン

コードハイライト

<section class="pageBody">
    <div class="row">
        <div class="sp-col-12 pc-col-7 pageBody-main">
            <p><a href="DUMMY" class="link">講演資料(Vivliostyle.jsを使用)</a></p>
        </div>
    </div>
</section>

note

フォントサイズの小さいテキストを表示します。

デザイン

コードハイライト

<ul class="note">
        <li><b>Page View</b>: ページ表示(online Vivliostyle viewer)</li>
        <li><b>Spread View</b>: 見開き表示(online Vivliostyle viewer)</li>
        <li><b>Raw HTML</b>: 通常HTML表示または <a href="#VivliostyleChromeExtension">Vivliostyle Chrome 拡張</a> でページ表示</li>
        <li><b>Source</b>: GitHub上のソースファイル(HTMLやCSS)へ</li>
</ul>