コンテンツレイアウト

TAGを使って記事をまとめる

SECTIONとARTICLE

記事の一部をまとめる<section>タグ

記事全体をまとめる<article>タグ

（例）
<article>
<section>
<p>テキスト</p>
</section>
<section>
<p>テキスト</p>
</section>
<article>

回り込みCSS

回り込みの指定
文章内に画像を配置したい場合に回り込みを指定します。ここではCSSを使って画像（がぞう）の左右に文章を回り込ませて配置しています。テキストの右横に画像が配置されていますが、左に配置したい時は class="hidari" で変更できます。

【CSS】
.migi{
margin:0 0 25px 25px;
float:right;
}

.hidari{
margin: 0 25px 25px 0;
float: left;
}

【HTML】
<img src="images/sky.jpg" alt="空" class="migi">

回り込みの解除（clear）
他の記事（section）に影響がある場合は回り込みのクリアが必要です。
下記のコードを入れて解除できます。
<br style="clear:both;">

※スマホの表示の時はフロート解除をしないとテキストが切れてしまう場合があります。

CSSへ以下を書き加えておくとよいでしょう。
CSS
@media only screen and (max-width:767px){
img.migi, img.hidari{
display:block;margin:5px auto;
}
.migi,.hidari{
float:none;
}
}

横並びのレイアウト

フレックスボックスで横ならびCSS

親要素であるb-boxと子要素のb-box。
親要素のb-boxはdisplay:flexで子要素が横並びになるように指定しています。

b-boxの中に入っているs-boxです。
これはs-boxで横幅はwidth:30%に指定されています。pxで指定してもOKです。

HTML
<div class="b-box">

<div class="s-box">
<p>b-boxの中に入っているs-boxです。<br>
これはs-boxで横幅はwidth:30%に指定されています。pxで指定してもOKです。<br>
</p>
</div>

<div class="s-box">
<p>b-boxの中に入っているs-boxです。<br>
これはs-boxで横幅はwidth:30%に指定されています。pxで指定してもOKです。</p>
</div>

<div class="s-box">
<p>b-boxの中に入っているs-boxです。<br>
これはs-boxで横幅はwidth:30%に指定されています。pxで指定してもOKです。</p>
</div>

</div>

CSS
.b-box {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
}

.s-box {
width:30%;
color: #3366cc;
}

@media screen and (max-width: 767px) {
.b-box {
flex-direction: column;
}
.b-box .s-box {
width: 100%;
}
}

もちろん画像（写真）も横並びになります

HTML
<div class="b-box">

<div class="s-box">
<img src="images/ph1.jpg" alt="花1">
</div>

</div>