CSSと画像で作るきれいな本型のコンテンツ紹介ナビです。オリジナルは書籍の紹介用に、実際の表紙画像を使って作られているようですが、このサンプルでは弊社の「百万石 WEB受註システム」の紹介の形をとっています。使用画像は、本の表紙を想定して新たに作成しました（サイズは、横600px、縦927px）。

本やタイトル付近にオンマウスすると、本がリアルな動きで開きます。開いたページにダミーの「解説ページへ」と「ご利用事例へ」のリンクを設置しました。実装は外部CSSを配置し、htmlのクラス名が書籍の構造を表しているので、それに従って記述するだけです。

本型構造をしたhtmlのソース

  <ul class="align">
    <!-- Book 1 -->
    <li>
      <figure class='book'>        
        <!-- Front -->        
        <ul class='hardcover_front'>
          <li>
            <img src="btob100.png" alt="BtoB WEB受註システム　百万石" width="100%" height="100%">
            <span class="ribbon bestseller">TOP</span>
          </li>
          <li></li>
        </ul>        
        <!-- Pages -->        
        <ul class='page'>
          <li></li>
          <li>
            <a class="btn" href="#">解説ページへ</a>
            <a class="btn" href="#">ご利用事例へ</a>
          </li>
          <li></li>
          <li></li>
          <li></li>
        </ul>        
        <!-- Back -->        
        <ul class='hardcover_back'>
          <li></li>
          <li></li>
        </ul>
        <ul class='book_spine'>
          <li></li>
          <li></li>
        </ul>
        <figcaption>
          <h1><small style="font-size:22px;">BtoB WEB受注システム</small>百万石</h1>
          <span>By Conifer,Inc.</span>
          <p style="font-size:14px;">「経費節減+顧客満足度UP」を図るなら、WEB受注をお勧めします！！　まずは受注全体の50%をWEB受注にしてみてはいかがでしょう。既存システムの変更不要で即行稼動します！！　</p>
        </figcaption>
      </figure>
    </li>   
  </ul>