今回は、「複数アイテムを交互に表示する方法」について解説していきます！

See the Pen
Untitled by webis (@webis-co)
on CodePen.

複数アイテムを交互に表示する実装は、最近のコーポレートサイトでも良く使われています。

もし分からない人がいたら、当ブログを機にマスターしましょう！

複数アイテムを交互に表示する方法

早速画像のような「複数アイテムを交互に表示する方法」について、HTML・CSSの順で解説していきます！

それではいってみよう！

HTML

まずHTMLコードからです。

 <div class="items">
        <div class="item">
            <div class="item__box">
            </div>
            <div class="item__text">
                <h2>タイトルが入ります。</h2>
                <p>
                    タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。
                </p>
            </div>
        </div>
        <div class="item">
            <div class="item__box">
            </div>
            <div class="item__text">
                <h2>タイトルが入ります。</h2>
                <p>
                    タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。
                </p>
            </div>
        </div>
        <div class="item">
            <div class="item__box">
            </div>
            <div class="item__text">
                <h2>タイトルが入ります。</h2>
                <p>
                    タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。
                </p>
            </div>
        </div>
        <div class="item">
            <div class="item__box">
            </div>
            <div class="item__text">
                <h2>タイトルが入ります。</h2>
                <p>
                    タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。タイトルに関する文章が入ります。
                </p>
            </div>
        </div>
    </div>

「.items」を親要素に指定し、その中で子要素である「.item」を4つ用意しました。

CSS

次はCSSコードです。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


/* ここから */
body {
    padding: 100px 20px;
}

.items {
    max-width: 1100px;
    margin: 0 auto;
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70px;
}

.item:nth-child(even) {
    flex-direction: row-reverse;
}

.item__box {
    flex-basis: 48%;
    background-color: red;
    height: 300px;
}

.item__text {
    flex-basis: 48%;
}

.item__text h2 {
    font-size: 2rem;
    margin-bottom: 40px;
}

.item__text p {
    font-size: 1..5rem;
    line-height: 1.8;
}

◎1行目~53行目

まずはリセットCSSを書いて、無駄なデフォルトのスタイルを消します。

◎61行目~64行目

「display: flex;」で要素を横並びにしました。

そして「align–items: center;」で上下中央寄せに。

「justify–content: space–between;」で両端に広げます。

最後に「margin–bottom: 70px;」を指定して、アイテムの下に余白を持たせました。

◎73行目~75行目

このパートが、アイテムを交互に表示させる上で、一番重要なコードです。

.item:nth-child(even) {
    flex-direction: row-reverse;
}

itemに対して「nth–child(even)」を指定することで、偶数番目のitemに「flex-direction: row-reverse;」のスタイルが適応されます。

「even」が偶数、そして「odd」が奇数番目の要素にスタイルを適応させることができます。

だからitemを交互に表示させることができる！

反対向きにしたいitem1つ1つに対して、「flex-direction: row-reverse;」を付ければ要素を交互に表示することはできる。

しかし余計なコードが増えてしまい、面倒になる。

そこで初めから「even」や「odd」のどちらかを指定しておくことで、itemが増えた場合でも自動でitemを交互に表示させることができます！

僕も初めは1つ1つのitemに「flex-direction: row-reverse;」を付けていましたが、かなり効率が悪かったです。

◎77行目~85行目

itemの子要素である「item__box」と「item__text」のサイズを、「flex–basis: 48%;」に指定しました。

◎87行目~95行目

テキストのフォントサイズや余白を調整したりしました。

これで複数のアイテムを交互に表示させることができました！

まとめ

以上が、「複数のアイテムを交互に表示する方法」でした！

最近のWEBサイト制作で良く使う実装方法なので、是非習得してみてください。