更新日 2021.07.30

#5 要素を回り込みさせるfloatフロートプロパティ

要素をレイアウトする際にfloatを使う

ブロックレベル要素を横並びにさせたい時は、#2ででてきたflexが登場するまでこのfloatがメジャーな方法でした。 いまではfloatよりflexを使うほうが好ましいため積極的には使わなくてよいでしょう。

通常のdiv要素は縦に落ちます。

子要素にfloatプロパティを適応させると要素が浮きfloatます。
ボックスAとBに float: left; をかけた場合、ボックスBは浮いた後に左側に行こうとしますが、ボックスAがあるためボックスAの隣(右側)に収まります。
枠内ですべて横並びにしたい場合は、すべての要素に float: left; をかけます。
また中身が浮くと囲っている親要素の高さ情報がなくなりますので、 clearfixクリア フィックス を併用します。


ただのdiv
<div class="wrap8">
  <div>あいう</div>
  <div>えお</div>
</div>

子要素をfloat:left;
<div class="wrap8 clearfix">
  <div class="float-box">かきくけこ</div>
  <div class="float-box">かきくけこ</div>
</div>

子要素をfloat:right;
<div class="wrap8 clearfix">
  <div class="float-box">かきくけこ</div>
  <div class="float-box2">さしすせそ</div>
</div>

親要素にclerfixをかけなかった場合
<div class="wrap8">
  <div class="float-box">たちつてと</div>
  <div class="float-box">たちつてと</div>
</div>
<div>
  <span>下にある要素</span>
</div>

.wrap8{
  width:300px;
}
.wrap8 > div{
  width:100px;
  height:70px;
}
.float-box{
  float:left; /* 左へ */
}
.float-box2{
  float:right; /* 右へ */
}

/* クリアフィックスを指定 */
.clearfix:after{
  content:"";
  display:block;
  clear:both;
}
ただのdivは縦に落ちる
あいう
えお
子要素をfloat:left;
かきくけこ
かきくけこ
(要素が3つの場合)
かきくけこ
かきくけこ
かきくけこ
子要素をfloat:right;
かきくけこ
さしすせそ
clearfixをかけなかった場合...
たちつてと
たちつてと
下にある要素
親要素のラッパーは中の要素が浮いたため、要素がなくなったと勘違いし高さを0にしてしまいます。
下にある要素が上の方にずれ込んでいます。文字要素は隙間をみつけて入っていきます。


.clearfix:afterでは、空の要素を作って親要素の最後に入れ込むことで、コンテナに高さの情報をもたせます。

#6 いろんなcssのセレクタの指定方法

これまではhtmlにクラス名をつけ、クラスセレクタとしてcssに記述してきました。 他にもいろいろ便利な記述方法があるので紹介します。
classセレクタ.test <div class="test">
idセレクタ#test <div id="test">
要素型セレクタdiv p span a などタグそのままの名称
全称セレクタ*
疑似クラスセレクタ:link :hover :first-child :nth-child(n) n番目の
疑似要素セレクタ::before ::after ::first-letter
属性セレクタ[attr] ←attribute(属性)の略です
結合子> (子セレクタ) + (隣接セレクタ) ~ (間接セレクタ)

全称セレクタ *


<div>
  <div>ボックスA</div>
  <p>ボックスB</p>
  <span>ボックスC</span>
  あいうえお
</div>

*{
  color:#f00;
}
ボックスA

ボックスB

ボックスC あいうえお
全要素の文字が赤くなる

疑似クラスセレクタ :hover :link :nth-child(n) :first-child


<div class="wrap11">
  <p><a href="">リンクA</a></p>
  <p><a href="">リンクB</a></p>
  <p><a href="">リンクC</a></p>
  <p><a href="">リンクD</a></p>
</div>

.wrap11 a:hover{ /*マウスオーバーしたとき*/
  color:#F00;
}
.wrap11 p:nth-child(3){  /*3番目の*/
  font-weight:bold;
}
.wrap11 p:nth-child(odd){  /*odd奇数、even偶数*/
  background-color:#0F0;
}

疑似要素セレクタ ::before ::after ::first-letter


<div>
  <div class="giji">ボックスA</div>
  <div class="giji2">ボックスB</div>
  <div><a href="">ボックスC</a></div>
  <p>ボックスD</p>
</div>

.giji::before{
  content:'● ';
}
.giji2::after{
  content:' >>';
}
a:hover::after{
  content:' →';
}
p::first-letter{
  font-size:2em;
}
ボックスA
ボックスB

ボックスD

::before 要素の前に
::after 要素の後に
::first-letter 最初の一文字
content: 要素に文字を自動で挿入する

属性セレクタ [attr]

特定の要素の「属性attributeタグ」に対してスタイルを指定することができます。

<div class="wrap12">
  <p>HOME | MAIN</p>
  <p class="gnavi">HOME | MAIN</p>
  <a href="">リンク先A</a><br>
  <a href="" target="_blank">リンク先B</a>
</div>

/*classにgnaviをつけている要素に対して*/
.wrap12 p[class="gnavi"]{
  color:#f00;
}
/*target属性をつけている要素に対して*/
a[target="_blank"]::after{
  content:' →';
}

HOME | MAIN

HOME | MAIN

リンク先A
リンク先B

結合子 >(子結合子)

直下にあたる階層の要素のみに適応させます。

<div class="wrap13 sample">
  <p>ボックスA</p>
  <p>ボックスB</p>
  <div>
    <p>ボックスZ</p>
  </div>
  <p>ボックスC</p>
  <p>ボックスD</p>
</div>

.wrap13 > p{
  color:#f00;
}

ボックスA

ボックスB

ボックスZ

ボックスC

ボックスD

ボックスZは直下ではないPタグなので適応されない
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます。
勧誘とかしないよー
cbc-study.slack.com