縦のラインの上にまるいポチを置いたデザインをCSSで実装する方法が知りたいです

自分が実装したいイメージに近い参考サイトが無かったので、質問させていただきました…

お忙しいところすみません。

前提・実現したいこと

作りたいイメージとしてはこういう感じです。

ライン上の「○」が、常に各コンテナ(文字が入りますのボックス)の要素の真ん中に来て欲しいのですが、
それをどのようなものを使うのかが、わからないです…

html
1<div class="v_line_left">
2  <div class="s01">
3  <p>文字文字文字文字文字文字文字</p>
4  </div>
5                
6  <div class="s02">
7  <p>文字文字文字文字文字文字文字</p>
8  </div>
9
10  <div class="s03">
11  <p>文字文字文字文字文字文字文字</p>
12  </div>
13</div>

CSS
1.v_line_left {
2    border-left: thin solid red;
3    padding-left: 10px;
4  }

試したこと

borderプロパティを使って、
縦線をひくところまでは、簡単にできるのですが
文字が入るコンテナの中央に、このライン上にある「○」を持っていきたいです。

これをそもそも画像として組み込んでいいのか、それともCSSで表現したほうが良いのか…
どうやったらボックスの中央に来てくれるのか…

positionで地道に調整していくしかないでしょうか？

初心者です、すみません宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

方法はいくらでもあります。

SCSS使ってます。

HTML
1<div class="v_line_left">
2  <div class="s01">
3    <p>文字文字文字文字文字文字文字</p>
4    <span></span>
5  </div>
6
7  <div class="s02">
8    <p>文字文字文字文字文字文字文字</p>
9    <span></span>
10  </div>
11
12  <div class="s03">
13   <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
14    <span></span>
15  </div>
16</div>

SCSS
1.v_line_left {
2  border-left: thin solid red;
3  padding-left: 10px;
4  
5  div {
6    position: relative;
7    
8    span {
9      display: inline-block;
10      width: 5px;
11      height: 5px;
12      border-radius: 50%;
13      border: solid 1px #000;
14      position: absolute;
15      top: 50%;
16      left: calc( -10px - 5px + 1px );
17      transform: translateY(-50%);
18      background: #FFF
19    }
20  }
21}

投稿2020/08/19 06:12

総合スコア10429

2020/08/19 06:15 編集

縦方向に関しては、要素内絶対位置50%で、transformで要素の高さの半分戻すことで実現できます。参考 https://arts-factory.net/position/ 横方向に関しては、計算をすることで求められます。縦方向については可変ですが、横方向については不変なので割り方シンプルな書き方で実装可能です。

kyoya0819

2020/08/19 06:16

新たに要素を作りたくない場合は、疑似要素でも対応可能です。