ログイン
問題17

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

コーポレートサイトでよく見かける会社概要などは区切り線を使って分かりやすく表示されています。今回の問題では初級四で使用したドット以外の線を使って区切り線を作っていきましょう。

アイコン画像

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

会社概要などにある 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¥
            

コメントのアイコン解説

この手のデザインは多く見受けられます。
リストは非常に多くのWebサイトで使用されています。

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

li:last-childを使用してliの最後だけ波線ではなく
一本線を付与してあげれば完成です。
ログインして解答を見る

コメントのアイコン補足

ボーダーの種類はたくさん用意されており、例えば以下のようなものがあります。
・none:ボーダーは表示されない。(デフォルト値)
・solid:1本線で表示される
・double:2本線で表示される
・dashed:破線で表示される
・ridge:隆起した線で表示される
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!