問題
12
HTML_CSS
アイコンやタグを設置しよう
HTML_CSSの問題に挑戦しよう!
問題
「アイコンやタグを設置しよう」
アイコンやタグを設置しよう!
見本を画像を参考に作成してください。
あらかじめエディタに書くコード
<div class="block">
<h1>タグとアイコンを左右に設置しよう</h1>
<div class="block-wrap">
<ul class="block-tag">
<li>忍者</li>
<li>忍者CODE</li>
<li>甲賀村</li>
<li>伊賀村</li>
<li>服部半蔵</li>
<li>HTML</li>
<li>ハットリくん</li>
</ul>
<ul class="block-icon">
<li>●</li>
<li>▲</li>
<li>■</li>
</ul>
</div>
</div>
¥HTML¥
ul {
list-style: none;
padding: 0;
margin: 0;
}
.block {
border: 1px solid;
width: 640px;
margin: auto;
}
h1 {
text-align: center;
margin: 16px 0;
}
¥CSS¥
期待する画面

解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
floatとdisplay:flexをうまく活用しましょう!
floatのleftとrightで分けた際に
横幅もしっかりと決めておくとスマートなデザインになります!