以下のページでタブ切り替え式のコンテンツの作り方を公開しました。そこではタブ同士を離しているので気にならなかったのですが、タブ同士を隙間なく配置した時にタブの境界線が太く(2倍)になってしまうのに対処したメモページです。
タブに限らず、リストタグなどを使い、display:flexを使って横並びにすることってありますよね。
ちょうど以下のような形です。
<ul class="flex-1">
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>
<style>
ul.flex-1 {
list-style: none;
display: flex;
padding-left: 0;
}
.flex-1 li{
border:4px solid #000;
}
</style>
このコードをカスタムHTMLブロックへ入れて表示させると以下のようになります。
- リスト項目1
- リスト項目2
わざと枠線(border)を太くしているので一目瞭然ですね。隣り合うリストの左右の線が両方表示され、単純に倍の太さになっています。
これをCSSで解消させるには、以下のようにするとよいようです(実際に改善されていますが、その他どこかに影響があるかは不明です)。
- リストタグ(li)の左に枠線の太さと同じサイズのネガティブマージン(マイナスのマージン)を与える
- そのままだと最初のリストタグの左にもマイナスマージンがかかってしまうので、リスト(ul)自体を枠線の太さと同じサイズだけマージンで寄せる
具体的には以下のように書きます。
<ul class="flex-2">
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>
<style>
ul.flex-2 {
list-style: none;
display: flex;
padding-left: 0;
}
.flex-2 li{
border:10px solid #000;
}
.flex-2 li {
margin-left: -10px;
}
ul.flex-2 {
margin-left: 10px;
}
</style>
以下で実際に表示させていますので確認ください。
- リスト項目1
- リスト項目2
きちんとタブの左右の枠線とその他の線の太さが合っていますね。
WordPressに限らず、通常のHTMLでも使えるテクニックなので覚えておくといいと思います。
コメントを残す