リストを横並び表示して枠線を付けた時に項目同士の線が太くなるのを防ぐ方法

公開日:2024(令和6)年11月9日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



以下のページでタブ切り替え式のコンテンツの作り方を公開しました。そこではタブ同士を離しているので気にならなかったのですが、タブ同士を隙間なく配置した時にタブの境界線が太く(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でも使えるテクニックなので覚えておくといいと思います。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
標準のブロックと少量のコードでタブ切り替えコンテンツを作る方法