横並びにしたい！CSSのfloatの使い方【初心者向け】
初心者向けにCSSで書くfloatの使い方について解説しています。横並びで要素を表示させたいときに便利です。書き方自体はとても簡単なので初心者の方でもすぐ理解できるかと思います。ぜひ自分でも表示を変えてみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSを書く上で、横並びに写真などを表示させたい時に便利なfloat。今回はfloatの使い方について実際に書きながら解説しています。
floatを使うとどういう見た目の変化が起きるのか自分でも書いて試してみてください。
本記事は、TechAcademyのWebデザインオンライン講座のカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
floatとは
floatプロパティを使うと、適用した要素を本来の配置場所から外し左に配置したり右に配置したりすることができます。floatを適用しなかった他のインラインレベル要素、テキストなどはfloatを設定した要素の周囲に回り込みされます。
floatの書き方
floatプロパティは以下のように記述します。
float: 値;
値の部分は以下の中から入力します。
none：要素の配置を指定しません。(初期値)
left：要素を左に寄せます。
right：要素を右に寄せます。
また、inheritを値に入力すると親要素のfloatの値を継承します。
同要素にpositionプロパティで初期値以外(static以外)の値が設定されている場合、floatプロパティを使用することはできません。
ブロックレベルの要素に使用する場合はwidthプロパティで幅をあらかじめ設定しておく必要があります。
floatプロパティを解除したい場合はclearプロパティで同じ値(floatでleftを入力した場合はleft、rightならright)を入力します。また、bothの値を入力すると両方とも解除することができます。
実際にfloatを書いてみよう
値：leftの場合
幅が170px、高さが100pxのボックスの中に画像と文章を配置し、画像にfloatプロパティのleftを設定した場合の例です。
(※cssとhtmlが同じディレクトリ内にあり、cssのファイル名が”sample.css”であるものとします)
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″><img src=”photo1.png” alt=”サンプル画像”>
画像にfloat:leftを適用した場合の例・文章は右に表示され、余った分の文章は画像の下側に回りこむ</p>
</body>
</html>
css
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: left;}
画面ではこのように表示されます。
画像が左に、文章がその右に配置されます。画像の高さより先の文章はその下に回り込んで表示されます。
値：rightの場合
先ほどと全く同じ条件で、今度は画像にfloatプロパティのrightを設定した場合の例です。
(※cssとhtmlが同じディレクトリ内にあり、cssのファイル名が”sample.css”であるものとします)
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″><img src=”photo1.png” alt=”サンプル画像”>
画像にfloat:rightを適用した場合の例・文章は左に表示され、余った分の文章は画像の下側に回りこむ</p>
</body>
</html>
css
p.content1 {background-color: #b0e0e6; width: 170px; height: 100px; }
img {float: right;}
画面ではこのように表示されます。
画像が右に、文章がその左に配置されます。画像の高さより先の文章はその下に回り込んで表示されます。
以上、floatの解説でした。
もっと細かく表示させるとなるとfloat以外にも覚えるCSSが多くなりますが、まずは右寄せ、左寄せができるようになってみましょう。
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
