CSS

スポンサー広告

ボックスを左から順に並べる

2017/06/11

ボックス(矩形)を横に並べるためのHTMLとCSSです。

条件的には

  • レスポンシブ対応(横スクロールが出ない)
  • ボックスの数は後々増えたり減ったりする可能性がある。
  • 広い幅ではボックス4個で1列5個目以降は2行目になり以降4個で1行(中間幅では2個1行、最小幅では1行1個)にする。
  • ボックスは左揃えにしておく

一般的にあるパターンですね。完成パターンです。ブラウザ幅に応じてボックスの幅が変わって常に4つで幅いっぱいに収まっています。狭くすると2つ、もっと狭くすると1つになります。

エントリーナンバー1

カットしてもらいました。

美容院でカットしてもらいました。

エントリーナンバー2

安眠中

ごはんまで起こさないでね。

エントリーナンバー3

ちょっとだけ寝る

何かあったらスマホで起こしてくださいね。

休憩しているだけですよ

エントリーナンバー4

新人です。

ニューフェースですよろしくお願いします。

エントリーナンバー5

新幹線ではありません。ル

何かご用ですか

仲良し

親子じゃないですけど仲良しです。

のようにしたいのですが高さを出すのがちょいむずです。TABLE要素を使う手もありかもしれませんが、必要以上にtable要素は嫌われている感じですので他の方法を使います。犬画像エントリー一覧表というタイトルにすれば表なのでいいとは思うのですがね。

HTML

<div class="flex-box">
  <div>
    <div class="box">
      <p>エントリーナンバー1</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー2</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー3</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー4</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー5</p>
    </div>
  </div>
  <div>
    <div class="box">
      <p>エントリーナンバー6</p>
    </div>
  </div>
</div>

ちょっと階層が深いですが全体をflex-boxクラスで囲みます。そしてdiv要素の中に装飾用のdiv要素を入れたものを用意します。

CSS

.flex-box{
  display:flex;
  flex-wrap: wrap;
}
.flex-box div{
  box-sizing: border-box;
  flex-basis: 100%;
  padding:10px;
}
.box{
  width:100%;
  height:100%;
  border:2px solid #ccc;
  border-radius:3px;
}

flexboxといわれるものを使います。

displya:flexを指定された直接の子要素はflexアイテムとして整列されて並びます。flexboxはいろいろとプロパティーがあり詳細に設定が可能ですが、必要な物だけ設定し説明します。

まず親要素でdisplya:flexを設定するとで直接の子要素は何らかの法則で整列されます。次にflex-wrap:wrapとすることで子要素の合計の幅が親要素より大きくなった時に折り返すように設定します。つまり次の段(行)に子要素であるdiv要素が落ちるということですね。

子要素である.flex-box divに対してはflex-basis: 100%;を指定します。これはスマホ表示の時のことです。親要素の幅と同じという意味ですので1個のdiv要素で満タンになってしまいますのでflex-boxのすべての直接の子要素であるdiv要素は1つずつ縦に並びます。

あとは内側のboxクラスを10pxずつ内側に配置するためpadding:10pxを設定しているのですが、基本ボックスの幅(高さ)はwidthプラスpaddingプラスborderプラスmarginなので幅が100%をこえてしまいます。 calc()を使うかbox-sizing: border-boxでボーダー領域までをwidthの中に含めてしまいます。

子要素である.flex-box divの幅の指定はflex-basisで行います。通常のwidthでは思った通りにならない場合があります。

HTML

@media(min-width:481px){
	.flex-box div{
		flex-basis: 50%;
	}
}
@media(min-width:769px){
	.flex-box div{
		flex-basis: 25%;
	}
}

スマホファーストなのでタブレットサイズまではflex-basis: 50%として2個横に並ぶようにします。タブレットサイズより大きい場合はflex-basis: 25%として4個横に並ぶようにしてあります。

高さについてはalign-content: stretchが初期値として設定されているようですので同じ行(段)のものは同じ高さになります。

この仕組みをうまく使えばサイト全体のレスポンシブ対応も簡単に作れるような気がします。昔はJavaScriptで一番高い高さのボックスを調べてその高さに合わせたりしたものでしたが、とても短く書くことができるようになりました。

