タブ付きボックス

タブが付いたボックスのモジュール

タブは比較的簡単な CSS で実現できる

チャット型のデザインとに HTML、CSS

タブ付きボックスは、タブの部分と四角く囲まれたボックスの部分に分かれる

ボックスの部分の HTML や CSS は、チャット型のデザインとほとんど変わらない

背景色、ボダーラインの有無で、似たようなソースコードでも印象が変わる

border-radius プロパティを使って、ボックスの 4つの角をそれぞれ異なる半径で丸くする

border-radius: 左上右上右下左下;

タブを作成するために適用したスタイルには、border-radius のはかにもいくつかのプロパティが使われている

そのうちの display: inline-block; は <h2> の表示モードをインラインブロックに切り替えている

インラインブロックという表示モードは、インラインボックスとブロックボックスの特性を合わせたようなもの

インラインボックスのようにコンテンツが収まるぴったりの幅になるが、ブロックボックスのように上下マージンを設定できる

width プロパティを使って幅を指定することもできる

タブを <h2> で作っており、CSS を適用しなければブロックボックするとして表示される

それではタブの長さが親要素の長さと同じになってしまうので、意図した表現にならない

ボックスの幅を短くするために、表示モードをインラインブロックに切り替えている