HTMLでリストと図形を横並びで景観を整える方法

CSSとHTMLで図形(リストタグを使用しており、CSSで四角と三角を組み合わせたフローのような図形)とリストを横並びにして横並びにしたいと思っています。

図形参考サイト

HTML
1<!--左部HTML-->
2<ol class="sankaku">
3  <li class="listleft">リスト</li>
4  <li>リスト</li>
5  <li>リスト</li>
6  <li>リスト</li>
7  <li>リスト</li>
8  <li>リスト</li>
9  <li>リスト</li>
10</ol>
11

CSS
1/*左部CSS*/
2
3.sankaku{
4  list-style-type: none;
5  padding:0;
6  margin:0;
7}
8.sankaku li{
9  position: relative;
10  width:100px;
11  background: #504944;
12  padding: 1em;
13  margin-bottom: 1em;
14  text-align:center;
15  color: #fff;
16}
17.sankaku li:after{
18  content: "";
19  position: absolute;
20  width: 0;
21  height: 0;
22  bottom: -10px;
23  left: 0;
24  border-style: solid;
25  border-color: #504944 transparent transparent transparent;
26  border-width: 10px 50px 0 50px;
27  z-index: 1;
28}
29.sankaku li.listleft{
30  background: #9bbb30;
31  font-weight: bold;
32}
33.sankaku li.listleft{
34  border-color: #9bbb30 transparent transparent transparent;
35}

HTML
1  <li class="tadanolist">リスト</li>
2  <li>リスト</li>
3  <li>リスト</li>
4  <li>リスト</li>
5  <li>リスト</li>
6  <li>リスト</li>
7  <li>リスト</li>

CSS
1.tadanolist{
2border 1px solid;
3}

上記コードを改変して現在WEBデザインの勉強をしております。
上記コードはリンク先からコピペしてきたものです。

上記コードを記述し、またもう一つのリスト(このリストは上記コードのフローの説明みたいなもので四角の枠線で囲んだもの)を作成して横に並べたいと思っています。
しかし行間の調整が難しく如何しても景観が崩れます。
理由は何となくわかっていて、三角形を下部に配置することでその分の行間の調整がうまくできていないのだと思います。
そこで今回の質問を簡潔にまとめるとCSSのなにをいじるべきなのかがわかりません。
margin-bottomで1emなど試して、2.5くらいがいい感じではあるが下に行くにつれて多少のずれが目立つ、、、
そんなことを解決してくれるCSSコードなどはなく根気強く0.01em単位で調整するしかないのでしょうか。
左のリストの形を見てリストの始まり(四角形の上辺)などに右のリストを合わせる。などの書き方はないのでしょうか。
以上わかる方がいたら教えてください。
HTML、CSS初心者であるためわからないことや勘違いしている点がある可能性がございますので、何かありましたらコメント等で教えていただけると幸いです。

hatena19

2020/10/15 07:06

「図形参考サイト」のリンクURLが間違ってますので修正してください。

hatena19

2020/10/15 07:10

> 上記コードを記述し、またもう一つのリスト(このリストは上記コードのフローの説明みたいなもので四角の枠線で囲んだもの)を作成して横に並べたいと思っています。この横に並べたいもう一つのリストのHTMLコードとCSSコードを追記してください。でその現状でどの部分が希望と違うのか具体的に説明してください。言葉での説明が難しいなら、理想のレイアウトを画像で例示してくれるとなおいいでしょう。

hatena19

2020/10/15 07:14

あと質問文では「リストタグを使用しており」となってますがHTMLコードにはリストタグはありません。正しいものに修正してください。不正確な情報ではまともな回答は不可能です。

snowdropAPP

2020/10/15 07:22

図形参考サイトのURLの修正と画像を作成してまいりました。掲載しておりますので確認お願いします。失礼いたしました、説明に語弊があります。現在作成しているコードはは別物になります。しかし諸事情によりコードの掲載が現状難しくなっておりますので参考にしたサイトのコードを掲載した次第です。私の作成しているコードでは<li>タグを使用しております。なので今からサンプルコードを作成して掲載してみようと思いますのでもしよければご確認ください。すぐに作成します。

hatena19

2020/10/15 07:33

すでに回答しましたが、たぶんHTML構造から変更すべきだと思いますが、HTMLの変更は可能ですか。

