共通部品：汎用的なレイアウト

カード形式

画像があるバージョンのサンプル

画像はできる限り横長長方形のものを使用してください。

高度な開発ができる

ライブラリ版では、PDF の各オブジェクトや機能をクラスライブラリ化しています。

ライブラリに用意されているAPIを自在に組み合わせて独自のPDF処理プログラムの作成が可能です。

プログラムコードを
簡潔に書ける設計

少ないコード行数でプログラムを書くことができるよう、ライブラリの設計を工夫しています。

また、PDFの仕様についてあまり深い知識がなくても使えるようにしました。

→ サンプルコード

豊富な処理機能

PDFに関するさまざまな処理機能を搭載しています。

ファイル加工・編集
ページコンテンツの加工・編集
PDFからの情報取得など

→ 各種処理の詳細

<section>
   <h3>画像があるバージョンのサンプル</h3>
   <p>画像はできる限り横長長方形のものを使用してください。</p>
   <div class="common-card-wrap">
      <div class="common-card">
         <div class="common-card-header">
            <img src="./productname_img/pr-bg1.jpeg" alt="高度な開発ができる">
            <p>高度な開発ができる</p>
         </div>
         <div class="common-card-body">
            <p>ライブラリ版では、PDF の各オブジェクトや機能をクラスライブラリ化しています。</p>
            <p>ライブラリに用意されているAPIを自在に組み合わせて独自のPDF処理プログラムの作成が可能です。</p>

         </div>
      </div>

      <div class="common-card">
         <div class="common-card-header">
            <img src="./productname_img/pr-bg2.jpeg" alt="プログラムコードを簡潔に書ける設計">
            <p>プログラムコードを<br>簡潔に書ける設計</p>
         </div>
         <div class="common-card-body">
            <p>少ないコード行数でプログラムを書くことができるよう、ライブラリの設計を工夫しています。</p>
            <p>また、PDFの仕様についてあまり深い知識がなくても使えるようにしました。</p>
            <p>→ <a href="#">サンプルコード</a></p>
         </div>
      </div>

      <div class="common-card">
         <div class="common-card-header">
            <img src="./productname_img/pr-bg3.jpeg" alt="豊富な処理機能">
            <p>豊富な処理機能</p>
         </div>
         <div class="common-card-body">
            <p>PDFに関するさまざまな処理機能を搭載しています。</p>
            <ul>
               <li>ファイル加工・編集</li>
               <li>ページコンテンツの加工・編集</li>
               <li>PDFからの情報取得など</li>
            </ul>
            <p>→ <a href="#">各種処理の詳細</a></p>
         </div>
      </div>
   </div>

</section>

画像がないバージョンのサンプル

画像がない場合は「common-card-header」クラスの横に「no-image」クラスを追加してください。

高度な開発ができる

ライブラリ版では、PDF の各オブジェクトや機能をクラスライブラリ化しています。

ライブラリに用意されているAPIを自在に組み合わせて独自のPDF処理プログラムの作成が可能です。

プログラムコードを
簡潔に書ける設計

少ないコード行数でプログラムを書くことができるよう、ライブラリの設計を工夫しています。

また、PDFの仕様についてあまり深い知識がなくても使えるようにしました。

→ サンプルコード

豊富な処理機能

PDFに関するさまざまな処理機能を搭載しています。

ファイル加工・編集
ページコンテンツの加工・編集
PDFからの情報取得など

→ 各種処理の詳細

<section>
   <h3>画像がないバージョンのサンプル</h3>
   <p>画像がない場合は「common-card-header」クラスの横に「no-image」クラスを追加してください。</p>
   <div class="common-card-wrap">
      <div class="common-card">

         <div class="common-card-header no-image">
            <p>高度な開発ができる</p>
         </div>
         <div class="common-card-body">
            <p>ライブラリ版では、PDF の各オブジェクトや機能をクラスライブラリ化しています。</p>
            <p>ライブラリに用意されているAPIを自在に組み合わせて独自のPDF処理プログラムの作成が可能です。</p>

         </div>

      </div>

      <div class="common-card">
         <div class="common-card-header no-image">
            <p>プログラムコードを<br>簡潔に書ける設計</p>
         </div>
         <div class="common-card-body">
            <p>少ないコード行数でプログラムを書くことができるよう、ライブラリの設計を工夫しています。</p>
            <p>また、PDFの仕様についてあまり深い知識がなくても使えるようにしました。</p>
            <p>→ <a href="#">サンプルコード</a></p>
         </div>
      </div>

      <div class="common-card">
         <div class="common-card-header no-image">
            <p>豊富な処理機能</p>
         </div>
         <div class="common-card-body">
            <p>PDFに関するさまざまな処理機能を搭載しています。</p>
            <ul>
               <li>ファイル加工・編集</li>
               <li>ページコンテンツの加工・編集</li>
               <li>PDFからの情報取得など</li>
            </ul>
            <p>→ <a href="#">各種処理の詳細</a></p>
         </div>
      </div>
   </div>
