CSS

スポンサー広告

floatの解除と余白

2017/04/29

float自体はよくわかっているつもりでも実際にレイアウトするときに右往左往しませんでしょうか。float解除はうまくいくけど後続要素との余白の設定がうまくいかずに、空のDIV要素を入れてからfloat解除したりして余白をねん出したりBRやHRなんかを使うかもしれませんが、セマンティック派の人に怒られます。

いくつも方法はあると思いますが私のよくやる方法を1つ。


ボックスを2行2列に並べてその下からまた文章が来る。ただし下の文章には背景色が設定されておりボックスからちょっと下げた位置から始めたい。

下のは見出しとボックスがくっつき過ぎているのでどうやって余白を取るかです。

1
2
3
4

ここに見出しです

まずボックスを4つ作ります。

<div class="floatbox1">1</div>
<div class="floatbox1">2</div>
<div class="floatbox1">3</div>
<div class="floatbox1">4</div>

次に大きさ背景色回り込み(float)を設定します。

.floatbox1{
  float:left;
  width:200px;
  height:200px;
  background-color:#f60;
  margin:10px;
}
1
2
3
4

幅を設定してfloatしてあげると横に並びますね。しかし横に4つ並んでしまいました。そこで3つ目のボックスにfloat_clearクラスを足してclear:bothを書きます。

<div class="floatbox1 float_clear">
.float_clear{
  clear:both;
}

 

1
2
3
4

ここに見出しです

うまく2行2列になりましたが、floatした要素は通常配置の要素からは認識できないので後続要素の見出しが上に来てしまいます。この後続要素にclear:bothを掛けたのが最初の様子です。

HTML

<div class="floatbox1">1</div>
<div class="floatbox1">2</div>
<div class="floatbox1 float_clear">3</div>
<div class="floatbox1">4</div>
<h2 class="float_clear">ここに見出しです</h2>

CSS

.floatbox1{
  float:left;
  width:100px;
  height:100px;
  background-color:#f60;
  margin:10px;
}
.float_clear{
  clear:both;
}
h2{
  background-color:#0cf;
  padding:10px;
}

ここから本題です。見出しとボックスの間に空間がほしいときどうしますか?

後続用の見出しに背景色がなければ見出しにpadding-topを設定すれば解決です。今回は背景色があるのでpadding-topでは背景色が上にたくさん取られるだけです。

margin-topではだめでしょうか。ダメなんですね。floatをクリアするためにその要素のmargin-topが既に使われてしまっているのでうまくいきません。

答えは簡単です。やり方はいくつもあります。4つのボックスの親要素のDIVを作って親要素のpadding-bottomを設定する方法もあるかもしれません。いわゆるdiv病というやつです。float_clearというクラス名だけでも見栄えががそのままクラス名ってどうよと言われそうなのでこれ以上HTMLを触りたくありません。

今回は、h2の上にある要素に下余白を取ってあげればいいのでboxの3か、4にクラスを追加してmargin:bottomを取って解決します。

.float_clear{
  clear:both;
  margin-bottom:50px;
}

でどうでしょう3つのボックスにfloat_clearクラスがあるのでそれにmargin-bottom:50px;を設定します。うまくいきました。ただし、見出しの下にも不要な余白がつくのでさらにCSSで余白を取っておきましょう。

h2.float_clear{
  margin-bottom:auto;
}

これで出来上がりなんですが、おそらくこれって駄目なCSSの書き方なんだろうと思います。CSSが機能で分類されていないというか再利用性が低すぎるということですね。

float_clearクラスがclear:bothしたいのか、clear:bothしてさらにmargin-bottom:50px必要なのかです。今回2行2列だったのでうまく機能しますが、3行2列だとすると途中でfloat解除が2回出てくることになります。そうしたときにfloat_clearクラスには、clear:both機能だけが必要でmargin-bottom:50pxはべつのクラスに持たせるべきだというのが普通ですよね。そうすればh2.float_clearでmargin-bottom:autoする必要がなくなります。

