＜タブコンテンツ＞にボーダー

 

【パーツ】→＜タブコンテンツ＞ではタイトル欄と内容欄に入力するだけで、美しいレイアウトのタブ分けコンテンツが簡単に作成できます。

 

ただ一部のデザインを除いてはボーダー（境界線）が表示されないので、どこからどこまでがタブコンテンツの内容なのかがちょっとわかりにくい印象も受けました。

 

そこでタブコンテンツにボーダーをつけることで明示的に”このエリアがタブコンテンツです”と印象付けるスタイルを用意してみました。

 

たとえば下のようなサンプルを用意してみました。

タブコンテンツのオプションでは「デザイン2」を選択してます。

 

ここからがサンプルコンテンツ

ここでは3つの天然水の”風味”についてご紹介します。

3つの天然水を飲みやすさという点で比較すると下のような評価になるでしょう。

 

◯◯が採用しているウォーターパック（水パック）は7.2㍑軽量ウォーターパック。

女性やお年寄りでも取扱いに困ることのない軽量パックです。

ここまでがサンプルコンテンツ

 

（ここからがこのページの本文です）

よく見ればタブコンテンツの左右に若干の余白があるのでなんとなくはタブコンテンツがどこからどこまでかはわかるかもしれません。

 

しかしながらそのまま目を落としていくと、「◯◯が採用しているウォーターパック…」までつい読み進めてしまいそうじゃないですか。

でもそこはタブコンテンツの中身ではなく通常の本文エリアなので、そうなると途中で文章がつながらなくなって「あれ、どこまでがタブの内容なんだ？」ということにもなりかねないかと。

 

まあ考えすぎかもしれませんが、筆者個人としてはタブコンテンツを囲むようにボーダーがあった方がそのコンテンツの内容がどこまでなのかがひと目でがわかって親切だと思うんです。

 

そこで【Volar2】ではタブコンテンツの内容の下限がどこまでなのかをわかりやすくするため、”囲い”のようなボーダーがつくスタイルを別途用意しました。