</section>

シンプルなカードレイアウト

カードっぽくは見えませんが、カードレイアウト同様に最大3カラムずつ並びます。

画像とタイトルがリンク

画像とタイトル画像がリンクになっているパターンです。

画像は縦横比が揃っていると、レイアウトも揃います。

画像とタイトルがリンク

画像とタイトル画像がリンクになっているパターンです。

画像は縦横比が揃っていると、レイアウトも揃います。

画像とタイトルがリンク

画像とタイトル画像がリンクになっているパターンです。

画像は縦横比が揃っていると、レイアウトも揃います。

画像とタイトルがリンク

画像とタイトル画像がリンクになっているパターンです。

画像は縦横比が揃っていると、レイアウトも揃います。

画像とタイトルがリンク

画像とタイトル画像がリンクになっているパターンです。

画像は縦横比が揃っていると、レイアウトも揃います。

<section>
<h3>シンプルなカードレイアウト</h3>
   <p>カードっぽくは見えませんが、カードレイアウト同様に最大3カラムずつ並びます。</p>
   <div class="common-card-simple-wrap">

         <div class="common-card-simple">
            <a href="#"><div class="common-card-simple-img">
               <img src="productname_img/pr-image.png" alt="">
            </div>
            <div class="common-card-simple-title">
               <p>画像とタイトルがリンク</p>
            </div></a>
            <div class="common-card-simple-txt">
               <p>画像とタイトル画像がリンクになっているパターンです。
               </p>
               <p>画像は縦横比が揃っていると、レイアウトも揃います。</p>
            </div>
         </div>
         <div class="common-card-simple">
            <a href="#"><div class="common-card-simple-img">
               <img src="productname_img/pr-image.png" alt="">
            </div>
            <div class="common-card-simple-title">
               <p>画像とタイトルがリンク</p>
            </div></a>
            <div class="common-card-simple-txt">
               <p>画像とタイトル画像がリンクになっているパターンです。
               </p>
               <p>画像は縦横比が揃っていると、レイアウトも揃います。</p>
            </div>
         </div>
         <div class="common-card-simple">
            <a href="#"><div class="common-card-simple-img">
               <img src="productname_img/pr-image.png" alt="">
            </div>
            <div class="common-card-simple-title">
               <p>画像とタイトルがリンク</p>
            </div></a>
            <div class="common-card-simple-txt">
               <p>画像とタイトル画像がリンクになっているパターンです。
               </p>
               <p>画像は縦横比が揃っていると、レイアウトも揃います。</p>
            </div>
         </div>
         <div class="common-card-simple">
            <a href="#"><div class="common-card-simple-img">
               <img src="productname_img/pr-image.png" alt="">
            </div>
            <div class="common-card-simple-title">
               <p>画像とタイトルがリンク</p>
            </div></a>
            <div class="common-card-simple-txt">
               <p>画像とタイトル画像がリンクになっているパターンです。
               </p>
               <p>画像は縦横比が揃っていると、レイアウトも揃います。</p>
            </div>
         </div>
         <div class="common-card-simple">
            <a href="#"><div class="common-card-simple-img">
               <img src="productname_img/pr-image.png" alt="">
            </div>
            <div class="common-card-simple-title">
               <p>画像とタイトルがリンク</p>
            </div></a>
            <div class="common-card-simple-txt">
               <p>画像とタイトル画像がリンクになっているパターンです。
               </p>
               <p>画像は縦横比が揃っていると、レイアウトも揃います。</p>
            </div>
      </div>
   </div>
</section>

横並び形式

シンプルなフレックスボックスを使ったレイアウトです。

シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。

シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。

シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。

   <div class="common-option-flex-spacearound">
      <div>［内容］</div>
      <div>［内容］</div>
      <div>［内容］</div>
   </div>

画像とテキスト

縦並びのサンプル

画像を大きく表示するサンプルです。

→ [リンクサンプル]

<section>

   <h3>縦並びのサンプル</h3>

   <p>画像を大きく表示し、テキストと縦並びにするサンプルです。</p>

   <figure><img src="productname_img/pr-image.png" alt="PRイメージ">
      <figcaption>[キャプション]</figcaption>
   </figure>
   <p>→ <a href="#">[リンクサンプル]</a></p>

</section>

<figure>内の画像のボーダーが不要な場合は<img>のクラスに「common-option-noborder」を付けてください。

ボーダーがつかないレイアウトでボーダーを付けたい場合は<img>のクラスに「common-option-border」を付けてください。

画像を右に配置したサンプル

この箇所はHTML上はテキストが先、画像が後になっています。PC表示ではテキストが左、画像が右になっています。スマホレイアウトではテキストが先、画像が後になります。

