問題
29一覧画面にあるリスト形式の遷移タブを実装しよう
枠線や余白をうまくコントロールして、期待する画面通りの遷移タブを作成してみましょう。コチラは解答を見る前に解けるとベストです!
HTML/CSSの問題に挑戦しよう！
問題
「一覧画面にあるリスト形式の遷移タブを実装しよう」
ブログなどのカテゴリ一覧にありそうなリスト形式の遷移タブを作成しましょう!
見本画像を参考にして実装してください。
期待する画面
解答と解説（一覧画面にあるリスト形式の遷移タブを実装しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
色々なパターンがあると思いますが、私はul,li を使用して実装しております。
liに対してborderを付与しmargin-bottomで縦の間隔を空けています。
但し、この場合 li の最後もmargin-bottomも適用されるので、li:last-childを使用してmarginを消すようにしましょう。
補足
いくつかの要素をまとめてmarginを適用する際は、最後のひとつはmarginを解除しておきましょう。
そのまま放置してしまうと、デバイスによっては不自然に表示されてしまったり、全体のバランスが崩れてしまうケースがあります。
疑似クラスであるlast-childを用いることで未然に防げますので、以下を参考に再度疑似クラスを復習しておきましょう。
主要疑似クラス
・link:未訪問のリンクに対してスタイル指定ができる。例えば未訪問の場合テキストカラーを緑色にするなど。デフォルトは青色。
・visited:訪問済みのリンクに対してスタイル指定ができる。デフォルトは紫色。
・hover:要素にカーソルを乗せた際のスタイル指定ができる。
・nth-child(n):要素内のn番目あたる要素に対してスタイルを指定できる。