Lhankor_Mhy

2020/10/15 07:34 編集

「景観が崩れます」とのことですが、具体的にはどのような問題が起きていますか？期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 表現するための言葉がわからない時は表現の仕方を工夫しましょう https://teratail.com/help/question-tips#questionTips3-3-1 ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

snowdropAPP

2020/10/15 07:36

hatena19様 HTMLの修正は可能です。本来であればCSSの方でpositionの指定（absolute）をしていますがHTMLの構造変更でどうにかなるものなのでしょうか。

snowdropAPP

2020/10/15 07:38

Lhankor_Mhy様現在画像を掲載していまして、望んだ結果と結果を画像形式で掲載しています。本来であればCSSなどを実際のコードで載せるべきなのでしょうが、現在諸事情によりコードの掲載ができないのでサンプルコードを掲載しました、

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

回答1件

ベストアンサー

フローのリストと説明のリストを別ブロックにするのではなく、
一つのフローブロックと一つの説明ブロックを同じブロックにいれて、そのブロックを繰り返すようなHTML構造にした方が楽だと思います。
というかセマンティック面からもそのような構造にすべきです。

質問に提示のHTMLとCSSを元に書き換えました。
クラス名は少し変更してます。

html
1<ul class="flow-list">
2  <li class="list-item">   
3    <div class="box">
4        フロー01
5    </div>
6    <div class="description">
7        説明01
8    </div>
9  </li>
10
11  <li class="list-item">   
12    <div class="box">
13        フロー02
14    </div>
15    <div class="description">
16        説明02
17    </div>
18  </li>
19
20    <li class="list-item">   
21    <div class="box">
22        フロー03
23    </div>
24    <div class="description">
25        説明03
26    </div>
27  </li>
28
29    <li class="list-item">   
30    <div class="box">
31        フロー04
32    </div>
33    <div class="description">
34        説明04
35    </div>
36  </li>
37
38</ul>

css
1.flow-list{
2  list-style-type: none;
3  padding:0;
4  margin:0;
5}
6.list-item {
7  display: flex;
8  align-items: flex-start;
9}
10
11.list-item .box{
12  position: relative;
13  width:100px;
14  background: #504944;
15  padding: 1em;
16  margin-bottom: 1em;
17  text-align:center;
18  color: #fff;
19}
20.list-item .box:after{
21  content: "";
22  position: absolute;
23  width: 0;
24  height: 0;
25  bottom: -10px;
26  left: 15px;
27  border-style: solid;
28  border-color: #504944 transparent transparent transparent;
29  border-width: 10px 50px 0 50px;
30  z-index: 1;
31}
32.list-item:last-child .box:after {
33  border: none; 
34}
35
36.list-item .box{
37  background: #9bbb30;
38  font-weight: bold;
39  border-color: #9bbb30 transparent transparent transparent;
40}
41
42.description {
43  border: 1px solid;
44  margin-left: 20px;
45  width: 200px;
46}

投稿2020/10/15 07:29

総合スコア34075

2020/10/15 07:42

回答ありがとうございます。質問なのですがこのコードと同じ構造をとって同じブロック内にHTMLを記載したとして、CSSではどのようにして編集すればよいでしょうか。通常と同じように「.wrappar」「.box」というように指定して、float-rightなどで回り込ませるのでしょうか・・・

hatena19

2020/10/15 08:22 編集

ブロック内での横並びは、display: flex; を使うのが今風です。 float: right は過去の遺物です。質問に提示のコードを元に変更したサンプルを回答に追記しましたので参照ください。

snowdropAPP

2020/10/16 00:42

サンプルコードの記載までありがとうございます。 float:rightを使うことはあまりよくないと何かのサイトで書いてありましたが、過去の遺物とまで言われるほどになったのですね。今後はdisplay:flex;使用してみたいと思います。サンプルのコードを参考にしてコードの編集を行ったところいろいろ試行錯誤してうまくいきましたのでベストアンサーに選ばせていただきます。ありがとうございます。

hatena19

2020/10/16 01:54

念のために補足しておきますと、要素を横並びさせるのに float: right を使うのは過去の遺物といういみです。 floatの本来の機能であるテキスト等の回り込みに使う場合は現役です。 float - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/float

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