CSSを学ぶ。display:flex;を使って横並びと中央寄せ

前回作成した『要素を重ねた画像』を横並びにして、中央寄せする方法を初心者向けに解説していきます。

今回のポイントは以下の2つです。

  • 『display』プロパティに『flex』を指定することで要素を横並びにする。
  • 『justify-content』に『center』を指定することで要素を中央寄せする。

『display:flex;』ってどんなことが出来るの?

簡単に『ブロック要素』を横並びにできるよ。

それでは前準備から順に解説をしていきます。

前準備

ここで前回作成した画像・HTMLファイル・CSSファイルを紹介しておきます。

前回の記事

以下のファイルを同じフォルダに格納して使用して下さい。

画像

ファイル名:pakupakutop.jpeg
大きさ:640 × 427

HTML

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
 <body>

    <div class="image-box">
        <img src="pakupakutop.jpeg" alt="クローバー">
        <h1>ぱくぱくのCSS講座</h1>
    </div>

    <div class="image-box">
        <img src="pakupakutop.jpeg" alt="クローバー">
        <h1>ぱくぱくのCSS講座</h1>
    </div>

    <div class="image-box">
        <img src="pakupakutop.jpeg" alt="クローバー">
        <h1>ぱくぱくのCSS講座</h1>
    </div>

 </body>
</html>

CSS

.image-box{
    width: 500px;
    height: 300px;
    position: relative;
 margin: 5px;
}

img{
    width: 100%;
    height: 100%;
}

h1{
    position: absolute;
    top: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255,255,255,0.7);
}

ブラウザ表示

画面からはみ出ていますが、画像は全部で3枚下に向かって並んでいます。

画像のサイズ調整(widthとheight)

少し画像が大きく感じますので、少し小さく調整しましょう。

画像指定である『img』は親要素である『image-box』の最大幅で設定されているので、『image-box』の『横幅=width』と『height=高さ』の値を小さく設定して調整します。

ちょっとややこしいなぁ。。。

親要素(image-box)のブロックの中に、子要素(img)は入っているので、親要素のブロックサイズを小さくすると自然と子要素は小さくなるってことだよ。

なるほどぉ。。。

CSS

.image-box{
    width: 350px;
    height: 200px;
    position: relative;
 margin: 5px;
}

img{
    width: 100%;
    height: 100%;
}

h1{
    position: absolute;
    top: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255,255,255,0.7);
}

ブラウザ表示

ちょうど良いサイズになったと思います。

ブロック要素についてもう少し知りたい方は以下の記事を参考にしてみて下さいね。

文字のサイズを調整(font-size)

画像に対して文字が少し大きい気がします。

そこで『font-size』プロパティを使って文字のサイズを調整しましょう。

今回指定する大きさは『x-large』としておきます。

◆補足◆
サイズを文字で指定する場合、以下のものがあります。
・xx-large
・x-large
・large
・medium など

このように、いつもなら『10px』など数値を使って調整することも出来ますが、単語を使って調整をする方法もあるよ。

そして指定したい文字はH1タグなので、この要素に対して指定をします。

CSS

.image-box{
  width: 350px;
  height: 200px;
  position: relative;
  margin: 5px;
}

img{
    width: 100%;
    height: 100%;
}

h1{
  position: absolute;
  top: 0;
  margin: 0;
  text-align: center;
  width: 100%;
  background-color: rgba(255,255,255,0.7);
  font-size: x-large;
}

ブラウザ表示

画像に対して程良いサイズに指定できました。

画像を横並びにする。

今回は画像を横並びにする為に、『display』プロパティに『flex』を指定する方法を使おうと思っています。

ブロック指定(div class)

『display』プロパティに『flex』を指定するには横並びにしたい要素それぞれにブロックを指定する必要があります。

ここでは『画像』と『文字』をセットで1つのブロックにしていくよ。

そこでHTMLに『div要素』を記述していきます。

今回はclass名にそれぞれに『box1』・『box2』・『box3』と指定します。

HTML

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
 <body>

    <div class="box1">
        <div class="image-box">
            <img src="pakupakutop.jpeg" alt="クローバー">
            <h1>ぱくぱくのCSS講座</h1>
        </div>
    </div>

    <div class="box2">
        <div class="image-box">
            <img src="pakupakutop.jpeg" alt="クローバー">
            <h1>ぱくぱくのCSS講座</h1>
        </div>
    </div>

    <div class="box3">
        <div class="image-box">
            <img src="pakupakutop.jpeg" alt="クローバー">
            <h1>ぱくぱくのCSS講座</h1>
        </div>
    </div>

 </body>
</html>

div要素って確か『ブロック要素』に指定するHTMLだよね。

おっ!
よく覚えていたね。
以前の記事でも説明した内容だね。

画像を横並びに指定(display:flex;)

1つづつ『ブロック』に指定できたら、それらをCSSを使って横並びにしていくよ。

それでは先程指定したブロック(画像)要素に『display』プロパティに『flex』を指定して横並びにしてみましょう。

ここで『display:flex;』を使う点で覚えておくことがあります。

それは、『display:flex;』を指定した直下の子要素に対して横並びが指定されることです。

今回の場合、先程指定した『div要素』は『body要素』の子要素である為、『display:flex;』『body要素』に書き込みます。

CSS

.image-box{
 width: 350px;
    height: 200px;
    position: relative;
 margin: 5px;
}

img{
    width: 100%;
    height: 100%;
}

h1{
    position: absolute;
    top: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255,255,255,0.7);
 font-size: x-large;
}

body{
    display: flex;
}

ブラウザ表示

画像の中央寄せ(justify-content:center;)

それでは最後の調整です。

横並びに画像たちを中央寄せにします。

中央寄せするには『justify-content』プロパティに『center』を指定します。

そしてこの『justify-content:center;』にも『display:flex;』と同様で、指定した直下の子要素に対して中央寄せが指定されるルールがあります。

CSS

.image-box{
 width: 350px;
    height: 200px;
    position: relative;
 margin: 5px;
}

img{
    width: 100%;
    height: 100%;
}

h1{
    position: absolute;
    top: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255,255,255,0.7);
 font-size: x-large;
}

body{
    display: flex;
    justify-content: center;
}

ブラウザ表示

見事画像たちは中央寄せされました。

これは流石に感動です。

すごい!一気に中央寄せ出来た!!

このように『justify-content: center;』は万能指定方法だよ!
絶対に覚えておこう。

いかがだったでしょうか。

一瞬にして横並びに指定できる『display:flex;』と中央寄せができる『justify-content:center;』

いずれもサイトやブログを制作する上で使用頻度は高くなるCSSでの指定方法です。

今回の解説内容を基に、どんどん使って慣れていきましょう。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

CSSカテゴリの最新記事