【21】floatプロパティと clearプロパティ。そして Clearfixについて

今回は、floatプロパティclearプロパティについて。

floatプロパティは、要素を右か左に動かして、そのあとに続く他の要素を反対側に回り込ませることができます。
float は一度指定すると、その後に書いた要素にず〜っと影響し続けるんですが、その影響を終わらせるのが clearプロパティ。フロートをクリアするためのプロパティです。

float はけっこうクセがあるので、それを知らないまま使うとけっこう面倒なことになります(笑)
今回はそこらへんを順を追って説明していきます。
そして、float を使うなら Clearfix も知ってると絶対便利なので、それについても解説します。

本日のINDEX
  1. floatプロパティの値
  2. floatプロパティの特徴(けっこうクセがある)
    1. floatを指定すると親要素に対して「浮く」
    2. floatは「後に続く要素」に影響を与える
    3. インライン要素の場合、あえて後に書く利用法もあるけどね
    4. float指定された要素は 親の範囲内で浮動する
    5. floatさせるなら幅(width)を指定する
    6. floatを指定すると ず〜っと影響し続ける
  3. clearプロパティの値
  4. float指定を終わらせる clearプロパティ
    1. 親要素の高さ表示が変なのをなんとかする方法
  5. 擬似要素 ::after を利用した Clearfix を使おう
  6. 回り込んだテキストが中途半端な時に overflowで解決
  7. clear以外でも floatを終わらせるプロパティがあります
    1. overflowプロパティ(overflow:auto または overflow:hidden)
    2. まだドラフトだけど「display: flow-root」というのが登場しています
  8. floatじゃなくても横並びにできるCSSがあります

参考:
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work
9 Visual formatting model
←これが W3Cの勧告の今のところの最新版みたいです。

floatプロパティの値

float(フロート)の日本語訳は 浮動ふどう。浮かせて動かすってイメージかな。
floatプロパティの値はシンプルで、実際に使うのは 左( left )か 右( right )だけ。

none これがデフォルト値。フロートなしです。
left 要素はに浮動し、そのあとの要素はこの要素の右側に回り込みます。
right 要素はに浮動し、そのあとの要素はこの要素の左側に回り込みます。
値の継承 なし 適用できる要素 全要素。
ただし display: none な要素には無効。

floatプロパティの特徴(けっこうクセがある)

