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

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

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

 

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

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

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

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

それではいってみよう!

HTML

まずHTMLコードからです。

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

CSS

次はCSSコードです。

◎1行目~53行目

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

◎61行目~64行目

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

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

justifycontent: spacebetween;」で両端に広げます。

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

◎73行目~75行目

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

itemに対してnthchild(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」のサイズを、「flexbasis: 48%;」に指定しました。

◎87行目~95行目

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

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

まとめ

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

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

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事