ログイン
問題29

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

枠線や余白をうまくコントロールして、期待する画面通りの遷移タブを作成してみましょう。コチラは解答を見る前に解けるとベストです!

アイコン画像

問題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番目あたる要素に対してスタイルを指定できる。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる