忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
ブログなどのカテゴリ一覧にありそうなリスト形式の遷移タブを作成しよう!

見本画像を参考にして実装してください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <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を消すようにしましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET