CRI BOOT CAMP
作成日：2021/04/12 更新日：2022/03/09
#5 要素を回り込みさせるfloatプロパティ
要素をレイアウトする際にfloatを使う
ブロックレベル要素を横並びにさせたい時は、#2ででてきたflexが登場するまでこのfloatがメジャーな方法でした。 いまではfloatよりflexを使うほうが好ましいため積極的には使わなくてよいでしょう。職業的にWebサイトを作成しない場合、floatは飛ばしていただいても大丈夫です。
通常のdiv要素は縦に落ちます。
子要素にfloatプロパティを適応させると要素が浮きます。
ボックスAとBに float: left; をかけた場合、ボックスBは浮いた後に左側に行こうとしますが、ボックスAがあるためボックスAの隣(右側)に収まります。
枠内ですべて横並びにしたい場合は、すべての要素に float: left; をかけます。
.clearfix:afterでは、空の要素を作って親要素の最後に入れ込むことで、コンテナに高さの情報をもたせます。
子要素にfloatプロパティを適応させると要素が浮きます。
ボックスAとBに float: left; をかけた場合、ボックスBは浮いた後に左側に行こうとしますが、ボックスAがあるためボックスAの隣(右側)に収まります。
枠内ですべて横並びにしたい場合は、すべての要素に float: left; をかけます。
ただの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に記述してきました。 他にもいろいろ便利な記述方法があるので紹介します。職業的にWebサイトを作成しない場合、ここはさらっと読む程度で大丈夫です。
| classセレクタ | .test htmlタグは<div class="test"> |
|---|---|
| idセレクタ | #test htmlタグは<div id="test"> |
| 要素型セレクタ | div p span a などタグそのままの名称 |
| 全称セレクタ | * |
| 疑似クラスセレクタ | :link :hover :first-child :nth-child(n) n番目の |
| 疑似要素セレクタ | ::before ::after ::first-letter |
| 属性セレクタ | セレクタ[属性タグ] |
| 結合子 | > （子セレクタ） + （隣接セレクタ） ~ （間接セレクタ） |
全称セレクタ *
全部のセレクタに対してスタイルを適応させます。
<div>
<div>ボックスA</div>
<p>ボックスB</p>
<span>ボックスC</span>
あいうえお
</div>
*{
color:#f00;
}
ボックスA
ボックスB
ボックスC あいうえお疑似クラスセレクタ :hover :link :nth-child(n) :first-child
n番目の要素にスタイルを適応させます。
<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;
}
content: 要素に文字や画像を挿入するプロパティ
属性セレクタ
特定の要素の「属性タグ」に対してスタイルを指定することができます。
<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`をつけている要素pに対して */
.wrap12 p[class="gnavi"]{
color:#f00;
}
/* target属性タグをつけている要素aに対して */
a[target="_blank"]::after{
content:' →';
}
結合子 >(子結合子)
直下にあたる階層の要素のみにスタイルを適応させます。
<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
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