
問題12:アイコンやタグを設置しよう
アイコンやタグを設置しよう!
見本を画像を参考に作成してください。
見本を画像を参考に作成してください。
あらかじめエディタに書くコード
<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¥
期待する画面

解答ソースコード
<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>ハットリくん</li>
<li>HTML</li>
</ul>
<ul class="block-icon">
<li>●</li>
<li>▲</li>
<li>■</li>
</ul>
</div>
</div>
¥HTML¥
ul {
list-style: none;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
margin: 16px 0;
}
.block {
border: 1px solid;
width: 640px;
margin: auto;
}
.block-wrap {
overflow: hidden;
padding: 48px;
}
.block-tag {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
float: left;
width: 70%;
}
.block-tag li {
background-color: cornflowerblue;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
margin: 0 8px 8px 0;
}
.block-icon {
display: flex;
justify-content: flex-end;
float: right;
width: 30%;
}
.block-icon li {
font-size: 30px;
margin-right: 12px;
}
.block-icon li:last-child {
margin-right: 0;
}
¥CSS¥
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
floatのleftとrightで分けた際に
横幅もしっかりと決めておくとスマートなデザインになります!