HTML_CSS
Googleでログイン
問題17：リストをボーダーで区切ろう
会社概要などにある ul と li で構成されたリスト形式の文字列を
ボーダーで区切ってみましょう。
リスト上下のボーダーは1本線、中にあるボーダーは波線で指定しましょう。
見本を参考に作成してください。
ボーダーで区切ってみましょう。
リスト上下のボーダーは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¥
補足
ボーダーの種類はたくさん用意されており、例えば以下のようなものがあります。
・none:ボーダーは表示されない。(デフォルト値)
・solid:1本線で表示される
・double:2本線で表示される
・dashed:破線で表示される
・ridge:隆起した線で表示される
・none:ボーダーは表示されない。(デフォルト値)
・solid:1本線で表示される
・double:2本線で表示される
・dashed:破線で表示される
・ridge:隆起した線で表示される
#忍者CODE無料問題集で活動を記録しよう
完了にする！
1.HTMLの宣言をしてみよう
リストは非常に多くのWebサイトで使用されています。
ul に対してborder-topで線を付与してあげます。
そしてli に対してはborder-bottomに波線を付与します。
li:last-childを使用してliの最後だけ波線ではなく
一本線を付与してあげれば完成です。