HTML_CSS
Googleでログイン
問題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¥
補足
いくつかの要素をまとめてmarginを適用する際は、最後のひとつはmarginを解除しておきましょう。
そのまま放置してしまうと、デバイスによっては不自然に表示されてしまったり、全体のバランスが崩れてしまうケースがあります。
疑似クラスであるlast-childを用いることで未然に防げますので、以下を参考に再度疑似クラスを復習しておきましょう。
主要疑似クラス
・link:未訪問のリンクに対してスタイル指定ができる。例えば未訪問の場合テキストカラーを緑色にするなど。デフォルトは青色。
・visited:訪問済みのリンクに対してスタイル指定ができる。デフォルトは紫色。
・hover:要素にカーソルを乗せた際のスタイル指定ができる。
・nth-child(n):要素内のn番目あたる要素に対してスタイルを指定できる。
そのまま放置してしまうと、デバイスによっては不自然に表示されてしまったり、全体のバランスが崩れてしまうケースがあります。
疑似クラスであるlast-childを用いることで未然に防げますので、以下を参考に再度疑似クラスを復習しておきましょう。
主要疑似クラス
・link:未訪問のリンクに対してスタイル指定ができる。例えば未訪問の場合テキストカラーを緑色にするなど。デフォルトは青色。
・visited:訪問済みのリンクに対してスタイル指定ができる。デフォルトは紫色。
・hover:要素にカーソルを乗せた際のスタイル指定ができる。
・nth-child(n):要素内のn番目あたる要素に対してスタイルを指定できる。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
liに対してborderを付与しmargin-bottomで縦の間隔を空けています。
但し、この場合 li の最後もmargin-bottomも適用されるので、li:last-childを使用してmarginを消すようにしましょう。