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

シンプルな囲み

製品カテゴリー別のライトカラー背景の囲みブロックです。

ダミーテキスト

リスト項目
リスト項目

デスクトップ製品

リスト項目
リスト項目

システム製品

リスト項目
リスト項目

<div class="common-block-lightcolor">
   <p>ダミーテキスト</p>
   <ul class="common-list-narrow">
      <li>リスト項目</li>
      <li>リスト項目</li>
   </ul>
</div>

リボン付きのお知らせ

リボンの部分にタイトルを入れることができます。テキストの長さはリボンの幅に収まる程度にしてください。

バージョンアップのご案内

ダミーテキスト

リスト項目１
リスト項目２
リスト項目３

『アウトライナー3』の優待購入または有償バージョンアップをご希望のお客様はページ下部の「お問い合わせ」より弊社製品担当までご連絡ください。

<div class="common-announce-box">
   <div class="common-announce-box-ribbon">
      <p class="common-announce-box-title">タイトル</p>
   </div>
   <p>ここに本文を記載してください</p>
      <ul>
         <li>リストも使用できます</li>
         <li>リスト項目</li>
         <li>リスト項目</li>
      </ul>
</div>

縦ラインの狭い囲み

タイトル（不要時は削除してください）

ダミーテキストダミーテキスト
→ リンク

リスト項目
リスト項目
リスト項目

<div class="common-block-typeA">
   <h3>タイトル（不要時は削除してください）</h3>
   <p>ここに本文を記載してください</p>
      <ul>
         <li>リストも使用できます</li>
         <li>リスト項目</li>
         <li>リスト項目</li>
      </ul>
</div>

ラインのずれた囲み

外枠は製品種別ごとのアクセントカラーです。

タイトル（不要時は削除してください）

ダミーテキストダミーテキスト
→ リンク

リスト項目
リスト項目
リスト項目

<div class="common-block-typeB-wrapper">
   <div class="common-block-typeB-background"></div>
   <div class="common-block-typeB">
   <h3>タイトル（不要時は削除してください）</h3>
      <p>
         ここに本文を記載してください</a>
      </p>
       <ol>
         <li>リストも使用できます</li>
         <li>リスト項目</li>
         <li>リスト項目</li>
      </ol>
   </div>
</div>