Flexboxを使った基本的なレイアウト（パターン２）

Mina

こんにちは。Minaです。
今回はHTMLとCSSに関する記事になります。
Flexboxを使った基本的なレイアウト（パターン２）について紹介します。

sp版

Flexboxレイアウト（sp版）

pc版

Flexboxレイアウト（pc版）


sp版では、画像（ここでは背景色をつけただけ）と文章が縦に並んでいます。pc版では、画像と文章が横に並んでおり、２つめの画像と文章では、位置が１つめと逆になっています。今回はこれをモバイルファースト（sp版の表示を基本とする）で作っていきます。

では、さっそく、htmlを見ていきましょう。ほんの少し長いです。

<!DOCTYPE html>
<html lang="ja">

<head>

<meta charset="utf-8">
<title>Flexboxレイアウト</title>
<meta name="description" content="Flexboxレイアウト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="flexbox">

<h2 class="heading">Flexboxレイアウト</h2>

<div class="container">

<div class="item">
<div class="item-img"></div>
<p class="item-txt">テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。テキストボックス。テキストボックス。</p>
</div><!--item-->

<div class="item reverse">
<div class="item-img"></div>
<p class="item-txt">テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。テキストボックス。テキストボックス。</p>
</div><!--item-->

</div><!--container-->

</div><!--flexbox-->

</body>

</html>

ここまでです。

<meta name="viewport" content="width=device-width, initial-scale=1">
はsp版とpc版とレスポンシブに対応させるため必ず記述してください。

<div class="item-img"></div>
が画像（ここでは背景色をつけるだけ）になります。

<p class="item-txt">テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。テキストボックス。テキストボックス。</p>
が文章になります。

これら画像と文章を1セットとして、itemクラスを作り囲っています。このitemを２つ作ります。1つ作ったら後はコピペですが、２つめのアイテムは画像と文章の位置が逆になるため、reverseクラスを指定しています。そして、各itemをcontainerクラスを作り囲っています。

htmlは以上になります。次は、cssを見ていきましょう。

まずは、大本の設定を行います。

*{
margin : 0;
padding : 0;
}

*,
*::before,
*::after{
box-sizing : border-box;
}

html{
font-size : 100%;
}

body{
font-family : sans-serif;
color : #432;
}

リセットcssを読み込んでいないので、ブラウザによる空白を、
*{
margin : 0;
padding : 0;
}
で取り合えずなくしています。

また、
*::before,
*::after{
box-sizing : border-box;
}
でボックスモデルをborder-boxに変更しています。

では、画像と文章の設定を行っていきましょう。

まずは、画像の設定を行います。

.item-img{
background-color : #ddd;
width : 100%;
height : 250px;
}

画像の色は灰色にしています。
横幅は親要素の100%にし、高さを250pxに固定しています。

続いて、itemクラスの設定を行います。

.item{
display : flex;
flex-direction : column;
margin-top : 20px;
}

sp版では縦に並べるため、flex-direction : column;を指定しています。縦に並べるだけならFlexboxを使わなくても良いのですが、全体の整合性を考えたときにスッキリとした記述になるためFlexboxを使っています。
また、上マージンを20pxとっています。

続いて、containerクラスの設定を行います。

.container{
margin-top : -20px;
}

margin-top : -20px;でitemクラスでつけたmargin-top : 20px;が、1列目にもついてしまうため、それを相殺しています。

続いて、全体を囲むflexboxの設定です。

.flexbox{
padding : 0 20px;
}

左右の両端に余白20pxを設けています。

最後に、見出しとなるheadingクラスの設定をします。

.heading{
padding : 20px 0;
}

上下に20pxの余白を設けています。

以上がsp版の設定になります。
続いて、pc版の設定をしていきます。
メディアクエリを使います。一気に見てしまいましょう。

@media screen and (min-width : 768px),print{

.flexbox{
max-width : 1200px;
margin : 0 auto;
}

.item{
flex-direction : row;
justify-content : space-between;
align-items : center;
}

.reverse{
flex-direction : row-reverse;
}

.item-img{
width : calc((100% - 20px) / 2);
}

.item-txt{
width : calc((100% - 20px) / 2);
}

}

ここまでです。

まず、@media screen and (min-width : 768px)で、画面幅768px以上の設定をしますと宣言しています。

.flexbox{
max-width : 1200px;
margin : 0 auto;
}

max-width : 1200px;で最大横幅を1200pxに設定しています。
margin : 0 auto;で左右に中央寄せしています。

.item{
flex-direction : row;
justify-content : space-between;
align-items : center;
}

flex-direction : row;で要素を横並びにしています。
justify-content : space-between;で要素を両端に配置しています。
align-items : center;で要素を垂直方向に中央揃えしています。これで、文章が真ん中に来ます。

.reverse{
flex-direction : row-reverse;
}

flex-direction : row-reverse;で要素の並びを逆にしています。これで、画像と文章の位置が入れ替わります。

.item-img{
width : calc((100% - 20px) / 2);
}

.item-txt{
width : calc((100% - 20px) / 2);
}

要素の横幅を、間の余白の20px分引いて２分割した値に設定しています。

おつかれさまでした。
以上がFlexboxを使った基本的なレイアウトについての説明になります。
今回は、画像と文章にそれぞれ横幅を設定して、justify-content : space-between;で両端に配置させましたが、余白をgapを使って設け、また、要素のサイズはflexを使って設定することもできます。gapやflexを使うと簡単に余白やサイズの調整ができるので便利です。例えば、

.item{
gap : 20px;
}

とitemクラスに20pxの余白を設け、

.item-img{
flex : 1;
}

.item-txt{
flex : 1;
}

とすることで、要素を1:1の比で並べることができます。
では、今日はこの辺で失礼します。

この記事が気に入ったらサポートをしてみませんか？