わたしは、大規模な共同作業の経験がないのでついその場主義でCSSを書いてしまいます。逆にクラスが3つも4つもあるようなHTMLになれないものでアレルギーがあるようです。 class="floatbox1 float_clear"さえやりたくないです。 class="floatbox2"とかにして1つのクラスを見れば全部わかるようにしたいです。

.floatbox1,.floatbox2{
  float:left;
  width:100px;
  height:100px;
  background-color:#f60;
  margin:10px;
}
.floatbox2{
  clear:both;
}

これが好みですね。さらにmargin-bottom:50px必要なところにはclass="floatbox3"にして

.floatbox1,.floatbox2,.floatbox3{
  float:left;
  width:100px;
  height:100px;
  background-color:#f60;
  margin:10px;
}
.floatbox2,.floatbox3{
  clear:both;
}
.floatbox3{
  margin-bottom:50px;
}

そうすると似たクラスがたくさんできますがHTML側はちょっとすっきりしますし、あとでCSS追いかけるの簡単だと思います。まったくもってわかっていませんがOOCSS(オブジェクト指向CSS)とは真反対の再利用性の低い、見てもわかりにくいものになっています。出来上がっているCSSに手を加えるとどこに影響があるかわからないし、ちょっとしたマイナー変更にまたクラスを作ってHTMLに6個目7個目のクラスを追加するのは抵抗がありますのでこんな方法でご紹介いたしました。

CSSの書き方よりflotaしてある方要素(先行要素)で余白を取ってくださいってことでよろしくお願いします。

rssfeed
コメント
2018年02月27日 00時43分
ifuganuxvsota さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 00時57分
erafjuari さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 00時58分
oxabutneye さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 00時59分
ejyihupoozo さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時13分
ecocwitikuf さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時13分
acajunabusika さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時17分
zuwalxudocu さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時29分
awafxazekesur さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時33分
egijagxisipuh さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時34分
enumohedokao さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時34分
ihzuqgil さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時45分
atanopijayu さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時50分
eidenetem さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 01時50分
iaffaxu さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 02時05分
awikacgu さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 02時06分
uqugexap さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 02時20分
xaaledivuz さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 02時21分
ebozalolo さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 03時29分
ariamewf さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月27日 03時48分
axesulet さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月28日 00時51分
iqaivox さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2018年02月28日 01時06分
odasinaeturob さん
http://levitra-20mg-priceof.online/ - levitra-20mg-priceof.online.ankor <a href="http://pricespharmacy-canadian.online/">pricespharmacy-canadian.online.ankor</a> http://buy-amoxicillin-amoxil.online/
2021年01月10日 13時25分
HjwUY さん
Medicines information leaflet. Generic Name. <a href="https://prednisone4u.top">can i buy cheap prednisone without rx</a> in USA. Best about meds. Get here.
<a href=https://dienmaysonganh.com/san-pham/thuoc-do-khoang-cach-bang-tia-laser-sndway-hd710.html>Best about medicines.</a> <a href=https://faridzudin.com/the-laidback-vacation-in-jeju-south-korea/#comment-4593>All about meds.</a> <a href=https://libertyarmenia.am/mice-tourism/#comment-178>Everything information about drugs.</a> 9f4b8d3
2021年01月11日 23時51分
DavidDau さん
Drug information leaflet. Effects of Drug Abuse.
<a href="https://lipitor4u.top">how to buy lipitor</a> in USA
Everything about drug. Get here.

