一覧画面にあるリスト形式の遷移タブを実装しよう

問題29：一覧画面にあるリスト形式の遷移タブを実装しよう

ブログなどのカテゴリ一覧にありそうなリスト形式の遷移タブを作成しましょう!

見本画像を参考にして実装してください。

期待する画面

解答ソースコード

              <ul>
  <li>カテゴリーA</li>
  <li>カテゴリーB</li>
  <li>カテゴリーC</li>
  <li>カテゴリーD</li>
  <li>カテゴリーE</li>
</ul>
¥HTML¥

              body {
    padding: 24px;
}
ul {
    width: 300px;
}
li {
    border: 1px solid #e7e7e7;
    margin-bottom: 8px;
    padding: 4px;
    font-size: 12px;
    list-style: none;
}
li:last-child {
  margin-bottom: 0;
}
¥CSS¥

解説

色々なパターンがあると思いますが、私はul,li を使用して実装しております。

liに対してborderを付与しmargin-bottomで縦の間隔を空けています。

但し、この場合 li の最後もmargin-bottomも適用されるので、li:last-childを使用してmarginを消すようにしましょう。

ログインして解答を見る

補足

いくつかの要素をまとめてmarginを適用する際は、最後のひとつはmarginを解除しておきましょう。
そのまま放置してしまうと、デバイスによっては不自然に表示されてしまったり、全体のバランスが崩れてしまうケースがあります。
疑似クラスであるlast-childを用いることで未然に防げますので、以下を参考に再度疑似クラスを復習しておきましょう。
主要疑似クラス
・link:未訪問のリンクに対してスタイル指定ができる。例えば未訪問の場合テキストカラーを緑色にするなど。デフォルトは青色。
・visited:訪問済みのリンクに対してスタイル指定ができる。デフォルトは紫色。
・hover:要素にカーソルを乗せた際のスタイル指定ができる。
・nth-child(n):要素内のn番目あたる要素に対してスタイルを指定できる。

#忍者CODE無料問題集で活動を記録しよう

完了にする！

BACK > テーブルのカラムを結合させようへ

NEXT > 疑似要素のbeforeで画像を表示しようへ

コース一覧に戻る

1.HTMLの宣言をしてみよう

続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。