これからプログラミング学習を始められる方に向けての、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>
<aside class="msg message"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 101 101" role="img" aria-label="message" 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>上達のコツ:<br>
下記埋め込みコードの「Edit in JSFiddle」をクリックすると、webページで編集ができます。<br>
floatの仕組みを踏まえて、少しコードに手を加えて、アレンジをしてみるのも練習になります。</p>
</div></aside>
<div class="embed-jsfiddle"><iframe src="https://jsfiddle.net/arisa_dev/52pwvsLr/1/embedded/" scrolling="no" frameborder="no" allowfullscreen allowtransparency="true" loading="lazy"></iframe></div>


markdown

frontend

Arisa Fukuzaki