問題

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が届きます

floatとdisplay:flexをうまく活用しましょう!

floatのleftとrightで分けた際に
横幅もしっかりと決めておくとスマートなデザインになります!

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む