アウトラインの付いたタブ UI の CSS の記述方法を調べてみた - Cyokodog :: Diary以下のようなアウトライン付きタブ UI の CSS の書き方が分からなかったので調べてみました。 シンプルなアウトラインのタブ UI まず、タブ、タブを束ねるタブグループ、タブに対応するパネルを用意します。タブの底辺を除き、タブとパネルにはアウトラインを引いておきます。 次に、タブグループの底辺、各タブの左辺にネガティブマージンをかけ隣接するアウトラインを重ね合わせるようにします。 アクティブタブとパネルの接合部のラインを消すために、z-index でアクティブタブを前面に持ってきます。この時 z-index を有効にするためにタブとパネルの position を relative にします。 こんな感じになります。 Demo ソース <head> <style> /* Step.1 */ ul.tabs{ margin:0; padding:0; } ul.tabs li{ margin
