#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セレクタ. <div class="">
idセレクタ# <div id="">
要素型セレクタdiv p span a などタグそのままの名称
全称セレクタ*
疑似クラスセレクタ:link :hover :first-child :nth-child(n) n番目の
疑似要素セレクタ::before ::after ::first-letter
属性セレクタ[attr] ←attribute(属性)の略です
結合子> (子セレクタ) + (隣接セレクタ) ~ (間接セレクタ)

全称セレクタ *


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

*{
  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タグなので適応されない

nth-childと::before/::afterの詳しい解説

▼ 擬似クラス nth-childについて

入門2 #6で擬似クラスセレクタで軽く紹介しましたが、ここでもう少し詳しく説明します。
このnth系の指示を使うと、指定したセレクタに当てはまる要素で、n番目の要素にだけ指示を出す事ができます。
例えば以下のようなHTMLとCSSがあったとします。

<div class="box_A">
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
  </ul>
</div>

.box_A ul li:nth-child(3){
  background-color: #000;
}
上の例では、CSSで.box_Aの中のulの中のli要素という条件を指定し、その中で3番目の要素にだけ、指示をだすという意味です。

nth系の種類

:first-childファーストチャイルド指定したセレクタの最初の要素だけに指示を出す
:last-childラストチャイルド指定したセレクタの最後の要素だけに指示を出す
:nth-child(n)エヌス チャイルド指定したセレクタの最初から数えてn番目の要素に指示を出す
:nth-last-child(n)エヌス ラスト チャイルド指定したセレクタの最後から数えてn番目の要素に指示を出す
:not()ノット指定した要素以外に指示を出す

n番目の書き方の例

(2)2番目の要素だけに指示を出す
(3n)3の倍数の要素に指示を出す
(n+5)5番目以降の要素に指示を出す
(-n+5)5番目までの要素に指示を出す
oddオッド奇数番目の要素に指示を出す
evenイーブン偶数番目の要素に指示を出す

nを使った時の計算

nth-childを使ったときに、なぜこの要素に指示が適用されるのかよく分からないと言った質問を多く受けます。
実は非常に簡単で、nに0,1,2と1つずつ数字を代入していくと分かります。

例:nth-child(n+5) → 5番目以降の要素に適用される
  1. n=0のとき:0+5 = 5で、5番目の要素に適用される
  2. n=1のとき:1+5 = 6で、6番目の要素に適用される
  3. n=2のとき:2+5 = 7で、7番目の要素に適用される
  4. n=3のとき:3+5 = 8で、8番目の要素に適用される
  5. n=4のとき:4+5 = 9で、9番目の要素に適用される
例:nth-child(-n+5) → 1~5番目までの要素に適用される
  1. n=0のとき:-0+5 = 5で、5番目の要素に適用される
  2. n=1のとき:-1+5 = 4で、4番目の要素に適用される
  3. n=2のとき:-2+5 = 3で、3番目の要素に適用される
  4. n=3のとき:-3+5 = 2で、2番目の要素に適用される
  5. n=4のとき:-4+5 = 1で、1番目の要素に適用される
例:nth-child(5n) → 5の倍数の要素に適用される
  1. n=0のとき:5x0 = 0で、0番目の要素に適用される(0番目は存在しないから無視される)
  2. n=1のとき:5x1 = 5で、5番目の要素に適用される
  3. n=2のとき:5x2 = 10で、10番目の要素に適用される
  4. n=3のとき:5x3 = 15で、15番目の要素に適用される
  5. n=4のとき:5x4 = 20で、20番目の要素に適用される

▼ 擬似要素 ::before/::afterについて

::before/::afterを使うと、指定した要素の前後に新しく要素を作ることができます。
擬似要素は全てCSSで記述するため、HTMLファイルに直接書かない = 実体がないので擬似要素と呼ばれています。
擬似要素は装飾で使われることが非常に多いです。

::before/::afterを使う時の注意点

  1. contentプロパティをつける(最重要、これがないと表示されません)
  2. 最初はインライン要素として扱われる(幅と高さを指定するときはブロックレベルにする)

::before/::afterでよくある装飾

アイコンをつける

男性です(::before要素)
女性です(::after要素)

.men,
.woman{
  display: flex;
  align-items: center;
}

.men::before{

  /* 擬似要素を使う時は必ず必要(決まり文句) */
  content: '';

  /* 横幅指定 */
  width: 20px;

  /* 高さ指定 */
  height: 20px;

  /* 背景画像としてアイコンを指定 */
  background-image: url(images/men.svg);
}

.woman::after{
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  background: url(images/woman.png) center/cover no-repeat;
}
男性です(::before要素)
女性です(::after要素)
矢印をつける

  • リスト1
  • リスト2
  • リスト3
  • リスト4

.list > li{
  position: relative;
  border-bottom: 1px solid #222;
}
.list > li:first-child{
  border-top: 1px solid #222;
}
.list > li::before{
  /** ブロックレベル要素に変更 **/
  display: block;

  /** 決まり文句 **/
  content: '';

  /** 自由位置指定 **/
  position: absolute;

  /** 上から配置する位置 **/
  top: calc(50% - 2px);

  /** 右から配置する位置 **/
  right: 10px;

  /** 矢印の大きさ **/
  width: 4px;

  /** 矢印の大きさ **/
  height: 4px;

  /** 矢印の線の太さ **/
  border-top: 2px solid #7a0;

  /** 矢印の線の太さ **/
  border-right: 2px solid #7a0;

  /** 要素を回転 **/
  transform: rotate(45deg);
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで