CSS /コンテンツ内を移動させるときにほぼ全てpositionを使う間違い/divタグの多用

Question

cssでコードを打つとき、レイアウトの配置でコンテンツ内を移動させるためほぼ全てpositionを使いまくってしまうのですがこのやり方は間違っている気がします。どんなプロパティを使用してコーディングしたらいいのでしょうか。
また、divタグを多用してしまい、divタグだらけのコードになっていまいます。どんな時にdivタグを使わないのかなど教えていただきたいです。よろしくお願いします。

<div class="h2_2">
	<h2>万一の時も安心です</h2>
	<p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
	</div>
	<div class="h2_2bottom">
	<a href="#">ホストをお守りするしくみを見る</a>
	</div>

     <div class="h2_2_1">
	    <span>予約前に政府発行の身分証明書を求める権限</span>	
	</div>
	<div class="h2_2_2">
	    <span>ハウスルールに同意しないと泊まれない</span>	
	</div>
	<div class="h2_2_3">
	   <span>過去の宿泊のレビューもばっちり読める</span>
	</div>
	<div class="h2_2_4">
	   <span>財物損害は¥100,000,000まで無料で補償</span>	
	</div>
	<div class="h2_2_5">
	  <span>$1,000,000の賠償責任保険が無料で付帯</span>	
	</div>
	<div class="h2_2_6">
	  <span>24時間365日対応グローバルカスタマーサポート</span>
    </div>

.h2_2{
position:relative;
top:460px;
text-align:center;
font-size:60px;
color:#2B2B2B;
margin:300px;
}
.h2_2 h2::before{
position:absolute;
content:"";
width:60px;
height:2px;
top:-15px;
left:50%;
background-color:#636262;
transform:translateX(-50%);
}

.h2_2 p{
position:absolute;
text-align:left;
font-size:18px;
color:#4E4D4D;
line-height:1.5;
right:700px;
top:180px;
width:479px;
}

.h2_2bottom{
position:relative;
}

.h2_2bottom a{
position:absolute;
font-size:18px;
top:520px;
left:423px;
color:#2DBC96;
text-decoration:none;
}

.h2_2bottom a:hover{
text-decoration:underline;
}
.h2_2_1,.h2_2_2,.h2_2_3,.h2_2_4,.h2_2_5,.h2_2_6{
position:relative;
}

.h2_2_1 span{
position:absolute;
top:270px;
font-size:18px;
left:1000px;
color:#4E4D4D;
}

.h2_2_2 span{
position:absolute;
font-size:18px;
left:1000px;
top:310px;
color:#4E4D4D;
}

.h2_2_3 span{
position:absolute;
font-size:18px;
left:1000px;
top:350px;
color:#4E4D4D;
}

.h2_2_4 span{
position:absolute;
font-size:18px;
left:1000px;
top:390px;
color:#4E4D4D;
}

.h2_2_5 span{
position:absolute;
font-size:18px;
left:1000px;
top:430px;
color:#4E4D4D;
}

.h2_2_6 span{
position:absolute;
font-size:18px;
left:1000px;
top:470px;
color:#4E4D4D;
}


.h2_2_1 span::before{
position:absolute;
content:"";
border-right:2px solid #2DBC96;
border-bottom:2px solid #2DBC96;
width:5px;
height:13px;
transform:rotate(45deg);
left:-20px;
}

.h2_2_2 span::before{
position:absolute;
content:"";
border-right:2px solid #2DBC96;
border-bottom:2px solid #2DBC96;
width:5px;
height:13px;
transform:rotate(45deg);
left:-20px;
}

.h2_2_3 span::before{
position:absolute;
content:"";
border-right:2px solid #2DBC96;
border-bottom:2px solid #2DBC96;
width:5px;
height:13px;
transform:rotate(45deg);
left:-20px;
}

.h2_2_4 span::before{
position:absolute;
content:"";
border-right:2px solid #2DBC96;
border-bottom:2px solid #2DBC96;
width:5px;
height:13px;
transform:rotate(45deg);
left:-20px;
}

.h2_2_5 span::before{
position:absolute;
content:"";
border-right:2px solid #2DBC96;
border-bottom:2px solid #2DBC96;
width:5px;
height:13px;
transform:rotate(45deg);
left:-20px;
}

.h2_2_6 span::before{
position:absolute;
content:"";
border-right:2px solid #2DBC96;
border-bottom:2px solid #2DBC96;
width:5px;
height:13px;
transform:rotate(45deg);
left:-20px;
}

Comments

[m.ts10806]

実際のコードを提示された方が良いです。
あと要件も「コンテンツ内移動」だけでは伝わりにくいのでは。もっと具体的に記載してください。

[m.ts10806]

それにpositionを使えるのってdivだけではないような・・・
やはり「どういうレイアウトを実現しようとしているか」次第ですね。

Answer 1

どんなプロパティを使用してコーディングしたらいいのでしょうか。

現代的なレイアウト方法だと、CSS の grid や flexbox を使うという方法になると思います。

divタグを多用してしまい、divタグだらけのコードになっていまいます。どんな時にdivタグを使わないのかなど教えていただきたいです。

これは企業サイトなどのソースを見てもそうなっているので、ある程度divだらけになってしまうのは仕方ないことだと思います。
html5で導入された <section>、<nav>、<article>、<header>、<footer> を使えばある程度はdivだらけになることを軽減できます。

Comments

[ponchineey09083]

ありがとうございます。

Answer 2

もしかして、コンテンツと言っているのは要素のことですかね？

あと、positionとdivタグの件については、他のサイトをchromeで確認してみると理解できると思います。
どうやって要素を配置しているのか、divタグはどのくらいの頻度で使われているのか。

Comments

[ponchineey09083]

ありがとうございます。