HTML/CSS

flexboxで画像とテキストを交互に表示する【レスポンシブ対応】

東京フリーランスさんのデイトラ1stを終えて、何か実力を試すために模写したいと思っていた時に出会ったのが、ちづみさんのnoteです。

 

Progate→ドットインストール→デイトラ1stを終えた実力くらいなら、ちょうど良い難易度だと思います。

「わかる!わかるぞ!」って部分と、「どうだったっけ〜・・」って部分があって、とても勉強になります。


2日に分けて7時間で完成しましたが、自分ではかなり苦戦した感じがします。特に、「新着情報」のコーディングで完全に手が止まりましたw

 

この模写の中で出てきたのが、画像とテキストを交互に表示するデザインです。

今回は、復習もかねてまとめておきたいと思います。

 

flexboxで画像とテキストを交互に表示する

このようにツイートでまとめていまして、実際に実装してみたいと思います。

 

 

See the Pen
bPYPdm
by kei (@kei_01011)
on CodePen.

display:flex;とした上で、

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

を新たに記述します。

nth-childという擬似要素を使うことで、特定の要素だけにCSSを当てることができます。

「最後の要素」のlast-childも擬似要素ですね。

 

↓擬似要素の使い方は、こちらが参考になります。

レスポンシブ対応(上下に配置)

上下に配置する方法は単純で、メディアクエリを使って調整するだけです。

ただ、flex-direction: row-reverse;をつけているので、横並びのままになっているため、そこを修正する必要があります。

 

要素を縦に並べるには、親要素に対して 「flex-direction: column;」を記述すればオッケーです。

See the Pen
MMOMmW
by kei (@kei_01011)
on CodePen.

こんな感じです。

ちょっと見辛いと思うので、右上のcodepenアイコンをクリックして、拡大して確認してみてください。

 

ちなみに、Bootstrapでもこのレイアウトは可能です。Bootstrapを素直に使っておけば楽チンかもしれません。。

【Bootstrap4】ドットインストールを復習して学んだ内容まとめドットインストールのBootstrap4入門を完走してみて、学んだことをまとめてみたいと思います。主に「navbar」と「グリッドシステムの応用」の知識を学習できました。...

 

まとめ:flexboxのレイアウトパターンを知っておく

flexboxは超便利。

これからも使うことはかなり多いはず。

どんなレイアウトパターンが多いのか、ざっと把握しておく必要があります。

 

「flexboxはこんなことができる」とわかっていると、デザインをみた時に何でコーディングをすれば良いかがすぐにわかりそうですね。

 

XDコードから模写できるちづみさんのnoteは、とにかく勉強になりました。

 

もっと勉強しなければ、、

さ、コード書こう。