【HTML/CSS】要素を横並びにしてみよう(display: flex;)

今回は、今まで作っていた<p>について、横並びになるようにしてみましょう。

おお！その通りです。
今回は<p>要素を横並びにした後、「Flexbox」と呼ばれる位置の調節方法を使って、<p>要素の間にスペースを開けて表示してみましょう。
後ほど、<h1>要素も中央揃えにしていきますよ。

横並びにするためには、親要素と子要素の関係が必要になりますので、<p>の要素について全て、インデント（半角スペース２つ分）を下げて、親要素に<div>を追加しましょう。

そんなときは、動かしたい範囲を選択した後に、Tabキーを押せば、全て一度に動かすことができますよ。

このコードの結果、は以下の通りになります。
<div>要素は中身が何もありませんので、<p>要素の中身以外、何も表示されません。

さて、ではCSSに横並びにする記述をしていきましょう。
<div>につけたクラス名と同じものをCSSに記述しましょう。
今回のクラス名は「contents」ですね。

good!
そして、親要素の「.contents」に「display: flex;」と記述しましょう。

実際にやってみましょうか。
コントロールキーと、「/」でコメントアウトして、子要素に書き込みます。

そうですね。
親要素や子要素の関係が大切だと言っていたのは、このためだったのです。

さて、ここから、Flexboxを使って位置の調節をしていきましょう。
今回はFlexboxの中の一つ「justify-content」を使って、並び方を変えていきましょう。
分かりやすいよう、display: flex;の下に記述していきましょうね。

「justify-content: space-between;」を使うと、左右の要素は画面端に寄ります。
画像の関係で見えにくかったら、ごめんなさいね。

「justify-content: space-around;」を使うと、画面端にもスペースができます。

ありますが、多いのでここでは紹介しきれません。
なのでブログの最後に、この内容に関係した他のサイトを紹介しておきます。

ですが、自分で検索して調べるのがプログラマー（エンジニア）には必須の能力ですので、「CSS 横並び」や「justify-content」などで調べてみることをお勧めします。

それは、私のブログで言うとこの部分になります。
下の画像を見てください。

ええ、では、ヘッダーを表す<header>、フッターを表す<footer>を記述していきましょう。
ヘッダーは上に、フッターは下に記述しましょうね。

今回は、ついでにヘッダーとフッターにも「display: flex;」と「justify-content: center;」の記述をしています。

ええ、今は高さの指定をしていませんからね。
では、次回は高さや幅を指定する方法をご紹介しましょうか。