左右に配置するレイアウトはdisplay:flex; flex-direction: row-reverse;で簡単にできる

SUGOYOKU BLOG

福岡のホームページ制作、SEO対策会社のスゴヨクです。今回はパソコンのレイアウトでよく見る左右に配置するレイアウトの配置方法の紹介です。前はfloatを使って「left、right」としていましたが、現在はdisplay: flex;で簡単に出来ます！

上記のような画像のレイアウトの場合のHTMLは

<ul>
<li class="flex-wrap">
 <img src="画像①">
 <p>テキスト①</p>
</li>
<li class="flex-reverse">
 <p>テキスト②</p>
 <img src="画像②">
</li>
 <li class="flex-wrap">
<img src="画像③">
<p>テキスト③</p>
</li>
</ul>

<ul>

テキスト①

</li>

テキスト②

</li>

テキスト③

</li>

</ul>

HTMLは普通に記述します。 ul　liじゃなくても全然大丈夫です！

次にcssです。

.flex-wrap{
display: flex;
flex-wrap:wrap;
}
.flex-wrap img,.flex-wrap p{
width: 50%;
}
.flex-reverse{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-reverse img,.flex-reverse p{
width: 50%;
}

.flex-wrap{

display: flex;

flex-wrap:wrap;

}

.flex-wrap img,.flex-wrap p{

width: 50%;

}

.flex-reverse{

display: -webkit-flex;

display: flex;

-webkit-justify-content: flex-end;

justify-content: flex-end;

-webkit-flex-direction: row-reverse;

flex-direction: row-reverse;

}

.flex-reverse img,.flex-reverse p{

width: 50%;

}

上記をコピペして配置をすれば、左右のレイアウトになります。

左右のレイアウトがしたいとお考えの方はコピペをすれば簡単なので、どうぞ！

ちょこっとメンターサービス

HP無料診断

【実践マーケティング手法２２選】無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

SUGOYOKU BLOG