これからプログラミング学習を始められる方に向けての、web開発、フロントエンド開発をするための、最も優しい基本をまとめました。CSSのfloatをこれから新しく学習したい人に向けた教材です。

マークアップ言語シリーズ: Lesson 3 並列、float

マークアップ言語シリーズ: Lesson 3 並列、floatへようこそ！

HTML要素の並列

floatの基本構文

練習問題1

答え1

floatのデメリット: 回り込み

positionとz-index

練習問題2

答え2

marginの相殺現象

box-sizing: border-box;

まとめ

<aside class="msg alert"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 101 101" role="img" aria-label="alert" class="msg-icon"><circle cx="51" cy="51" r="50" fill="currentColor"></circle><text x="50%" y="50%" text-anchor="middle" fill="#ffffff" font-size="70" font-weight="bold" dominant-baseline="central">!</text></svg><div class="msg-content">
<p>まずは答えを見ずに取り組みましょう。</p>
</div></aside>
<p>うまく完成見本と同じ反映結果が得られたでしょうか？</p>
<p>正解は以下です。</p>
<p><a href="https://github.com/schabibi1/zenn-book-challenges/tree/main/lesson3-challenge2-answer" target="_blank" rel="nofollow noopener noreferrer">答えのソースコード</a></p>


markdown

frontend

Arisa Fukuzaki