忍者CODE

ログイン

17
リストをボーダーで区切ろう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
会社概要などにあるul・liで構成されたリスト形式の文字列を
ボーダーで区切ってみましょう

リスト上下のボーダーは1本線で中にあるボーダーは波線を指定しましょう
見本を参考に作成していきましょう
自分の環境に書くコード
            <ul>
    <li>株式会社忍者CODE</li>
    <li>東京都目黒区目黒1丁目1-1</li>
    <li>03-xxxx-xxxx</li>
</ul>
¥HTML¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <ul>
  <li>株式会社忍者CODE</li>
  <li>東京都目黒区目黒1丁目1-1</li>
  <li>03-xxxx-xxxx</li>
</ul>
¥HTML¥
          
            ul {
    list-style: none;
    border-top: 1px solid;
    display: inline-block;
    padding: 0;
}
li {
    border-bottom: 1px dotted;
    padding: 8px 0;
}
li:last-child {
    border-bottom: 1px solid;
}
¥CSS¥
          
答えのアイコン

解説

この手のデザインは多く見受けられますね。

ulに対してborder-topで線を付与してあげます。
そしてliに対してはborder-bottomに波線を付与

li:last-childを使用してliの最後だけ波線ではなく
一本線を付与してあげれば完成です。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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