rssfeed
コメント
2021年01月10日 13時25分
MqfSG さん
Medicament information for patients. Brand names. <a href="https://viagra4u.top">where buy viagra prices</a> in the USA. Best what you want to know about drug. Read information now.
<a href=http://marinefribourg.com/a-post-with-a-single-image/#comment-56195>All news about meds.</a> <a href=http://fatahalarab.com/1817/%D8%A3%D8%B7%D9%88%D9%84-%D8%A3%D9%86%D9%87%D8%A7%D8%B1-%D8%A3%D9%85%D8%B1%D9%8A%D9%83%D8%A7-%D8%A7%D9%84%D8%B4%D9%85%D8%A7%D9%84%D9%8A%D8%A9?show=84533#a84533>Actual about drug.</a> <a href=http://japaninfo.jp/recuruitforum/?mod=document&uid=595#kboard-comments-595>Some about drug.</a> da9ffe5
2021年01月11日 23時51分
DavidDvh さん
Pills information for patients. Effects of Drug Abuse.
<a href="https://mobic4u.top">mobic without dr prescription</a> in the USA
Actual news about medicines. Read information here.

https://jpn.itlibra.com/article?id=20719 Everything about meds. https://demo1-ru.webasyst.com/blog/Webasyst/say-hello-to-shop-script-7/#comment48 Everything what you want to know about medication. http://lapchan.moe/board/dev/thread/16#p57 Actual trends of drugs. 4ee9072
2021年01月23日 14時17分
lfzpddwcsg さん
ボックスを左から順に並べる/netkansai
lfzpddwcsg http://www.ggp9qm6gm7w3717e6o4r30c14xmkf804s.org/
<a href="http://www.ggp9qm6gm7w3717e6o4r30c14xmkf804s.org/">alfzpddwcsg</a>
[url=http://www.ggp9qm6gm7w3717e6o4r30c14xmkf804s.org/]ulfzpddwcsg[/url]
2021年01月25日 11時58分
Jdbxmoini さん
get viagra in canada <a href="http://llviabest.com/#">viagra\\</a> genericviagra http://llviabest.com/ - cialis viagra levitra young yahoo ’
2021年01月28日 10時10分
gmbdswgqdk さん
ボックスを左から順に並べる/netkansai
gmbdswgqdk http://www.g0oe69s60y62427w20i9bgn8mng3nwu2s.org/
<a href="http://www.g0oe69s60y62427w20i9bgn8mng3nwu2s.org/">agmbdswgqdk</a>
[url=http://www.g0oe69s60y62427w20i9bgn8mng3nwu2s.org/]ugmbdswgqdk[/url]
2021年02月04日 06時19分
njxrxtzov さん
ボックスを左から順に並べる/netkansai
[url=http://www.gh9xeyb432577d81jfn1i70c12ux5b6ss.org/]unjxrxtzov[/url]
njxrxtzov http://www.gh9xeyb432577d81jfn1i70c12ux5b6ss.org/
<a href="http://www.gh9xeyb432577d81jfn1i70c12ux5b6ss.org/">anjxrxtzov</a>
2021年02月04日 10時52分
NncsHopic さん
viagra overnight mastercard canada canadian <a href="http://lightvigra.com/ ">cheaper viagra</a> viagra generic sale
2021年02月05日 06時59分
Jbbvmoini さん
medication costs <a href="http://canadianpharmnorx.com/ ">cialis canada</a> online drugstore pharmacy
2021年02月06日 08時12分
Jbnbexcug さん
pharmeasy <a href="http://online21rxon.com/ ">Brand Cialis</a> canadian online pharmacy
2021年02月06日 08時34分
KuikUnast さん
acheter viagra a montreal <a href="http://viagerkr.com/ ">buy viagra with no prescription</a> to buy viagra with dapoxetine
2021年02月06日 20時43分
Lbsxmoini さん
walgreens pharmacy <a href="https://ssviagriia.com/ ">viagra and cialis</a> legit online pharmacy
2021年02月07日 16時17分
Ahkdmoini さん
cialis generic pharmacy online <a href="http://storerxpharmcanada.com/ ">online canadian discount pharmacy</a> canadian drugs online pharmacy
2021年02月07日 17時36分
Aqcfabinciabe さん
cialis no perscrtion <a href="http://cialisvja.com/ ">cialis dosage for women</a> buy cialis withiut a prescription
2021年02月10日 08時40分
Kbcxtymn さん
canadian pharma companies <a href="http://xuypharmacyonline.com/">drugs from canada</a> online pharmacy no prescription needed
2021年02月10日 14時16分
FvfcHopic さん
viagra canada sales <a href="http://hopeviagrin.com/ ">viagra substitute worldwide</a> buying viagra online australia without prescription
2021年02月12日 08時14分
Jbbnmoini さん
wie bekomme ich ein rezept fГјr cialis <a href="http://ljcialishe.com/ ">cialis trial offer</a> dividere cialis 20
2021年02月12日 11時27分
NbnhHopic さん
sildenafil online singapore <a href="https://vigedon.com/ ">buy generic viagra canada </a> generic viagra online prescription
2021年02月13日 09時14分
KbbfUnast さん
free viagra sample pack <a href="https://kloviagrli.com/ ">where to get viagra in bangalore </a> viagra online no prescription
2021年02月13日 09時42分
Jbnvexcug さん
simple money loan <a href="http://samcash21.com/ ">payday loans the cash store</a> cash advance columbus nebraska
2021年02月14日 09時36分
Abcfabinciabe さん
overnight pharmacy 4 u viagra <a href="http://viagriyvik.com/ ">viagra brand frizer </a> viagra professional australia
2021年02月15日 19時55分
Ahbzmoini さん
cash loans georgia no credit checks <a href="http://daymoneygo.com/ ">online payday loans no credit check instant approval canada</a> shoreline online payday loans
2021年02月17日 18時16分
Kvaxtymn さん
usa credit payday loan <a href="http://rirocash.com/ ">new cash loans uk</a> payday loans in davenport ia
2021年02月18日 11時18分
Fqbbmoini さん
stop payment payday loan check <a href="http://ascashapply.com/ ">easy cash advance</a> how do cash loans work at pawn shops
2021年02月18日 16時10分
FbsgHopic さん
us online cialis <a href="http://llecialisjaw.com/ ">http://llecialisjaw.com/ </a> cialis kaufen mit paypal zahlen
2021年02月27日 09時32分
ottdvpqv さん
ボックスを左から順に並べる/netkansai
<a href="http://www.gc9916e1h4848pcb6ejn0gv6296b2vucs.org/">aottdvpqv</a>
[url=http://www.gc9916e1h4848pcb6ejn0gv6296b2vucs.org/]uottdvpqv[/url]
ottdvpqv http://www.gc9916e1h4848pcb6ejn0gv6296b2vucs.org/
2021年02月27日 13時03分
NbmoHopic さん
gnereic cialis <a href="https://buycialisxz.com/ ">http://buycialisxz.com/ </a> generic cialis made in america
2021年02月27日 18時30分
tgowithki さん
ボックスを左から順に並べる/netkansai
<a href="http://www.g5ui6441us377z5g7ww9r58v6t0j7kwcs.org/">atgowithki</a>
[url=http://www.g5ui6441us377z5g7ww9r58v6t0j7kwcs.org/]utgowithki[/url]
tgowithki http://www.g5ui6441us377z5g7ww9r58v6t0j7kwcs.org/
2021年03月16日 10時39分
gokycnqkf さん
ボックスを左から順に並べる/netkansai
gokycnqkf http://www.g79f7bd5686mthoxk6rnz0n44v04s922s.org/
[url=http://www.g79f7bd5686mthoxk6rnz0n44v04s922s.org/]ugokycnqkf[/url]
<a href="http://www.g79f7bd5686mthoxk6rnz0n44v04s922s.org/">agokycnqkf</a>
2021年03月24日 02時35分
Jvqqmoini さん
https://dissertationahelp.com/ - dissertation editing service dissertation only phd <a href="http://dissertationahelp.com/ ">dissertation writing guide</a> phd dissertation writing
2021年03月25日 09時59分
Lmoppmoini さん
http://essaywriteris.com/ - how to write my essay best websites for essays <a href="http://essaywriteris.com/ ">cheap write my essay</a> best writing services reviews
2021年03月26日 17時41分
Grvexcug さん
https://kloviagrli.com/ - viagra for men for sale https://vigedon.com/ - coupons for viagra https://llecialisjaw.com/ - buying cialis cheap https://jwcialislrt.com/ - cialis buy online https://jecialisbn.com/ - coupons for cialis 5mg
2021年04月02日 03時39分
Brfgtymn さん
https://ljcialishe.com/ - cialis dosages https://cialisvja.com/ - cialis 20 mg price walgreens https://viagraonlinejc.com/ - how long before sex should i take viagra https://viagratx.com/ - international viagra online https://buycialisxz.com/ - cialis and viagra
2021年04月03日 11時13分
Abgcmoini さん
https://thesiswritingtob.com/ - phd thesis defense thesis support <a href="http://thesiswritingtob.com/ ">good thesis writing</a> writing a thesis
2021年04月09日 13時50分
qzlgklxfm さん
ボックスを左から順に並べる/netkansai
[url=http://www.g97ly431p1o55e65d76omub818mpu7sns.org/]uqzlgklxfm[/url]
qzlgklxfm http://www.g97ly431p1o55e65d76omub818mpu7sns.org/
<a href="http://www.g97ly431p1o55e65d76omub818mpu7sns.org/">aqzlgklxfm</a>
2021年04月23日 12時10分
LhdvHopic さん
howard stern commercial cialis https://asciled.com/ cialis for sale payment paypal
2021年04月23日 22時15分
Lrbsmoini さん
levitra online amazon https://uslevitraanna.com/ levitra dosing instructions
2021年04月25日 00時25分
Fbsfmoini さん
Lamisil http://uspharmus.com/ Viagra Soft Tabs
2021年04月26日 04時20分
Gvdbexcug さん
description tadalafil http://boxtadafil.com/ peptide pros tadalafil review
2021年04月26日 09時40分
RfvbHopic さん
cialis without prescripe https://cileve.com/ - cialis professional cialis au
2021年04月27日 07時38分
Jbsdmoini さん
Colospa http://onlinecanda21.com/ Maxalt
2021年04月28日 22時07分
Bbdftymn さん
recreational viagra https://gensitecil.com/ cost of generic viagra
2021年04月29日 07時59分
LhdvHopic さん
viagra cialis canada https://asciled.com/ - brand cialis cialis buy australia
2021年05月01日 09時23分
Lrbsmoini さん
buy levitra canada <a href=http://uslevitraanna.com/>walgreens levitra price</a> buy levitra at walmart
2021年05月02日 09時54分
lwnqwmsphn さん
ボックスを左から順に並べる/netkansai
lwnqwmsphn http://www.ge8138xt4iucp3f7024ywab2677h2gg9s.org/
<a href="http://www.ge8138xt4iucp3f7024ywab2677h2gg9s.org/">alwnqwmsphn</a>
[url=http://www.ge8138xt4iucp3f7024ywab2677h2gg9s.org/]ulwnqwmsphn[/url]
2021年05月02日 22時54分
Abdgmoini さん
canadian government approved pharmacies https://canadianeve21.com/ Voveran SR
2021年05月04日 06時48分
LbsoHopic さん
cialis with dapoxetine online https://ucialisdas.com/ cialis online
2021年05月04日 16時51分
Lebnmoini さん
drug store near me http://xlnpharmacy.com/ online pharmacy no rx
2021年05月05日 23時41分
Anoomoini さん
can i buy viagra legally in the uk https://llviagra.com/ viagra online versand info
2021年05月06日 04時03分
Fmrfmoini さん
cheap cialis canadian https://cialisee.com/ cialis 200 mg what is it
2021年05月06日 05時12分
Gtnbexcug さん
buying viagra online legally http://jokviagra.com/ before and after viagra
2021年05月08日 13時19分
Jebgmoini さん
Isoptin SR http://pharmacylo.com/ Isoptin SR
2021年05月08日 13時40分
Bbshtymn さん
is viagra funded by government https://loxviagra.com/ over the counter viagra substitute walgreens
2021年05月11日 04時55分
LbsoHopic さん
cialis funny https://ucialisdas.com/ all cialis drug original prices
2021年05月11日 12時01分
Lebnmoini さん
online pharmacy search <a href=http://xlnpharmacy.com/>best online international pharmacies</a> diuretics

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

お名前
コメント