最速5分見積
もり

で依頼する

ブログ

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

Web制作

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

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

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

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

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

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

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

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

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

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

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
.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つの子要素を親要素の左端・右端に設置します。

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

1
2
3
4
.header{
    display: flex;
    justify-content: space-between;
}

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

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

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

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

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

HTML

1
2
3
4
5
6
7
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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

1
2
3
4
5
6
7
8
9
10
11
12
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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を使えば、簡単にレイアウトを変更できます。

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