レイアウト:タブ・フロー等

タブ1(PC&スマホ時スライド形式)

<div class="tabWrapper">
<div class="tabContainer">
<div class="tab">
<div class="tab__button active"><a href="#">Tab1</a></div>
<div class="tab__button"><a href="#">Tab2</a></div>
<div class="tab__button"><a href="#">Tab3</a></div>
</div>
</div>
<div class="contents">
<div class="contents__content">Tab1 テキストテキストテキストテキスト。</div>
<div class="contents__content">Tab2 テキストテキストテキストテキスト。</div>
<div class="contents__content">Tab3 テキストテキストテキストテキスト。</div>
</div>
</div>

サムネイルを削除する際は「image_size=”thumbnail”」を削除

タブ2(スマホ時アコーディオン形式)

  • Tab1
  • Tab2
  • Tab3
Tab1 テキストテキストテキストテキスト。
Tab2 テキストテキストテキストテキスト。
Tab3 テキストテキストテキストテキスト。
<div id="acTab">
<ul class="resp-tabs-list">
	<li>Tab1</li>
	<li>Tab2</li>
	<li>Tab3</li>
</ul>
<div class="resp-tabs-container">
<div>Tab1 テキストテキストテキストテキスト。</div>
<div>Tab2 テキストテキストテキストテキスト。</div>
<div>Tab3 テキストテキストテキストテキスト。</div>
</div>
</div>

フロー・コンテンツ

1◯◯◯◯◯

テキストテキストテキストテキストテキストテキストテキストテキスト。

 

2◯◯◯◯◯

テキストテキストテキストテキストテキストテキストテキストテキスト。

※数字横のテキストは20文字以内

<h3 class="headLvFlow"><span class="numberFlow">1</span>◯◯◯◯◯</h3>
<div class="column">
<div class="col col2N">画像やテキスト等</div>
<div class="col col2W">画像やテキスト等</div>
<div class="lowArrow"> </div>
</div>
<h3 class="headLvFlow"><span class="numberFlow">2</span>◯◯◯◯◯</h3>
<div class="column">
<div class="col col2N">画像やテキスト等</div>
<div class="col col2W">画像やテキスト等</div>
</div>

インタビュー形式

アイコンのサイズは正方形で用意してください。画像の形はcssで丸になります。(表示サイズ60px)

名前:A
いぬ
ちゃん
テキストテキストテキストテキストテキストテキストテキスト。
名前:A
ねこ
ちゃん
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
<dl class="balloonSet">
<dt class="balloonPh">画像
<div class="name">いぬ<br>ちゃん</div>
</dt>
<dd class="balloonTxt">テキストテキストテキストテキストテキストテキストテキスト。</dd>
</dl>
2017年3月15日