TOP ABOUT WORK NEWS BLOG RECRUIT CONTACT ORDER TOP ABOUT WORK NEWS BLOG RECRUIT CONTACT BLOG このブログは間もなく「Webis Tech LABO.」に移設予定です。 Webis Tech LABO.はこちら 2020.12.16 複数のアイテムを交互に表示する方法 今回は、以下の画像のような「複数アイテムを交互に表示する方法」について解説していきます！ 複数アイテムを交互に表示する実装は、最近のコーポレートサイトでも良く使われています。 もし分からない人がいたら、当ブログを機にマスターしましょう！ 複数アイテムを交互に表示する方法 早速画像のような「複数アイテムを交互に表示する方法」について、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> 123456789101112131415161718192021222324252627282930313233343536373839404142 <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; } 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 /* 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; } 123 .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行目 テキストのフォントサイズや余白を調整したりしました。 これで複数のアイテムを交互に表示させることができました！ 完成版はこちらです。 See the Pen oNzZRgz by ゆーじろー (@yuji64) on CodePen. まとめ 以上が、「複数のアイテムを交互に表示する方法」でした！ 最近のWEBサイト制作で良く使う実装方法なので、是非習得してみてください。 BLOG LIST CONTACTRECRUIT CONTACT お仕事の依頼・ご相談はこちらからお問い合わせください。 RECRUIT 私たちと働いていただける方を募集しています。
今回は、以下の画像のような「複数アイテムを交互に表示する方法」について解説していきます！
複数アイテムを交互に表示する実装は、最近のコーポレートサイトでも良く使われています。
もし分からない人がいたら、当ブログを機にマスターしましょう！
複数アイテムを交互に表示する方法
早速画像のような「複数アイテムを交互に表示する方法」について、HTML・CSSの順で解説していきます！
それではいってみよう！
HTML
まずHTMLコードからです。
「.items」を親要素に指定し、その中で子要素である「.item」を4つ用意しました。
CSS
次はCSSコードです。
◎1行目~53行目
まずはリセットCSSを書いて、無駄なデフォルトのスタイルを消します。
◎61行目~64行目
「display: flex;」で要素を横並びにしました。
そして「align–items: center;」で上下中央寄せに。
「justify–content: space–between;」で両端に広げます。
最後に「margin–bottom: 70px;」を指定して、アイテムの下に余白を持たせました。
◎73行目~75行目
このパートが、アイテムを交互に表示させる上で、一番重要なコードです。
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行目
テキストのフォントサイズや余白を調整したりしました。
これで複数のアイテムを交互に表示させることができました！
完成版はこちらです。
See the Pen oNzZRgz by ゆーじろー (@yuji64) on CodePen.
まとめ
以上が、「複数のアイテムを交互に表示する方法」でした！
最近のWEBサイト制作で良く使う実装方法なので、是非習得してみてください。