ログイン

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

HTML_CSSの問題

HTML_CSS

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

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

問題

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

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

期待する画面

コードのアイコン

解答ソースコード

              <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番目あたる要素に対してスタイルを指定できる。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!