→ [リンクサンプル]

<section>
<div class="common-parallel-wrap">
   <div class="common-parallel-txt">
      <h3>画像を右に配置したサンプル</h3>

      <p>
         この箇所はHTML上はテキストが先、画像が後になっています。PC表示ではテキストが左、画像が右になっています。スマホレイアウトではテキストが先、画像が後になります。</p>
      <p>→ <a href="#">[リンクサンプル]</a></p>
   </div>

   <div class="common-parallel-img">
      <figure><img src="productname_img/pr-image.png" alt="PRイメージ">
         <figcaption>[キャプション]</figcaption>
      </figure>
   </div>
</div>
</section>

画像を左に配置したサンプル

この箇所はHTML上は画像が先、テキストが後になっています。PC表示では画像が左、テキストが右になっています。

スマホレイアウトではテキストが先、画像が後になるようにクラスにオプションのクラス（common-option-flex-reverse）を追加して「flex-direction: column-reverse;」をモバイルのCSSに指定しています。

→ [外部リンクのサンプル]

<section>
<div class="common-parallel-wrap common-option-flex-reverse">
   <div class="common-parallel-img">
      <figure><img src="productname_img/pr-image.png" alt="PRイメージ">
         <figcaption>[キャプション]</figcaption>
      </figure>
   </div>
   <div class="common-parallel-txt">
      <h3>画像を左に配置したサンプル</h3>

      <p>
         この箇所はHTML上は画像が先、テキストが後になっています。PC表示では画像が左、テキストが右になっています。</p>
      <p>スマホレイアウトではテキストが先、画像が後になるようにクラスにオプションのクラス（common-option-flex-reverse）を追加して「flex-direction:
         column-reverse;」をモバイルのCSSに指定しています。</p>
      <p>→ <a href="https://web.antenna.co.jp/" class="external-link" target="_blank">[外部リンクのサンプル]</a></p>
   </div>
</div>
</section>

サイズを指定した画像を右に配置したサンプル

テキストを左、画像を右に配置して、画像タグに直接幅を指定することで、指定した画像幅にあわせてテキストの幅が調整されます。

なるべく上の「画像を右に配置したサンプル」などを使用して、配置する画像を調整して作成するようにしてください。どうしても幅を指定したい場合のみにご利用ください。

シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。

<div class="common-option-flex-imgWidth">
   <div>
      <p>シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。シンプルなフレックスボックスを使ったレイアウトです。</p>
   </div>
   <div>
      <figure><img src="productname_img/pr-image.png" alt="PRイメージ" width="600">
      <figcaption>[キャプション]</figcaption>
      </figure>
   </div>
</div>

グループ内で前後リンク、キャプションを付けることができます。

まとまった画像のグループとして前後表示させる場合は、rel='lightbox[group-name]'の[]内の名前を揃えて設定してください。
グループではなく一枚ずつ表示する場合は、ページ内で同じ名前を設定しないようにしてください。

※画像幅が固定ではなくても虫眼鏡アイコンが画像の左上にフィットするように変更しました。画像を包括する「a」タグに「 class='common-zoom-anchor'」を追加してください。

<figure class="common-zoom">
   <a href='./productname_img/pr-image.png' class='common-zoom-anchor' rel='lightbox[group-name]' data-title='キャプション'>
      <img class="common-zoom-icon" src="../img/common_img/common-icon-zoom.png" alt="">
      <img src="./productname_img/pr-image.png" alt="キャプション" width="500">
   </a>
   <figcaption>キャプション</figcaption>
</figure>
<figure class="common-zoom">
   <a href='./productname_img/pr-image.png' class='common-zoom-anchor' rel='lightbox[group-name]' data-title='キャプション'>
      <img class="common-zoom-icon" src="../img/common_img/common-icon-zoom.png" alt="">
      <img src="./productname_img/pr-image.png" alt="キャプション" width="700">
   </a>
   <figcaption>キャプション</figcaption>
</figure>
<figure class="common-zoom">
   <a href='./productname_img/pr-image.png' class='common-zoom-anchor' rel='lightbox[group-name]' data-title='キャプション'>
      <img class="common-zoom-icon" src="../img/common_img/common-icon-zoom.png" alt="">
      <img src="./productname_img/pr-image.png" alt="キャプション" width="300">
   </a>
   <figcaption>キャプション</figcaption>
</figure>

動画の埋め込み

<div class="common-movie">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/LtdmNhs_Puo"
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
   </iframe>
</div>

共通部品：汎用的なレイアウト

カード形式

画像があるバージョンのサンプル

画像がないバージョンのサンプル

シンプルなカードレイアウト

横並び形式

画像とテキスト

縦並びのサンプル

画像を右に配置したサンプル

画像を左に配置したサンプル

サイズを指定した画像を右に配置したサンプル

画像の拡大表示

動画の埋め込み