横並びにしたい！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デザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
