Flexboxを使った基本的なレイアウト（パターン２）
こんにちは。Minaです。
今回はHTMLとCSSに関する記事になります。
Flexboxを使った基本的なレイアウト（パターン２）について紹介します。
sp版
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の比で並べることができます。
では、今日はこの辺で失礼します。