2020.12.16

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

今回は、以下の画像のような「複数アイテムを交互に表示する方法」について解説していきます!

 

 

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

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

 

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

早速画像のような「複数アイテムを交互に表示する方法」について、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行目

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

 

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

完成版はこちらです。

 

See the Pen oNzZRgz by ゆーじろー (@yuji64) on CodePen.dark

 

まとめ

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

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

 

 

CONTACT
RECRUIT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

私たちと働いていただける方を募集しています。