floatは <img>要素などの横にテキストを回り込ませるのが元々の使い方ですが、ブロックレベルの要素横並び にできるのでレイアウトにもよく利用されます。
ブロックレベルは普通は縦にしか並ばないけど、floatを利用すれば横に並ばせられるので。
(ただし、フロートじゃなくても「横並び」にできる指定は他にもあります。詳しくは記事の後半で

ですが、float の特徴をあんまり把握しないで使うと、レイアウトが崩れちゃったという事態に...。
というわけで、その特徴を 順を追って見ていきましょう。

floatを指定すると親要素に対して「浮く」

まずはこのサンプルから。<img>要素に float: left を指定しています。

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

<div class="sample">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>
div.sample {
	margin:0;
    padding:10px;
    border:solid 1px #ccc}  /*←親要素に囲み罫を付けています*/
div.sample img {  /*←これが浮き輪の画像*/
	margin:0 10px 0 0;
    float:left}
div.sample p {
	margin:0;
    color:#4e968e}

margin:0 10px 0 0(6行目)はショートハンドです。右マージンが10px、他は0という指定です。
マージンのショートハンドについては【11-1】marginと marginのショートハンド をご覧ください。

次に、テキストの量をグッと減らしてみました。あれ? 親要素の囲み罫が中に入ってきちゃった。

This property specifies whether a box should float

テキストを <p>要素ごと全部削除したらコレ。

親要素に「padding: 10px」を指定しているので、そのぶんのスペースは空いてますが、フロートさせた <img>要素の高さは無視されちゃいましたね。

これは、フロート指定された要素は 親要素にとって 幅や高さが無くなって 何もない状態と同じに扱われるから。文字通り 親から浮くと覚えておくとイイかも。

ですので 親要素の padding-bottom や border-bottom が 上の方に詰められちゃったんですね。

これをどうにかするには、親にある手続きをしなければなりません。
それは後半で詳しく♪ 説明の都合上、しばらくこの気持ち悪い状態のサンプルが続きます ↓

floatは「後に続く要素」に影響を与える

次の特徴はコレ。
float後に続く要素に影響を与えるので、先に書かないと意味無いです。

float指定した <img>要素を <p>要素のあとに書くとこう↓ 
テキストが横に並ばず、float指定された要素は下に押し出されてしまいます。

float指定した要素を後に書いた場合。This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

<div class="sample">
  <p>テキストを先に</p>
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftを指定している要素-->
</div>

float: right でも同じ。右へ浮動するので後に書きたくなりますが、この場合も floatさせたい要素を先に書かないと、下のサンプルのようになります。

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

<div class="sample">
  <p>テキスト</p>
  <img src="sample2.jpg" width="130" height="100" class="img_fright"> 
</div>

<style>
div.sample {margin:0; padding:10px; border:solid 1px #ccc}
div.sample img.img_fright {margin:0 0 0 10px; float:right}  /*←このimg要素の指定*/
div.sample p {margin:0}
</style>

float を指定した要素を先に書けばこのようになります。ホッとしますね(笑)

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

<div class="sample">
  <img src="sample2.jpg" width="130" height="100" class="img_fright"> <!-- ←float:rightを指定している要素-->
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftを指定している要素-->
  <p>テキストを後に</p>
</div>

「float: rightを指定している要素」「float: leftを指定している要素」は どっちが先でも後でも同じ。

インライン要素の場合、あえて後に書く利用法もあるけどね

インラインの <span>要素 float: right を指定して、段落内の一番最後に置くと、段落の最後のひと言だけ右寄せにしたいとき便利です。(「続きを読む...」とか)
インライン要素も、後続のコンテンツがないと 浮動だけして下に押し出されるんですね。

普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。ここだけ右寄せ

<div class="clearfix">
  <p>
  普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。...(略)
  <span style="float:right; color:red">ここだけ右寄せ</span>  <!--いちばん最後に-->
  </p>
</div>

★ただ、この場合も floatを一旦ここで終わらせる指定をしないと、その後のレイアウトが崩れます。
(上のサンプルソースでは、1行目に「clearfix」というクラスを指定しています。floatをクリアする指定です)
clearプロパティを使うんですが、その話は記事の後半でやります。

インラインの場合は、float指定した要素を 先頭に書いても、真ん中あたりで書いても、本来表示されるべき行の中で右か左に浮動し、後続のコンテンツが反対側に押しやられます。

ここだけ右寄せ普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。

普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。ここだけ右寄せ普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。

<div class="clearfix">
  <p>
  <span style="float:right; color:red">ここだけ右寄せ</span> <!--先頭に-->
  普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。...(略)
  </p>
</div>

<div class="clearfix">
  <p>
  普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。
<span style="float:right; color:red">ここだけ右寄せ</span> <!--真ん中あたりに-->
  普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。普通は左寄せ。
  </p>
</div>

float指定された要素は 親の範囲内で浮動する

浮動する範囲は親要素の中の端っこか、他のfloatさせた要素に当たるまでです。

下のサンプルは、画像は2つとも float: left です。
最初の浮き輪の画像は、親要素の左端まで浮動しています(親には padding: 10px 指定しています)
2つめの気球の画像は、最初の浮き輪の画像に当たるまで浮動しています(<img>要素の右マージンは10px)

★ずっと親要素の囲み罫が変なままですが、後で解決させますので気にしないでください(笑)

親の幅がいっぱいになったら自動的に下に押し出されます
下のサンプルで、親の幅に収まらなくなったら下に折り返して並ぶのがわかりますね。

1
2
3
4
5
6
7

このサンプルのボックスは全て float: right にしています。
float: right の並び方は右から順番なのもわかりますね。

<div class="sample">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
</div>

<style>
div.sample {margin:0; padding:10px; border:solid 1px #ccc}
div.sample > div {
   float:right;
   margin:0 0 10px 10px;  /*←下と左のマージンが10px*/
   background:#9C9;
   text-align:center;
   padding:1em;
   width:3em;
   font-size:large}
</style>

floatさせるなら幅(width)を指定する

次は、<img>要素の float: left に加えて、<p>要素にも float: left を指定してみます。
すると、<p>要素が <img>要素の横に並ばずに 下に送られてしまいました。

p要素もfloat:leftにする。This property specifies whether a box should float to ...

これは、<p>要素に幅(width)の指定が無いから

<img>要素は、最初から画像にサイズがあるので、要素の width属性・height属性や、CSSでサイズ指定をしてますよね。
<p>要素などの幅が決まってない要素だと、こっちでちゃんと幅を決めてあげないと、ブラウザは width: auto にするので親要素の中いっぱいの幅になります。
フロートしているので親から幅や高さを認識されず、そして「親の幅いっぱいの幅」になったため、ブラウザ的には、先にフロートしている要素の横に並ばせられず、その下に送るしかないんですね。

というわけで、floatさせるなら幅(width)を指定すると覚えておこう。
<span>要素とかで中のテキストが短い場合は、幅はその文字数分だから あえて幅指定は不要だけど。
そのほかの場合で floatがうまくいかない時「あ、幅の指定してないや」と気がつくことが肝要

<p>要素に幅指定すると また横に並びました。
(両方とも浮動しているので、相変わらず親の囲み罫がヘンですけどねw もう少し我慢しててください)

p要素もfloat:leftにして、幅を指定。This property specifies whether a box should float to ...

<div class="sample">
  <img src="sample.jpg" width="130" height="100" class="img_fright">
  <p style="float:left; width:130px">テキスト</p>
</div>

<style>
div.sample {margin:0; padding:10px; border:solid 1px #ccc}
div.sample img {margin:0 10px 0 0; float:left}
div.sample p {margin:0}
</style>

ちなみに、レスポンシブサイトでは、幅をピクセルではなく%で指定する場合が多いので、2つのフロートさせた子要素の幅を 70% と 30% で指定したサンプルも作ってみました。

この場合、子要素に paddingも指定しているので、同時に box-sizing の指定も忘れずに。
padding や border を使ったら、box-sizing指定が無いと幅50%だとはみ出すから。
box-sizing については【10】ボックスモデル(margin, padding, border を使いこなそう)をご覧ください。

left
right
<div class="sample">
 <div class="smpleft">left</div>
 <div class="smpright">right</div>
</div>

<style>
.smpleft, .smpright {
	-webkit-box-sizing: border-box;/*box-sizing*/
    box-sizing: border-box;
	margin:0;
	background:#FC9;
	text-align:center;
	padding:1em;
	font-size:large}
.smpleft {
	width:70%;
	background:#9C9;
	float:left}
.smpright {
	width:30%;
	float:right}
</style>

floatを指定すると ず〜っと影響し続ける

今度は 親要素の下に 別の要素を置いてみます。「フロートした子要素を囲む要素の下」です。
ここでは<h3>要素を置いてみました。

<div class="sample">
  <img src="sample.jpg" width="130" height="100"> <!-- floatしています-->
  <p>テキスト</p>
</div>

<h3>h3要素でタイトルを親要素の下に</h3>  <!-- ←親要素の下に入れています-->

すると、<h3>要素までもが <img>要素の横に回り込んじゃいます。なにこれ?

p要素はfloatなし。This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to ...

h3要素でタイトルを親要素の下に


これは、float後に続く要素に対して右か左に浮動する指令だから。
親要素の外だろうが何だろうが 後続の要素に対してず〜っと影響し続けます

floatは 自分で始めた仕事を 自分で終わらせられない 仕様なんです。
代わりにそれを担当するのが clearプロパティです。

clearプロパティの値

やっと clearプロパティの出番です。これは floatの指定をクリアする役割 です。

まずは clearプロパティの値を見てみましょう。
「左」「右」「両方」の値があるのですが、はっきり言って「両方( clear: both )」しか使わないかも。両方いっぺんにクリアできるからね。

none これがデフォルト値。クリアなし。
left 前にある要素の左フロートの影響から要素を切り離し、下に押し出します。
right 前にある要素の右フロートの影響から要素を切り離し、下に押し出します。
both 左右両方のフロートの影響から要素を切り離し、下に押し出します。
値の継承 なし 適用できる要素 ブロックレベル要素

注意点は、clearプロパティはブロックレベル要素にしか適用されないこと。
floatは「全要素」が対象でしたが、clearは「ブロックレベルだけ」と覚えておこう(これが clearfix のときに大事になってきます)
あと、当たり前だけど float指定されてない要素に使用します。

W3Cの clearプロパティの解説は、こうなっています。
Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

どうやら clearプロパティを指定された要素は、その上にバリアのようなものクリアランスと言ってますね)を作るようです。
その要素に margin-top があれば、その上にバリアを作るので、その上の隣接する要素(floatの影響を受けている要素)との マージンの相殺(margin collapsing)も起こらせない。
で、clear指定した要素を floatの影響から切り離して、下に押し出すということみたい。

float指定を終わらせる clearプロパティ

とにかく使ってみましょう。影響を受けたくない要素に clearプロパティを指定します。
先ほどのサンプルの <h3>要素に clear: left を指定。
<h3>要素はフロートから切り離されましたね。上マージン詰まってるけど、位置的にはイイよね。

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to ...

h3要素でタイトル

<div class="sample">
  <img src="sample.jpg" width="130" height="100"> <!-- floatしています-->
  <p>テキスト</p>
</div>

<h3 style="clear:left">h3要素でタイトルを親要素の下に</h3>  <!-- clear: leftを指定-->

でも、フロートさせた要素がある親要素の囲み罫は変なままです。
これを、もうそろそろ どうにかしたいですね。

親要素の高さ表示が変なのをなんとかする方法

解決方法はこちら。
親の<div>内の最後に <div style="clear: left"></div> と入れます。
空の<div>要素に clear指定するんです。
(ブロックレベルなら <div>じゃなくてもOK。<span>に display: block って指定したやつでも)
<h3>要素の clear 指定はもう不要なので取ります

<div class="sample">
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftにした要素-->
  <p>テキスト</p>
  <div style="clear:left; margin:0; padding:0"></div>
</div>
<h3>h3要素でタイトル</h3>

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to ...

h3要素でタイトル

親要素の囲み罫も、やっとまともな状態になりました。

これってこんな ↓ 理屈です。

親要素の最後の締めの位置に clear指定した要素がある状態を作ったので、親要素は、たとえフロートした要素の高さを認識できなくても、下のpadding や border を描くべき位置がわかるようになったんです。

擬似要素 ::after を利用した Clearfix を使おう

上の仕組みをもっとシンプルにしたのが Clearfix(クリアフィックス)と言われるもの。
これを知っているとメッチャ便利です。
これは 擬似要素「::after」を利用します。

擬似要素「::before」「::after」は、指定した要素の内側インライン要素としてコンテンツを生成します。

★擬似要素については、【3】id とか classって何?(セレクタの「種類」を知っておこう)でざっくりメモっています。
(コレ、たいして詳しくないよね。疑似要素や擬似クラスについては、いずれ ちゃんとまとめます)

さてこの 擬似要素「::after」を、先ほど「親要素の最後に空の<div>を入れて、clearを指定する」というのをやりましたが、あれと同じ構造にして使うのが clearfix
そうすれば、わざわざ親要素の最後に <div> 〜 </div>とか書く手間が無くなって時短になるからね。

で、できたのがコレ。これが Clearfix(クリアフィックス)と呼ばれるコード。
昔はオールドIE対策(IE6 とか 7とか用)のために長いコードだったけど、今はこんなに短くてOK。
( clearfix は下記のものだけじゃなく、いろいろな書き方があります。私が使ってるのは今のところコレってこと)

.clearfix::after {
	content:'';
    display:table;
    clear:both}

クラス名は「clearfix」にしていますが、好きな名前でOK。短く「cf」とかでも(1行目)

で、2行目は、疑似要素だけに使える contentプロパティの値を空っぽにしています。
( クォーテーションマーク(')で囲んだ中に半角スペースを入れたりせずに、何も無しにします)

3行目で、 displayプロパティを使ってブロックレベルにしています。
clearはブロックレベルにしか使えないけど、擬似要素はインラインなので 、こうしてブロックレベルにする必要があるんです。

display: table は display: block にしてもOK。
display: table なら、table内に中身(セル)が何にも無かったら、tableはぺったんこで何も表示しない特徴を利用します。
display: block でも同じ。「content:''」で中身無しにしてるので、高さがなくてぺったんこです。

そして、肝心の clear: both を指定(4行目)。
clear: both は、左右両方クリアしてくれるので、1つで万能だからね。

クリアフィックスは こんなふうに、親要素にクラスを指定して使います。
これで、この <div> の内側の最後の締めの位置( </div>の直前)に「clear指定された、高さがないブロックレベルの疑似要素」が生成されるってわけ。素敵。

<div class="sample clearfix">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>

クラスは、上のサンプルソースのように「半角スペース」で区切れば複数同時に何個でも指定できます。id は1個だけだけどね。

親要素にクリアフィックスを指定した結果です。親の囲み罫がマトモになってますね。

親要素にクリアフィックス。This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to ...

<div class="sample clearfix">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>
div.sample {  /*←囲み罫の付いた親要素*/
	margin:0;
    padding:10px;
    border:solid 1px #ccc}
div.sample img {  /*←浮き輪の画像*/
	margin:0 10px 0 0;
    float:left}
div.sample p {  /*←テキストのp要素*/
	margin:0;
    color:#4e968e}
.clearfix::after {  /*←クリアフィックス*/
	content:'';
    display:table;  /*← display:blockでもOK*/
    clear:both}

floatプロパティを使うときの鉄則は、
親要素で囲み、親要素の中でfloatを完結させること。
それには clearfix(クリアフィックス)を使うと時短だし便利です。

floatclear については以上です。
ここから先は、知ってて便利なネタ話です。

回り込んだテキストが中途半端な時に overflowで解決

前回の overflowプロパティでも紹介しましたが、
この↓ように、テキストが画像の下に中途半端に回り込むときに。

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

回り込ませるテキストの方に overflow:hidden または overflow:auto を指定すると、半端な回り込みをやめさせることができます。

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

<div class="sample clearfix">
  <img src="sample.jpg" width="130" height="100">
  <p>テキスト</p>
</div>
div.sample {  /*←囲み罫の付いた親要素*/
	margin:0;
    padding:10px;
    border:solid 1px #ccc}
div.sample img {  /*←これが浮き輪の画像*/
	margin:0 10px 0 0;
    float:left}
div.sample p {
	margin:0;
    overflow:hidden;  /*←overflow:auto でも同じです*/
    color:#4e968e}
.clearfix::after {
	content:'';
    display:table;
    clear:both}

これ、原理はよくわからん(笑)(クリッピングするんだと思うけど)
ただ、昔から使ってきた、ほんの数文字が画像の下に回って気持ち悪い時に使う裏ワザです。
overflow: hidden だと印刷時に切れたり、overflow: auto だと思わぬところにスクロールバーが出たりするかもなので、使うときはよく確かめてからでどうぞ。

clear以外でも floatを終わらせるプロパティがあります

「float といえば clear」とセットで覚えててイイんですが、clear以外でも floatを終わらせるプロパティがあります。

overflowプロパティ(overflow:auto または overflow:hidden)

floatさせた要素の親要素に、overflow:auto または overflow:hidden を指定すると、その親要素内でfloatの影響が終わります。

親要素に「overflow:hidden」を指定。This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to ...

<div class="sample" style="overflow:hidden">  <!--←autoでも同じです-->
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftにした要素-->
  <p>テキスト</p>
</div>

ただし、overflow:hidden を使うと印刷時に肝心なコンテンツが切られることがあるそうです。
また、overflow:auto だと、画像などのコンテンツが親より大きくなった幅の場合「スクロールバー」が出ちゃうので対策が必要。
ですので、やはり float のクリアはclearプロパティに任せたほうがイイと思う。

まだドラフトだけど「display: flow-root」というのが登場しています

W3Cのドラフト(草案)で、displayプロパティの新しい値 flow-root が登場しています。

参考:CSS Display Module Level 3 -- W3C Working Draft, 3 May 2017 | 2.2. Inner Display Layout Models

W3Cの flow-rootの解説は、こうなっています。
The element generates a block container box, and lays out its contents using flow layout.
It always establishes a new block formatting context for its contents.

display: flow-root を指定した要素は、常に新しいブロックフォーマットのコンテキストを確立する とあります。

これを親要素に指定すると、中の要素に floatを指定していても親要素内で完結させられる(clearfix を使った時と同じになる)ということみたい。
とにかく試してみます。まだドラフトですが、Chrome 58、Firefox 53 はすでに対応していました。

親要素に「display:flow-root」を指定。This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to ...

<div class="sample" style="display:flow-root">
  <img src="sample.jpg" width="130" height="100">  <!-- ←float:leftにした要素-->
  <p>テキスト</p>
</div>

これは簡単でイイですね。勧告されて普通に使えるようになったら Clearfix は不要になるね。

floatじゃなくても横並びにできるCSSがあります

さて、さんざん float について説明してきてアレなんですが、
最後に floatじゃなくても横並びにできる指定についても触れておきます。

ブロックレベルの要素は縦に並ぶのがデフォルト。これを横に並べたい時、以前は floatプロパティしか無かったんだけど、今は displayプロパティで、使えるものが増えました。
display: table、display: inline-block、display: flexなどが ブロックレベルを横に並べられます。

ページのレイアウトで使う時は、floatより displayプロパティのほうが使いやすい気がします。
float はクリアしなきゃだし、いろいろ細かいルールがあるので面倒くさいから。

それぞれの詳細については、下記リンクをご覧ください。
display: inline-blockについては【17-1】displayプロパティでボックスの表示形式を自由に変えよう
display: tableについては【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
display: flexについては【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)

display: flex は、各ブラウザがまだ部分的に未対応な仕様もあって使いにくいけど、
display: inline-blockdisplay: table はもう充分使えるんじゃないかな。

ただし、float は大昔からある仕様なので、すっごい古いブラウザでも対応しているのが今のところの最大のメリット。オールドブラウザも対象にするなら float のほうがイイです。

次回予告

今回は floatclear を一度にやって盛りだくさんでしたね。

さて次回は、ちょっとメモで「Web開発ツール」について。
ブラウザ上で、よそのサイトや自分のサイトの CSSがどう効いているかを調べられる機能です。
これを知っていると格段に CSSの勉強が進むと思います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.