Display flexを使い、思い通りのレイアウトに要素を配置します。TOPページのテンプレートが付いてます

by geralt pixabay

ブログのTOPページなどをつくるときに思い通りのレイアウトを作るのに時間がかかることはありませんか？

flexboxを使って簡単にレイアウトする方法を解説します。

display:flexの使い方がポイントです。

PCとスマホのTOPページの代表的なレイアウトとコーディング例も紹介します。

基礎がわかると劇的にレイアウトするのが楽になります。

コーディング例はコピペでご活用ください。

解説する内容

１．Display flexを使い、思い通りのレイアウトに要素を配置します。

２．ブログのPC用TOPページのテンプレート。display flexで要素を横並びに表示したコーディング

３．ブログのスマホ用TOPページのテンプレート。display flexで 縦に要素を並べて表示したコーディング

簡単にまとめましたので最後まで読んでください。

三分で読めますからね！

１．Display flexを使い、思い通りのレイアウトに要素を配置します。

重ねずに要素をレイアウトする方法を紹介します。

＊要素を重ねて表示するレイアウト方法は、こちらを参照ください。
positionプロパティとz-indexプロパティを使って思い通りのレイアウトを表示します。

まず、「display flexの基本構造」と

「知っていると使えるレイアウト」を紹介します。

1-1.display:flexの基本構造

親要素に定義することで、子要素の並び方をコントロールできる便利なスタイルです。

横並びにするには、CSSに【　display:flex;　】と設定すれば完了です。

＊display:flex;は、フレックスボックスを使う定義。

＊デフォルトが【　flex-direction:row;　】で横並びになります。

<div class="parent">
 <div class="child">要素１</div>
 <div class="child">要素２</div>
 <div class="child">要素３</div>
 <div class="child">要素４</div>
</div>

.parent{
 display:flex;
}

【　display:flex;　】 と一緒に親要素に設定できるプロパティ一覧

＊flexboxの詳しい使い方は、こちらを参照ください。
フレックスボックスの基本概念

1-2.ブログでよく使う横並びの均等配置

複数の記事の抜粋などを横並びに表示する場合

子要素（.child）=抜粋を

　flexboxで横並びにして【display:flex;】
　親要素の横幅いっぱいに子要素を均等に配置し【space-between】
　親要素の縦幅の中央に配置【center】
　＊デフォルトが【flex-direction:row;】で横並び

するように親要素にプロパティを指示します。

<div class="parent">
 <div class="child">要素１</div>
 <div class="child">要素２</div>
 <div class="child">要素３</div>
 <div class="child">要素４</div>
</div>

.parent{
  display:flex;
  justify-content: space-between;
  align-items:center;
 }

1-3.PCとスマホで並ぶ方向を変えたときに並び順を変える

横並びと縦並びでデザインの表示順を変えたい場合

例）写真と説明文の位置の表示の順番を変える

PC表示

　flexboxで横並びに表示【display:flex;】
　＊デフォルトが【flex-direction:row;】で横並び

スマホ表示

　flexboxでフレックスボックスを定義し【display:flex;】
　子要素を縦並びに順番で【column】
　子要素を縦並びに逆の順番で【column-reverse】

表示する。

index.html：共通

<div class="parent1">
  <div class="child">要素１</div>
  <div class="child">要素２</div>
</div>
<div class="parent2">
  <div class="child">要素３</div>
  <div class="child">要素４</div>
</div>

PC表示

style.css

.parent1,parent2{
  display:flex;
 }

スマホ表示

style.css

.parent1{
  display:flex;
  flex-direction:column;
 }
.parent2{
  display:flex;
  flex-direction:column-reverse;
 }

２．ブログのPC用TOPページ。display flexで要素を横並びに表示したコーディング

2-1.PC用TOPページのテンプレート

一般的に使われているTOPページのフォーマットを作成します。

初心者の間は、まずTOPページを大枠で表現することをオススメします。

各ブロックにコーディングすることでブログが作成できます。

実行している内容を見失わず修正しやすいからです。

header部
会社ロゴ・会社名
ナビゲーション

slide部
スライドや背景写真

main部とaside部
コンテンツ

footer部
ナビゲーション
コピーライト

header部

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

.header__ul{
  display:flex;
  list-style:none;
}

main部とaside部

#main-content{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
main{
  width:70%;
}
aside{
  width:30%;
}

footer部

最下行中央にcopyrightを配置

2-2.実際のコーディング

コーディング結果を表示してコピペすると、自分でも確認できます。

See the Pen PC-template by Seiji Nakamura (@sjnkmr_777) on CodePen.

表示操作のやり方

＊画面上部の[HTML][CSS][Result]をクリックすると、プログラミングコードおよび結果が表示されます。

＊画面下部の [1×] [0.5×] [0.25×] を選択すると結果の表示倍率が変わります。

３．ブログのスマホ用TOPページ。display flexで 縦に要素を並べて表示したコーディング

3-1.スマホ用TOPページのテンプレート

一般的に使われているスマホ用TOPページのフォーマットを作成します。

スマホ用の違い

横幅がPCに比べ狭いため

・ブロックは縦並び

・横並びが少ない

・ナビゲーション表示が
　ハンバーガーメニュー

全体配置

body{
  display:flex;
  flex-direction:column;
}

header部

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

ハンバーガーメニュー

<button class="mobile-menu__btn">
  <span></span>
  <span></span>
  <span></span>
</button>

.mobile-menu__btn > span {
    width: 35px;
    height: 2px;
    display: block;
    margin-bottom: 9px;
}
.mobile-menu__btn > span:last-child {
    margin-bottom: 0;
}

3-2.実際のコーディング

See the Pen iphone-template by Seiji Nakamura (@sjnkmr_777) on CodePen.

４．まとめ

flexboxを使って簡単にレイアウトする方法を解説しました。

重なりのない要素をdisplay flexを使うと扱いやすくなります。

floatなどの複雑なプロパティを使わず表現できるので便利です。

わかりやすいのでぜひ理解して活用してください。

＊最後まで読んでいただきありがとうございます。
　舌足らずで説明不足の所はお許しください。
　また、改良項目・修正項目がございましたらご指摘いただけたら幸いです。

Copyright – Seiji Nakamura, 2022 All Rights Reserved.