Written by Kasumi

flexbox(フレックスボックス)で横並びにした要素の線の重なりを無くす方法

こんにちはカスミです。

さて、以下のようなお悩みをお持ちでしょうか?

flexboxで横並びにした要素をボーダーで囲っているが、隣接する要素のボーダーとの兼ね合いで線が太くなってしまう箇所がある。これを改善したい。

上記画像が例です。

ボーダーが重なっている部分に太い箇所が見られるのが、わかるかと思います。

このような問題を解決致します。

実装サンプル

See the Pen フレックスボックス 線重なり無くす by Kohei (@kouk05) on CodePen.dark

実装サンプルです。

フレックスボックスで横並びにした要素にボーダーを入れてますが、線が太い箇所が改善されているのがわかります。

次章より詳細を説明します。

横並び要素にネガティブマージンを入れる

.flex-item {
  padding: 30px;
  flex: 0 0 25%;
  background-color: #fff;
  border: 1px solid #000;
  margin-left:-1px;
  margin-top:-1px;
}

上記コードは先ほどのサンプルから横並び要素に当たってるCSSを取り出したものです。

このコードの中の以下が重要になります。

  margin-left:-1px;
  margin-top:-1px;

上記ネガティブマージンをボーダーの太さ分だけ当てる事によって、隣接するボーダーの太い箇所を改善させる事が出来ます。

これだけで改善完了です。

まとめ

「table」で構築すると、ボーダーの重なり問題は無いのですが、フレックスボックスでやるとわりと陥る現象でした。ぜひ本記事の内容を参考に改善してみてください。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

【簡単】contact form 7でお問い合わせ内容をkintoneに反映・連携させる方法【wordpress】

2022.03.09
784
HTMLCSS プログラミング

【簡単】CSSを使って蛍光マーカー風の下線を引く方法【linear-gradientを使おう】

2022.03.28
137
WordPress プログラミング

【激選】WordPressでよく使うページ種別の条件分岐テンプレートタグをご紹介【コピペ用】

2022.04.02
115
プログラミング

映画ジョーカー衝撃話題作のあらすじ・感想を解説【記事最後にネタバレ含む】

更新日:2020.02.29
298