CSS

CSSスタイルでfloatされる範囲を現役エンジニアが解説【初心者向け】

初心者向けにCSSスタイルでfloatされる範囲について解説しています。要素を横並びに配置する際にはfloatを使用します。floatの基本の書き方、使用時に生ずる可能性のある問題点と対処法について学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

CSSスタイルのfloatプロパティが適用される範囲について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

floatプロパティとは？

floatプロパティとは、画像などに対してテキストを回り込ませたい時に用いられています。

要素を横並びにしたいときにも使えますが、近年はFlexbox（フレックスボックス）と呼ばれる一連のレイアウトプロパティで横並びにするやり方が主流です。

しかし、サイト改修時にfloatプロパティを適用している箇所に手を入れることもあるでしょう。

floatプロパティに出会ったときに備えておく知識として、このプロパティの特性および適用される範囲について学んでおきましょう。

floatプロパティを使う場面

以下のサンプルコードのように、テキストを回り込ませたい時に、画像に対してfloatプロパティを使用します。

See the Pen
2020-01-20-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

また、要素を横並びにする時にもfloatプロパティが使用できます。

以下のサンプルコードでは、画像をfloat: left; という指定で左方向に寄せ、後続の要素を回り込ませることで横並びを実現しています。

5つの画像の幅をすべて20%に指定することで、親要素の幅いっぱいまで横並びにできます。

See the Pen
2020-01-20-sample02 by YOHEI INAI (@yohei_inai)
on CodePen.

[PR] Webデザインで副業する方法とは

floatプロパティ使用時のよくある問題点と対処方法

ここでは誰もが一度はつまずく代表的な課題と、その対処法を解説していきます。

floatの対象になった子要素を含める親要素は、正確に高さを算出できない

float指定をした要素は、浮動・浮遊しているような状態になり、周囲の要素とは異なる流れでブラウザに解釈されます。

そのため、親要素はfloat指定された要素を識別することができず、他のfloat指定されていない要素からのみ高さを算出するようになります。

つまり、親要素の高さはfloat指定された子要素の高さを含みません。

See the Pen
2020-01-20-sample03 by YOHEI INAI (@yohei_inai)
on CodePen.

上記のサンプルコードは高さを揃えるために、float指定された子要素と親要素のそれぞれにheight: 300px;と指定しています。

float指定された子要素と親要素のそれぞれに同じ高さを指定している場合、高さが揃っていますので、背景色も画像と同じ高さに色がついています。

背景色をつけた下記の例もご覧ください。

See the Pen
2020-01-20-sample04 by YOHEI INAI (@yohei_inai)
on CodePen.

下記のサンプルコードでは、親要素の高さ指定height: 300px;をなくしています。

背景色がついている部分が親要素の高さですが、float指定していない子要素のみで高さを算出していることがわかります。

See the Pen
2020-01-20-sample05 by YOHEI INAI (@yohei_inai)
on CodePen.

float指定された子要素も含めた高さを算出させるには

See the Pen
2020-01-20-sample06 by YOHEI INAI (@yohei_inai)
on CodePen.

各要素に高さを指定するのはではなく、clearfix（クリアフィックス）と呼ばれる手法を使用します。

親要素にclearfixの指定をすることで、正確な高さを算出できます。

まとめ

前述の背景色を設定した例にて、floatされる範囲を確認できました。

親要素の高さに、float指定された子要素の高さを含ませるためには、親要素にclearfixの指定をすることで解決できます。

floatされる範囲を正しく知っておくことで、レイアウトが思うようにいかない場合の原因究明に役立ちますので、ぜひ覚えておきましょう。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

CSSで背景画像を複数指定する方法を現役エンジニアが解説【初心者向け】

CSSで背景画像を複数指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...

CSS

CSSで上下中央揃えの仕方を現役エンジニアが紹介【初心者向け】

CSSで上下中央揃えの仕方について解説します。サイト制作において基本的なスキルになるので、ぜひ参考にしてみてください。 CSSについてそもそもよく分からな...

CSS

CSSでbackground-imageが表示されないときの対処法を現役デザイナーが解説【初心者向け】【初心者

CSSでbackground-imageが表示されないときの対処法について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方につ...

CSS

要素を透明にする！CSSのopacityの使い方【初心者向け】現役Webデザイナーが解説

CSSで書くopacityの使い方をテックアカデミーのメンター（プロのWebデザイナー）が初心者向けに実際のコードを使って解説しています。最近、画像上に...

CSS

CSSで画像の縦横比を維持したまま拡大する方法を現役エンジニアが解説【初心者向け】

CSSで画像の縦横比を維持したまま拡大する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

あわせてよく読まれている記事

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次floatプロパティとは？floatプロパティを使う場面floatプロパティ使用時のよくある問題点と対処方法まとめCSSを学習中の方へそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