https://kempas.com.ua/komod-radist-dub-masiv Actual what you want to know about medicines. https://kennyproducts.com/woven-in-custom-lanyard-text-only-embroidered/?attributes=eyI0MTY0IjoiNDU4IiwiNDE2NSI6Ijk3IiwiNDE2NiI6IjIwMiIsIjQxNjkiOiIiLCI0MTcwIjoiIiwiNDE3MSI6IjExNCIsIjQxNzIiOiIxMlwvMTFcLzIwMTciLCI0MTczIjoiRHJ1Z3MgaW5mb3JtYXRpb24gZm9yIHBhdGllbnRzLiBEcnVnIENsYXNzLiBcclxuPGEgaHJlZj1cImh0dHBzOlwvXC9uZXVyb250aW40dS50b3BcIj5uZXVyb250aW4gbm8gcHJlc2NyaXB0aW9uPFwvYT4gaW4gdGhlIFVTQSBcclxuQWxsIGFib3V0IG1lZGljaW5lcy4gUmVhZCBoZXJlLiBcclxuIFxyXG5odHRwczpcL1wvYmxvZy5lbGVjdHJvc3Vpc3NlLmNoXC9ibGl0emUjY29tbWVudHMgQmVzdCBpbmZvcm1hdGlvbiBhYm91dCBtZWRpY2F0aW9uLiBodHRwczpcL1wvZnIuc3dhc2h2aWxsYWdlLm9yZ1wvYXJ0aWNsZVwvd2hhdC1oYXBwZW5lZC10by1qaW1teS1ob2ZmYS0yI2NvbW1lbnRzIEFsbCBuZXdzIGFib3V0IHBpbGxzLiBodHRwOlwvXC9iYXJjZWxvbmFmb3J1bS5ydVwvb2JzY2hpaS0yXC9zZXh3YXAtYmlnLWNvY2stNjUyMVwvI3Bvc3QyMDA2MjAgQmVzdCB0cmVuZHMgb2YgbWVkcy4gIGU3MmQxYjcgIn0 All information about medication. http://kazgazeta.kz/news/107401 Some what you want to know about pills. 4ebc4c4
2021年02月04日 06時04分
jddrhmrcb さん
floatの解除と余白/netkansai
jddrhmrcb http://www.g9280953ald1sbn4p7rkzz51t02h5eu6s.org/
<a href="http://www.g9280953ald1sbn4p7rkzz51t02h5eu6s.org/">ajddrhmrcb</a>
[url=http://www.g9280953ald1sbn4p7rkzz51t02h5eu6s.org/]ujddrhmrcb[/url]
2021年02月23日 06時16分
yqlfodbefhd さん
WvUv4Y <a href="http://fmkpbbnhrglk.com/">fmkpbbnhrglk</a>, [url=http://lucghudjudif.com/]lucghudjudif[/url], [link=http://yvahjurefisf.com/]yvahjurefisf[/link], http://ugoylmuynnft.com/
2021年02月23日 15時40分
rdiisdjpxw さん
floatの解除と余白/netkansai
[url=http://www.g1c4l25849kmbf8k83r5b4filfn2d333s.org/]urdiisdjpxw[/url]
rdiisdjpxw http://www.g1c4l25849kmbf8k83r5b4filfn2d333s.org/
<a href="http://www.g1c4l25849kmbf8k83r5b4filfn2d333s.org/">ardiisdjpxw</a>
2021年02月23日 16時21分
dsjrti さん
qDEfTs <a href="http://ipfrhlvjhqci.com/">ipfrhlvjhqci</a>, [url=http://kjchdpoixhhm.com/]kjchdpoixhhm[/url], [link=http://fbnlrcwzfyte.com/]fbnlrcwzfyte[/link], http://tlvpsxhjzbdk.com/
2021年02月24日 22時00分
dxtfvfudj さん
Xk6fes <a href="http://mxlwurookudk.com/">mxlwurookudk</a>, [url=http://dwxqsrznvtxe.com/]dwxqsrznvtxe[/url], [link=http://eejhonbbmryh.com/]eejhonbbmryh[/link], http://olihkvqyabkk.com/
2021年02月24日 23時19分
fasyaunvqi さん
uZEC8P <a href="http://ltgwovgweext.com/">ltgwovgweext</a>, [url=http://uejgrfmdfxel.com/]uejgrfmdfxel[/url], [link=http://nvwakfcmxged.com/]nvwakfcmxged[/link], http://nxayhkzvvoal.com/
2021年02月26日 04時33分
nedxjmuq さん
D9eKK2 <a href="http://cgtuvqbuouma.com/">cgtuvqbuouma</a>, [url=http://gkbzogxpjksq.com/]gkbzogxpjksq[/url], [link=http://mzlltkmjesfw.com/]mzlltkmjesfw[/link], http://twwzitlfwjxy.com/
2021年02月26日 10時12分
ttelgkhphc さん
floatの解除と余白/netkansai
[url=http://www.gg6u467w70r9uki85o24qgy4r2be251us.org/]uttelgkhphc[/url]
<a href="http://www.gg6u467w70r9uki85o24qgy4r2be251us.org/">attelgkhphc</a>
ttelgkhphc http://www.gg6u467w70r9uki85o24qgy4r2be251us.org/
2021年02月26日 22時07分
nalvxu さん
TrCLYG <a href="http://ydmwyguqhupe.com/">ydmwyguqhupe</a>, [url=http://pdlzhgiuaalz.com/]pdlzhgiuaalz[/url], [link=http://llhpchjorikb.com/]llhpchjorikb[/link], http://njvnnrvfupni.com/
2021年02月27日 10時07分
jfjeqzczgn さん
tX7yo3 <a href="http://lfjwoibgeqsw.com/">lfjwoibgeqsw</a>, [url=http://oqtkoiqrmkwx.com/]oqtkoiqrmkwx[/url], [link=http://kqofrrtqpecb.com/]kqofrrtqpecb[/link], http://fxnpkvkqieix.com/
2021年03月01日 10時44分
jjmfopo さん
P6dgqg <a href="http://cxtvxelluffx.com/">cxtvxelluffx</a>, [url=http://wkrpeiojbwgf.com/]wkrpeiojbwgf[/url], [link=http://uthrmvaafffm.com/]uthrmvaafffm[/link], http://jwoicqpbpmli.com/
2021年03月13日 21時08分
ypvbthqdfi さん
floatの解除と余白/netkansai
ypvbthqdfi http://www.giwho65z0pj3w91c4v5n0a024s366o9ws.org/
<a href="http://www.giwho65z0pj3w91c4v5n0a024s366o9ws.org/">aypvbthqdfi</a>
[url=http://www.giwho65z0pj3w91c4v5n0a024s366o9ws.org/]uypvbthqdfi[/url]
2021年03月16日 05時56分
eywkqkjwg さん
floatの解除と余白/netkansai
[url=http://www.gv3dm0647kd2d9ew9vw56099lo12b8jjs.org/]ueywkqkjwg[/url]
eywkqkjwg http://www.gv3dm0647kd2d9ew9vw56099lo12b8jjs.org/
<a href="http://www.gv3dm0647kd2d9ew9vw56099lo12b8jjs.org/">aeywkqkjwg</a>
2021年03月16日 11時21分
wzymrgfxmr さん
floatの解除と余白/netkansai
wzymrgfxmr http://www.g768xn2hvww58m81rqjx5um88y06j739s.org/
[url=http://www.g768xn2hvww58m81rqjx5um88y06j739s.org/]uwzymrgfxmr[/url]
<a href="http://www.g768xn2hvww58m81rqjx5um88y06j739s.org/">awzymrgfxmr</a>
2021年03月19日 11時18分
moogxtxmq さん
floatの解除と余白/netkansai
[url=http://www.gr1y13z96bofbfm6z643498l2y7d4i9rs.org/]umoogxtxmq[/url]
<a href="http://www.gr1y13z96bofbfm6z643498l2y7d4i9rs.org/">amoogxtxmq</a>
moogxtxmq http://www.gr1y13z96bofbfm6z643498l2y7d4i9rs.org/
2021年03月23日 01時37分
qqvspksj さん
floatの解除と余白/netkansai
qqvspksj http://www.g8q30ggth8katj917mk8754tl653tz80s.org/
<a href="http://www.g8q30ggth8katj917mk8754tl653tz80s.org/">aqqvspksj</a>
[url=http://www.g8q30ggth8katj917mk8754tl653tz80s.org/]uqqvspksj[/url]
2021年03月24日 01時39分
ybeyvtsn さん
floatの解除と余白/netkansai
[url=http://www.g20pe1j524v13eby8q12n9thqem265v3s.org/]uybeyvtsn[/url]
<a href="http://www.g20pe1j524v13eby8q12n9thqem265v3s.org/">aybeyvtsn</a>
ybeyvtsn http://www.g20pe1j524v13eby8q12n9thqem265v3s.org/
2021年04月01日 16時22分
ikjcolzssz さん
floatの解除と余白/netkansai
[url=http://www.g5be67u2s14d7x8wn219uixmy8i8496bs.org/]uikjcolzssz[/url]
<a href="http://www.g5be67u2s14d7x8wn219uixmy8i8496bs.org/">aikjcolzssz</a>
ikjcolzssz http://www.g5be67u2s14d7x8wn219uixmy8i8496bs.org/
2021年04月05日 22時51分
dxzghnlmlw さん
floatの解除と余白/netkansai
<a href="http://www.gf6dd5iw78bh9lyom174kc77473i55v8s.org/">adxzghnlmlw</a>
dxzghnlmlw http://www.gf6dd5iw78bh9lyom174kc77473i55v8s.org/
[url=http://www.gf6dd5iw78bh9lyom174kc77473i55v8s.org/]udxzghnlmlw[/url]
2021年04月06日 11時59分
lvnhqpodbr さん
floatの解除と余白/netkansai
<a href="http://www.g849h6fpo4807yonk5f3l73vx9h0zo56s.org/">alvnhqpodbr</a>
lvnhqpodbr http://www.g849h6fpo4807yonk5f3l73vx9h0zo56s.org/
[url=http://www.g849h6fpo4807yonk5f3l73vx9h0zo56s.org/]ulvnhqpodbr[/url]
2021年04月10日 10時28分
silmqsklbj さん
floatの解除と余白/netkansai
[url=http://www.gd8p963f9qt5w9qva982i2vm9u205r0ws.org/]usilmqsklbj[/url]
<a href="http://www.gd8p963f9qt5w9qva982i2vm9u205r0ws.org/">asilmqsklbj</a>
silmqsklbj http://www.gd8p963f9qt5w9qva982i2vm9u205r0ws.org/
2021年04月22日 11時48分
cwwrxjglgs さん
floatの解除と余白/netkansai
cwwrxjglgs http://www.g9631nh2h7128pok6vant0s4k6y7s7f4s.org/
[url=http://www.g9631nh2h7128pok6vant0s4k6y7s7f4s.org/]ucwwrxjglgs[/url]
<a href="http://www.g9631nh2h7128pok6vant0s4k6y7s7f4s.org/">acwwrxjglgs</a>
2021年04月26日 16時07分
coqpqivnd さん
floatの解除と余白/netkansai
coqpqivnd http://www.gr54uj90p03k923kgg0b7615kgr87uhrs.org/
<a href="http://www.gr54uj90p03k923kgg0b7615kgr87uhrs.org/">acoqpqivnd</a>
[url=http://www.gr54uj90p03k923kgg0b7615kgr87uhrs.org/]ucoqpqivnd[/url]
2021年05月05日 16時39分
bcfrojwzob さん
floatの解除と余白/netkansai
<a href="http://www.gpxwv22pnbx987kl600r97481y0fz7j4s.org/">abcfrojwzob</a>
bcfrojwzob http://www.gpxwv22pnbx987kl600r97481y0fz7j4s.org/
[url=http://www.gpxwv22pnbx987kl600r97481y0fz7j4s.org/]ubcfrojwzob[/url]
2021年05月10日 14時37分
ibydmpqlk さん
floatの解除と余白/netkansai
[url=http://www.g3ufn80jrzi5t8q25hs00j051y8b655xs.org/]uibydmpqlk[/url]
ibydmpqlk http://www.g3ufn80jrzi5t8q25hs00j051y8b655xs.org/
<a href="http://www.g3ufn80jrzi5t8q25hs00j051y8b655xs.org/">aibydmpqlk</a>

コメントよろしくお願いします。

お名前
コメント