10082

概要

これはタブです。

タブ1

おや見てください、ここにも文章が。

奇妙なり。

タブ2

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

[[module CSS]]
:root {
    --base-color: #4F1B55;
    --base-font: #FFF5D1;
}
 
.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em {
    background: none !important;
    border: none !IMPORTANT;
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: none !important;
    border: none !IMPORTANT;
    color: var(--base-color);
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: none !important;
    border: none !IMPORTANT;
    color: var(--base-font);
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin: 0 !Important;
    background: var(--base-color);
    flex-grow: 1;
    border: none;
    display: block;
    text-align: center;
    border-left: 1px solid var(--base-font);
    border-right: 1px solid var(--base-font);
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin: 0 0.16em -1px 0;
    background: var(--base-font);
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border: none;
}
 
.yui-navset .yui-content {
    background-color: var(--base-font);
    border: none;
    color: var(--base-color);
}
 
.yui-navset {
    border: 3px solid var(--base-color);
    background: var(--base-color);
}
 
.yui-navset .yui-nav li:first-of-type,
.yui-navset .yui-navset-top .yui-nav li:first-of-type {
    border-left: none;
}
 
.yui-navset .yui-nav li:last-of-type,
.yui-navset .yui-navset-top .yui-nav li:last-of-type {
    border-right: none;
}
[[/module]]