CSSでfloatの中にfloatを使う方法を現役エンジニアが解説【初心者向け】

CSSでfloatの中にfloatを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 floatの中にfloatを使う方法について詳しく説明していくね！大石ゆかりお願いします！目次使用する場面 floatを使う注意点スタイルが上手くいかない原因と対処法 floatの中にfloatを使ってみよう使用する場面 floatは要素を浮動化させるプロパティです。ちなみにfloatには英語で”浮く”という意味があります。通常のブロックは縦に並びますが、floatを使うことによって、ブロックを右や左に寄せることができます。右に画像、左に文章のようなレイアウトなど、要素を横に並べたいような場合に使用します。 [PR] Webデザインで副業する方法とはfloatを使う注意点 floatしたブロックは浮いている（浮動化している）ため、高さが計算されないという点に注意が必要です。下記の例を参照してみてください。 See the Pen jObVMmB by marihashimoto (@mari877) on CodePen. 上のボックスは水色のボックスに赤色のボックスがおさまるようになっていますが、下のボックスでは、floatした中の要素が水色の親のボックスからはみ出してしまっています。また、floatさせた要素の後続の要素についても、floatさせた要素の高さが無視されてしまうので、下記のように下のボックスが上に食い込んでしまいます。 HTMLの一番下に記述している水色のボックスが黄色いボックスの下敷きになってしまっています。 See the Pen LYpbxzO by marihashimoto (@mari877) on CodePen. このような現象が起こることを踏まえてコーディングしていく必要があります。スタイルが上手くいかない原因と対処法上記のような現象を解消するための方法として、clearfixという方法があります。左右に並べたい要素（floatを適用する要素）をdivタグなどで囲むような構造にします。囲んでいる要素の::after（擬似要素）に下記のようなCSSを適用します。 CSS（clearfix）： floatした要素の親要素のセレクタ::after { content: ''; display: block; clear: both; } 一般的に、clearfixというクラスに上記のCSSを定義しておいて、親要素にclearfixというクラス名をつけて使います。 HTML： <div class="box clearfix"> <div class="child1">float:Left</div> <div class="child2">float:right</div> </div> <div class="box">float:none</div> CSS： div{ box-sizing:border-box; } .box{ padding:30px; margin:20px; background:skyblue; } .child1{ width:50%; padding:30px; float:left; background:yellow; } .child2{ width:50%; padding:30px;

CSS

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次floatプロパティとは？floatプロパティを使う場面floatプロパティ使用時のよくある問題点と対処方法まとめCSSを学習中の方へそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！大石ゆかりお願いします！ ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。要素自身を削除する呼び出した要素自身を削除するときは、removeメソッドを使います。書式削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。サンプルコードクリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。ソースコード // 「このボタンを削除」がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =

JavaScript

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLとCSSを使用して横並びレイアウトの表示をする方法について詳しく説明していくね！大石ゆかりお願いします！活用場面 Webサイトのカラムやグローバルナビゲーションなどのメニューには、横並びのレイアウトが活用されています。Webの黎明期には、テーブルコーディングと呼ばれる手法で、おもにtableタグだけで横並びのレイアウトが実現されていました。しかし、ブラウザの技術がCSS2.1規格に対応してからは、displayとfloatを用いた横並びのレイアウトが確立しました。一般的によく見かけるWebサイトのレイアウトは、CSSのプロパティであるdisplayとfloatを用いた手法で構築できます。 displayの使い方 HTMLのタグは、おもに要素のモデル(型)として「ブロックレベル要素」と「インライン要素」に分かれています。 HTML <div> <p>テキスト0番</p> <p>テキスト1番</p> <p>テキスト2番</p> <p>テキスト3番</p> <p>テキスト4番</p> </div> プレビュー divタグの内部に、pタグが0番から4番までの合計5個あります。これらのタグは、「ブロックレベル要素」です。CSSで装飾を行う場合、ブラウザで縦並びとして表示され、幅と高さや余白などを柔軟に設定できます。一方の「インライン要素」は横並びに表示されるもので、幅と高さや余白などの適応に制限があります。この「ブロックレベル要素」を以下のようにCSSの記述にすると、「インライン要素」として横並びにし、幅と高さや余白などの設定を「ブロックレベル要素」と同様に操作することが可能です。 CSS div p { display: inline-block; } プレビューまた、先ほどの「ブロックレベル要素」のタグを「インライン要素」に変更することもできます。 CSS div p { display: inline; } プレビュー上記の「ブロックレベル要素」のタグを「インライン要素」に変更する、単純に「インライン要素」のタグを記述した場合の表示は同じです。 HTML <div> <span>テキスト0番</span> <span>テキスト1番</span> <span>テキスト2番</span> <span>テキスト3番</span> <span>テキスト4番</span> </div> プレビュー [PR] Webデザインで副業する方法とはfloatの使い方前述のdisplay: inline-blockの手法は、各種の古いブラウザでは表示の結果が異なってしまうため、古いブラウザの表示の結果では、floatで横並びが実現されています。このfloatには、値としてleftもしくはrightを指定することで、「ブロックレベル要素」を指定方向に寄せてから後述の要素を回り込ませることが可能です。 HTML <main> <div class="left-column">左カラム</div> <div class="right-column">右カラム</div> </main> CSS main div { margin: 0; /* 要素の外側の余白を0に定義 */ padding: 0; /* 要素の内側の余白を0に定義 */ } .left-column { float: left;

CSS

横並びにしたい！CSSのfloatの使い方【初心者向け】

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の値を入力すると両方とも解除することができます。 [PR] Webデザインで副業する方法とは実際に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デザインオンラインブートキャンプを開催しています。

CSS

行間を調整する時に便利！CSSのline-heightの使い方【初心者向け】現役エンジニアが解説

CSSで書くline-heightの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次floatプロパティとは？floatプロパティを使う場面floatプロパティ使用時のよくある問題点と対処方法まとめCSSを学習中の方へそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。【動画の解説はこちら】田島悠介今回はline-heightを使ってみよう。大石ゆかり田島メンター！！line-heightは何をするものなんですか〜？田島悠介行の高さを設定するプロパティで、これによって文字列の行間の幅を調整することができるんだ。大石ゆかり文章などのレイアウトで必要になりそうですね。よろしくお願いします！ line-heightとは line-heightは、文章の行の高さを設定できるプロパティです。文章の行間をあけたり、せばめたいときに使用します。 line-heightの書き方 line-heightプロパティは以下のように記述します。 line-height: 値; 値は絶対値で指定する方法、文字サイズを基準に設定する方法、normalで指定する方法の3つがあります。 line-heightで指定される高さは、文字の高さ＋上下の余白です。そのため、文字の上下の余白はline-heightで設定した数値からフォントサイズを引いた数値が均等に配置されます。例えば文字サイズが16pxの文章にline-heightで20pxを指定した場合、20px – 16px = 4pxとなり、上下に各2pxずつ余白が配置されます。絶対値で指定する場合 pxで設定すると1行の高さが、文字サイズに関係なく指定した高さになります。 HTML <p class="font10">line-heightで行の高さを設定してみましょう。</p> <p class="font20">line-heightで行の高さを設定してみましょう。</p> CSS p{ line-height:50px; background:gold; } .font10{ font-size:10px; } .font20{ font-size:20px; } 表示結果行の高さがわかりやすいように背景色をつけています。文字サイズに関わらず、行（<p>）の高さは一律で50pxになっています。文字サイズを基準に指定する場合文字のサイズに合わせて行間を指定する場合は、単位をつけずに数値を書きます。文字のサイズを1として計算しますので、1だと文字の高さ=行の高さになります。 2文字分の行の高さにする場合は、line-heightの値を2にします。 HTMLは絶対値で指定する場合と同様です。 CSS p{ line-height:3; background:gold; } .font10{ font-size:10px; } .font20{ font-size:20px; } 表示結果同じline-height: 3; を適用していますが、文字サイズによって行（<p>）の高さが変わっているのがわかります。上の行は、フォントサイズが10pxなので、 10 x 3 = 30px の高さに、下の行はフォントサイズが20pxなので、 20 x 3 = 60px の高さになっています。％やem、remなどでも、文字のサイズに応じた行の高さを指定することが可能です。一方で、font-sizeを指定している要素とline-heightを指定している要素が異なる場合などでは、意図した表示にならないことがあります。文字のサイズに応じて行の高さを変えたい場合は、単位をつけずに指定するのが良いです。また、line-heightの値として、normalというキーワードを設定した場合は、ブラウザで設定されているデフォルトの行の高さが適用されます。大石ゆかり line-heightの長さには、文字自体も含まれているってことですね。田島悠介値の書き方は、使用する場面によって書き分けると良いんだ。実際の例を見てみよう。大石ゆかり分かりました！ [PR] Webデザインで副業する方法とは実際に書いてみよう文章で行の高さを設定する場合は、文字のサイズに合わせて行間が変わるようにしておくと良いです。逆にボタンなど、デザイン的にどうしても行の高さを固定したいときには、絶対値で指定すると良いでしょう。 HTML <div class="area line-height-1"> <h1>line-height:1;</h1> <p class="font-size-15">此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、たとい此一巻で消えてなくなった所で一向差さし支つかえはない。又実際消えてなくなるかも知れん。</p> <p class="font-size-10">然し将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。</p> <a href="#">続きを読む</a> </div> <div class="area line-height-1-5">

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSスタイルでfloatされる範囲を現役エンジニアが解説【初心者向け】

監修してくれたメンター

ノマリカ

目次

floatプロパティとは？

floatプロパティを使う場面