最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 【実例あり】Flexboxを使ってWEBサイトを制作しよう

Web制作

【実例あり】Flexboxを使ってWEBサイトを制作しよう

CSS3で一番の変化といえば、Flexboxですよね。

今までは、Floatなどを使ってレイアウトを変更させるのが一般的でした。

しかし、Floatとには様々な問題があり、扱いが難しいことが欠点です。

CSS3から登場したFlexboxを使えば簡単に要素を横並びにできます。

おそらく、要素の並び方を変更するときはFlexboxを使うのが主流になると思われます。

なので、今のうちにFlexboxを習得しましょう。

今回は、　Flexboxを使って制作したサンプルサイトを例にして説明します。

サンプルサイトを見てFlexboxを理解しよう

まずは、今回紹介するサイトのコードを記載します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexBoxサンプルサイト</title>
    <link rel="stylesheet" href="css/bases.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">

        <header class="header">
            <h1 class="logo">フレックスボックスサンプルサイト</h1>
            <div class="header-info">
                <p class="tel">TEL：000-000-000</p>
                <address class="address">住所：東京都〇〇区〇ー〇ー〇</address>
            </div>
        </header>

        <nav class="navi">
            <ul class="navi-ul">
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
            </ul>
        </nav>

        <div class="top-image">
            <img src="images/office.jpg" alt="メイン画像">
        </div>

        <main class="main">
            <div class="section-title">
                SECTION
            </div>
            <section class="section-image">
                <ul class="list-ul">
                    <li class="list-li">
                        <div class="list-imgae">
                            <img src="images/pc.jpg" alt="画像">
                        </div>
                        <div class="list-title">
                            <h3>見出し</h3>
                        </div>
                        <div class="list-desc">
                            <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="list-imgae">
                            <img src="images/pc.jpg" alt="画像">
                        </div>
                        <div class="list-title">
                            <h3>見出し</h3>
                        </div>
                        <div class="list-desc">
                            <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="list-imgae">
                            <img src="images/pc.jpg" alt="画像">
                        </div>
                        <div class="list-title">
                            <h3>見出し</h3>
                        </div>
                        <div class="list-desc">
                            <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
                        </div>
                    </li>
                </ul>
            </section>

            <section class="section-table">
                <div class="section-title">
                    <h2>TABLE</h2>
                </div>
                    <table class="table">
                        <tbody><tr>
                            <th>会社名</th>
                            <td>株式会社FlexBoxサンプル</td>
                            </tr>
                            <tr>
                                <th>代表者名</th>
                                <td>〇〇〇〇</td>
                            </tr>
                            <tr>
                                <th>住所</th>
                                <td>東京都〇〇区〇ー〇ー〇</td>
                            </tr>
                            <tr>
                                <th>連絡先</th>
                                <td>000-000-000</td>
                            </tr>
                        </tbody></table>

                <div class="table-main">

                </div>
            </section>
            <section class="news">
                <h2 class="section_ttl">NEWS</h2>
                <dl class="news_list grid">
                    <dt>〇〇〇〇年〇〇月〇〇日</dt>
                    <dd>〇〇なニュースがありました。</dd>
                </dl>
                <dl class="news_list grid">
                    <dt>〇〇〇〇年〇〇月〇〇日</dt>
                    <dd>〇〇なニュースがありました。</dd>
                </dl>
                <dl class="news_list grid">
                    <dt>〇〇〇〇年〇〇月〇〇日</dt>
                    <dd>〇〇なニュースがありました。</dd>
                </dl>
                <dl class="news_list grid">
                    <dt>〇〇〇〇年〇〇月〇〇日</dt>
                    <dd>〇〇なニュースがありました。</dd>
                </dl>
                <p class="more"><a href="">もっと見る ></a></p>
            </section>
        </main>
        <footer class="footer">
            <div class="footer-box">
                <ul class="footer-ul">
                    <li class="footer-list">ナビ</li>
                    <li class="footer-list">ナビ</li>
                    <li class="footer-list">ナビ</li>
                    <li class="footer-list">ナビ</li>
                    <li class="footer-list">ナビ</li>
                    <li class="footer-list">ナビ</li>
                </ul>
                <p class="copy-right"><small>copy@</small></p>
            </div>
        </footer>
    </div>
</body>
</html>

CSSS

.container{
    margin-top: 20px;
}

