問題
17
HTML/CSS
リストをボーダーで区切ろう
コーポレートサイトでよく見かける会社概要などは区切り線を使って分かりやすく表示されています。今回の問題では初級四で使用したドット以外の線を使って区切り線を作っていきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「リストをボーダーで区切ろう」
会社概要などにある ul と li で構成されたリスト形式の文字列を
ボーダーで区切ってみましょう。
リスト上下のボーダーは1本線、中にあるボーダーは波線で指定しましょう。
見本を参考に作成してください。
あらかじめエディタに書くコード
<ul>
<li>株式会社忍者CODE</li>
<li>東京都目黒区目黒1丁目1-1</li>
<li>03-xxxx-xxxx</li>
</ul>
¥HTML¥
期待する画面
解答と解説（リストをボーダーで区切ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
この手のデザインは多く見受けられます。
リストは非常に多くのWebサイトで使用されています。
ul に対してborder-topで線を付与してあげます。
そしてli に対してはborder-bottomに波線を付与します。
li:last-childを使用してliの最後だけ波線ではなく
一本線を付与してあげれば完成です。
補足
ボーダーの種類はたくさん用意されており、例えば以下のようなものがあります。
・none:ボーダーは表示されない。(デフォルト値)
・solid:1本線で表示される
・double:2本線で表示される
・dashed:破線で表示される
・ridge:隆起した線で表示される
