【随時更新】簡単そうに見えて難しいデザイン問題集

cssテクニック

はい!こんにちは~。どMコーダーのゆーへーです(/ω\)

先日から、どSデザインがぽんぽん上がってくるもんで、なんとかCSSだけで作ってやるぜ!
と意気込んでます。

この記事は、そんなデザインをまとめて問題にしよう!という記事です。
答えはあとで書きます(/ω\)

スライダーにあるボタンを任意の場所に表示させたい

Slickなどをつかうと、フルサイズの場合ボタンが左右に表示されます。
JSで動的に表示させているので、HTMLはさわれません。

サンプルコード

<div>
<button class="left">
<div class="slider_list">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<button class="right">
</div>

問題:button.left,button,rightを下記の図(下の方)のようにするにはどうすれば良いでしょうか?

2行と1行の見出しがあるリスト

なかなかの難問です。
ヒント:疑似クラスは使いません。

幅が決まっており、センター揃え、しかし背景が違う。

ヒント:疑似クラスとポジションを使います。

幅が決まってて、偶数でデザインが反転する

ヒント:Flexとポジションを使います。

さいごに

出来ました?随時更新していこうと思います!

気に入った記事であれば、ぽちっとお願いします<(_ _)>