.header{
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.logo{
    font-size: 26px;
}

.tel{
    padding-bottom: 5px;
}

.navi{
    width: 960px;
    margin: 0 auto;
}

.navi-ul{
    display: flex;
    justify-content: space-between;
}

.navi-li{
    width: 16rem;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    text-align: center;
}

.navi-li a{
    display: block;
    color: #333;
    padding: 10px 0;
    text-decoration: none;
    transition: 0.3s;
}

.navi-li a:hover{
    text-decoration: none;
    background: #333;
    color: #fff;
}

.navi-li:last-child{
    border-right: 1px solid #333;
}

.top-image{
    margin: 30px 0px;
}

.section-title{
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.main{
    width: 960px;
    margin: 0 auto;
}

.section-image{
    margin-bottom: 70px;
}

.list-ul{
    display: flex;
    justify-content: space-between;
}

.list-li{
    width: 300px;
}

.list-imgae img{
    width: 300px;
}

.list-title{
font-size: 20px;
font-weight: bold;
text-align: center;
margin: 10px 0;
}

.section-table{
    width: 780px;
    margin: 0px auto 60px;
}

.table {
    width: 780px;
    margin: 40px auto 60px;
}

.table th {
    width: 200px;
    background: #ccc;
    padding: 15px 20px;
    border: 1px solid #aaa;
}

.table td {
    padding-left: 20px;
    border: 1px solid #aaa;
}

.news {
    width: 780px;
    margin: 0 auto 60px;
}

.section_ttl {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.news_list {
    border-bottom: 1px solid #ccc;
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.news_list dt {
    margin-bottom: 10px;
}

.more {
    text-align: right;
}

.footer{
    background: #222;
    padding: 30px 0 10px;
}

.footer-box{
    width: 960px;
    margin: 0 auto;
}

.footer-ul {
    text-align: center;
}

.footer-list{
    color: #fff;
    display: inline-block;
    padding: 0 20px;
    border-right: 1px solid #fff;
    line-height: 1;
}

.footer-list:last-child {
    border-right: none;
}

.copy-right{
    color: #fff;
    text-align: center;
    margin-top: 30px;
}

今回、Flexboxを使用している部分は以下の2つです。

・header部分(サイトタイトルと会社情報の横並べ)
・グローバルナビの部分
・セクション部分(画像・本文の横並べ)

フッターナビの部分は「display: inline-block;」を使用しています。

上の2つの部分について詳しく説明します。

header部分

Flexbox

header部分は、サイトタイトル(ロゴ)とヘッダー情報を横並びにしています。

また、header部分の子要素が上下中央になるにように指定してます。

Flexboxは、要素の横並びだけでなく、上下中央を揃えることも可能です。

headerの中には、「logo」と「header-info」という子要素を作成します。

この2つの子要素を親要素の左端・右端に設置します。

両端に子要素を配置するために、親要素に以下のコードを記述しましょう、

.header{
    display: flex;
    justify-content: space-between;
}

このように記述することで、最初の子要素を親要素の左端・最後の子要素を親要素の右端に設置できます。

つまり、最初の子要素であるサイトタイトル(ロゴ)は左端に設置し、最後の子要素であるヘッダー情報は右端に設置されます。

また、「justify-content: space-between;」は最初と最後の子要素を両端に設置した後、残りの子要素がある場合は等間隔で配置されるのが特徴です。

子要素を横並びにできたら、Flexboxを使って上下中央を揃えましょう。

上下中央に揃えるために以下のコードを追記してください。

HTML

        <header class="header">
            <h1 class="logo">フレックスボックスサンプルサイト</h1>
            <div class="header-info">
                <p class="tel">TEL：000-000-000</p>
                <address class="address">住所：東京都〇〇区〇ー〇ー〇</address>
            </div>
        </header>

CSS

.header{
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.logo{
    font-size: 26px;
}

.tel{
    padding-bottom: 5px;
}

「align-items: center;」を追記することで、子要素の縦の間隔を揃えることが可能です。

グローバルナビの部分

Flexbox

グローバルナビもFlexboxを使って要素を横並びにしています。

ここでが「ulタグ」と「liタグ」使ってグローバルナビを作成しています。

なので、「ulタグ」に子要素を横並びにするスタイルを適用しましょう。

HTML

        <nav class="navi">
            <ul class="navi-ul">
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
                <li class="navi-li">
                    <a href="#">ナビ</a>
                </li>
            </ul>
        </nav>

CSS

.navi-ul{
    display: flex;
    justify-content: space-between;
}

.navi-li{
    width: 16rem;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    text-align: center;
}

このように記述すれば、子要素(リストタグ)が横並びになります。

ヘッダー部分では子要素が2つしかなかったので、「justify-content: space-between;」を使うと子要素が両端に設置されました。

しかし、グローバルナビの部分では子要素が2以上あるため、最初と最後の子要素は両端に設置され、残りの子要素は等間隔に配置されます。

セクション部分

Flexbox

セクション部分もFlexboxを使用しています。

まずは、実際のコードを見てみましょう。

HTML

            <div class="section-title">
                SECTION
            </div>
            <section class="section-image">
                <ul class="list-ul">
                    <li class="list-li">
                        <div class="list-imgae">
                            <img src="images/pc.jpg" alt="画像">
                        </div>
                        <div class="list-title">
                            <h3>見出し</h3>
                        </div>
                        <div class="list-desc">
                            <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="list-imgae">
                            <img src="images/pc.jpg" alt="画像">
                        </div>
                        <div class="list-title">
                            <h3>見出し</h3>
                        </div>
                        <div class="list-desc">
                            <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
                        </div>
                    </li>
                    <li class="list-li">
                        <div class="list-imgae">
                            <img src="images/pc.jpg" alt="画像">
                        </div>
                        <div class="list-title">
                            <h3>見出し</h3>
                        </div>
                        <div class="list-desc">
                            <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
                        </div>
                    </li>
                </ul>
            </section>

CSS

.section-title{
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.section-image{
    margin-bottom: 70px;
}

.list-ul{
    display: flex;
    justify-content: space-between;
}

.list-li{
    width: 300px;
}

.list-imgae img{
    width: 300px;
}

.list-title{
　　　　　　font-size: 20px;
　　　　　　font-weight: bold;
　　　　　　text-align: center;
　　　　　　margin: 10px 0;
}

セクション部分も「justify-content: space-between;」を使って、要素を横並びにしています。

基本的な使い方は、ヘッダー部分・グローバルナビ部分と変わりません。

また、単純に横並びにしたいだけなら、「display: flex;」を適用するだけでOKです。

Flexboxのスタイルは、必ず親要素に適用してください。

子要素にFlexboxのスタイルを適用しても反映されないので注意しましょう。

まとめ

いかがでしたか？

Flexboxを使えば、簡単にレイアウトを変更できます。

ぜひ、試してくださいね。