CSS

スポンサー広告

縦位置 中央

2017/05/14

近頃では、Webページの閲覧媒体の半数以上がスマホという状態になっているらしくWebサイト作成時もスマホできちんと見られる。そしてPCでも見られるというスマホファーストという考え方が浸透してきているように思います。サイト作成はPCでするのにメインの閲覧対象はスマホというのは制作側は大変ですね。

そこでレスポンシブデザインというのが隆盛を極めているようです。スマホといっても機種がたくさんあって、解像度も多様でどれにどう合わせてサイトのデザインするかは選択できないような状態ですね。PCの場合は幅960px固定というのが流行った気もします。もちろんPCも多様な解像度があるので幅960px固定というのもオールマイティではありませんが、横スクロールが発生しない最大公約数的横幅という感じでしたね。

いまや、PCもタブレットもスマホも機種を考えるのではなく、横幅を基準にレイアウトしましょうねと。こんな感じですね。しかもHTMLファイルはすべて同じものを使うよ。CSSのメディアクエリでCSSを切り替える事で1つのHTMLファイルでスマホも、PCも賄えちゃうんですね。リファラーからユーザーエージェントを引っ張り出して振り分けてたことを思えば大躍進ですね。

前置きが長くなりましたが、レスポンシブでは横幅を基準にレイアウトするのでレイアウトに使うボックス関連はwidthをパーセント指定すること多いですね。可変長(可変幅かな)のボックスです。この時に高さをピクセル指定できればそうややこしい事は起きないですね。

 

高さ固定ですのでボックスの中に縦位置中央、横位置中央が簡単に作れます。

HTML

<div class="p_box">
  <div class="c_box"> </div>
</div>

CSS

.p_box{
  background-color:#ff0;
  width:50%;
  height:200px;
  padding-top:50px;  /* 縦位置中央にするため親要素の高さ引く子要素の高さの半分 */
}
.c_box{
  background-color:#00f;
  width:50%;
  height:100px;
  margin:auto;
}

のようにしています。ここでは幅がブラウザの表示領域の半分(50%)で高さが200pxと高さ固定の親ボックスを作成しました。その子供に親要素の半分幅の高さも半分100px固定のボックスを親要素の縦横中央に配置しています。

親要素も、子要素もボーダーは引いていません。おそらく通常ボーダーはピクセル指定すると思われるので話がややこしくなるので引いていません。 box-sizingでborder-box指定するとかclac()でボーダーのピクセルを引けばいいのでしょうが今回はやめておきます 💔 。

ですから縦位置中央にするための余白は親要素のパディングでとっています。子要素のマージントップでとりたかったのですが、マージンの相殺が起きてしまい意図するものになりません。

PCで閲覧いただいている方はブラウザの幅をグリグリと変えてみてください。横幅が可変で、高さが固定で常に子要素の青いボックスは黄色いボックスの縦横中央にありますね。

では次ですが、親ボックスの高さを可変にしたいと思います。

サンプルを別ウィンドウで開く諸般の都合で別ウィンドウになります。

CSS

.p_box{
  background-color:#ff0;
  width:50%;
  height:50%;
}
.c_box{
  background-color:#00f;
  width:50%;
  height:50%;
  margin:auto;
}

高さをパーセント指定にしました。ややこしくなるのでパディングは取っていません。親要素のクラスであるp_boxのheightをパーセント指定にすれば解決するといいたいところですが、今回はうまくいきません。p_boxの親要素をいくらたどっていっても高さが指定されていないからです。

ならば親要素に高さを指定してあげれば解決しそうなのでhtml要素とbody要素にheight:100%;を指定してみます。

htm要素、body要素に高さ100%指定したサンプルを別ウィンドウで開く諸般の都合で別ウィンドウになります。

CSS

html,body{
  height:100%;
}

いい感じになりました。あとは、縦位置中央をすればいいので、計算します。100%の50%が親ボックスでさらにその50%が子要素の高さです。なので親要素は半分高さが残っています。その半分を上余白に設定してあげれば縦位置中央に来そうです。

htm要素、body要素に高さ100%指定し、パディング25%を取ったサンプルを別ウィンドウで開く諸般の都合で別ウィンドウになります。

いかがでしょうか、環境によってはうまくいったかのように見えるかもしれません。PCのブラウザで横幅のみを変更してみてください。横幅のみの変更なのに高さも変わってしまいます。不思議な現象に見舞われます。

パディングもマージンもパーセント指定時は幅を基準に計算されるようです(Box modelの8.3 8.4の percentageにwidthをもとに計算とあるよう)。なので可変長(可変高)の場合は縦位置中央は出来ません。

いえ、できます 😊 。まずはサンプルをご覧ください。可変長ボックスの縦位置中央。

高さの指定をパーセントではなくビューハイト(vh)指定に変更しました。vhはビューポートの高さに対してのパーセント指定になります。

CSS

.p_box{
  background-color:#ff0;
  width:50%;
  height:50vh;            /* パーセントの代わりにvhを使用 */
  padding-top:25vh;
}
.c_box{
  background-color:#00f;
  width:50%;
  height:25vh;            /* 親要素の高さに対してではなくビューポートの高さに対して */
  margin:auto;
}

子要素の高さは親要素の高さに対してではないということに気を付けてください。html要素とbody要素にheight:100%;の指定は不要です。widthもvwを使うことも可能です。

IEとEdgeに難点がありますね。ここら辺はまた別の機会にしようかなと思います 😅。

rssfeed
コメント
2018年07月29日 20時36分
Cash Advance さん
same day payday loan <a href="http://directlending.cars">no fax installment loans</a> bad credit loans reviews <a href=http://directlending.cars>loans</a>
2018年07月29日 22時09分
Payday Loans さん
loans <a href="http://directlending.cars">loans with bad credit</a> loans <a href=http://directlending.cars>a loan with bad credit</a>
2018年07月30日 00時54分
Best Online Loans さん
loans <a href="http://directlending.cars">loans for bad credit guaranteed</a> loans for bad credit <a href=http://directlending.cars>payday loans for bad credit</a>
2018年07月30日 06時42分
Meelushella さん
car insurance quotes florida <a href="https://wecarinsurance.us.com/">affordable car insurance</a> good2go car insurance <a href="https://wecarinsurance.us.com/">auto insurance</a> | https://wecarinsurance.us.com/ - metlife car insurance https://wecarinsurance.us.com/ - progressive car insurance
2018年07月30日 11時25分
Money Loan さん
loans <a href="http://directlending.cars">loan bad credit</a> direct loan consolidation <a href=http://directlending.cars>payday loan near me</a>
2018年07月30日 12時56分
Payday Loans Online さん
loans <a href="http://directlending.cars">loans</a> legit payday loans <a href=http://directlending.cars>loans</a>
2018年07月30日 15時59分
Spotloan さん
loans <a href="http://directlending.cars">lend money</a> loans for people with bad credit <a href=http://directlending.cars>loan for bad credit</a>
2018年07月30日 20時10分
Payday Express さん
easy installment loans online <a href="http://directlending.cars">title loans</a> loan with bad credit <a href=http://directlending.cars>a loan with bad credit</a>
2018年07月31日 03時51分
Online Payday Loans さん
online loans bad credit <a href="http://directlending.cars">loans for people with bad credit</a> legit payday loans <a href=http://directlending.cars>a loan with bad credit</a>
2018年07月31日 07時06分
Quick Loan さん
loans <a href="http://directlending.cars">loan for bad credit</a> free money loan <a href=http://directlending.cars>loans</a>
2018年07月31日 18時36分
Quick Loans さん
loans for people with bad credit <a href="http://directlending.cars">loans</a> loans with bad credit <a href=http://directlending.cars>personal loan with cosigner</a>
2018年08月02日 13時24分
Pay Day Loan さん
online payday loans no faxing <a href="http://directlending.cars">loans for bad credit</a> loans <a href=http://directlending.cars>payday lender</a>
2018年08月02日 13時35分
Instant Online Loans さん
tribal loans guaranteed approval <a href="http://directlending.cars">best cash advance loans online</a> loans <a href=http://directlending.cars>online loans bad credit</a>
2018年08月02日 16時17分
Cash Advance さん
loans <a href="http://directlending.cars">loans</a> get a loan today <a href=http://directlending.cars>bad credit loans reviews</a>
2018年08月03日 05時57分
Payday Loan さん
loans <a href="http://directlending.cars">loans for bad credit</a> loans <a href=http://directlending.cars>ace cash</a>
2018年08月03日 08時30分
Payday Loan さん
get a loan today <a href="http://directlending.cars">loans</a> loans bad credit <a href=http://directlending.cars>a loan with bad credit</a>
2018年08月05日 13時15分
Getting A Loan さん
fast personal loans <a href="http://directlending.cars">need a loan with bad credit</a> online payday lenders <a href=http://directlending.cars>direct consolidation loan</a>
2018年08月05日 15時56分
Speedy Cash さん
instant loans no credit check <a href="http://directlending.cars">payday loans for bad credit</a> loans <a href=http://directlending.cars>paydayloan</a>
2018年08月06日 02時43分
Online Payday Loan さん
1 hour payday loans no credit check <a href="http://directlending.cars">online loans bad credit</a> loan for bad credit <a href=http://directlending.cars>online payday lenders</a>
2018年08月06日 04時02分
Pay Day Loans さん
loans <a href="http://directlending.cars">bad credit loans</a> loans houston <a href=http://directlending.cars>1 hour payday loans no credit check</a>
2018年08月06日 08時33分
Cash Advance さん
loans for bad credit <a href="http://directlending.cars">loans</a> loan for bad credit <a href=http://directlending.cars>online loans bad credit</a>
2018年08月06日 12時09分
Payday Loan さん
loan bad credit <a href="http://directlending.cars">online loans for bad credit</a> loans <a href=http://directlending.cars>loans</a>
2018年08月06日 19時39分
Online Payday Loan さん
paydayloan <a href="http://directlending.cars">ace cash</a> loans for people with bad credit <a href=http://directlending.cars>apply online</a>
2018年08月06日 21時46分
Online Payday Loans さん
loans <a href="http://directlending.cars">best cash advance loans online</a> loans in colorado springs <a href=http://directlending.cars>ace cash</a>
2018年08月06日 22時38分
Loans Online さん
loan money <a href="http://directlending.cars">loans</a> loans <a href=http://directlending.cars>loans</a>
2018年08月07日 10時37分
Pay Day Loan さん
lender for bad credit <a href="http://directlending.cars">loans</a> direct lenders payday loans <a href=http://directlending.cars>loans</a>
2018年08月08日 05時31分
Payday Loan Online さん
loans <a href="http://directlending.cars">best loans for bad credit</a> bad credit payday loans <a href=http://directlending.cars>loans for bad credit</a>
2018年08月08日 08時47分
Online Loan さん
tribal loans guaranteed approval <a href="http://directlending.cars">payday loans for bad credit</a> payday loans for bad credit <a href=http://directlending.cars>loans for bad credit</a>
2018年08月08日 22時36分
Payday Loan さん
bad credit loan <a href="http://directlending.cars">loans bad credit</a> guaranteed loans for bad credit <a href=http://directlending.cars>loan bad credit</a>
2018年08月09日 16時53分
Quick Loans さん
payday loan near me <a href="http://directlending.cars">loans</a> denver payday loans <a href=http://directlending.cars>loans with bad credit</a>
2018年08月10日 14時31分
Pay Day Loans さん
usa payday <a href="http://directlending.cars">loans</a> loan for bad credit <a href=http://directlending.cars>loans</a>
2018年08月10日 17時54分
Speedy Cash さん
payday loan providers <a href="http://directlending.cars">a loan with bad credit</a> loans for people with bad credit <a href=http://directlending.cars>best cash advance loans online</a>
2018年08月11日 01時42分
Spotloan さん
loans <a href="http://directlending.cars">bad credit loans</a> loans for bad credit <a href=http://directlending.cars>loans bad credit</a>
2018年10月09日 12時04分
Pay Day Loan さん
bad credit loans direct lenders <a href="https://creditloansguaranteedapproval.com">loans for people with bad credit</a> poor credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com>loans now</a>
2018年10月11日 13時33分
Speedycash さん
credit loans guaranteed approval <a href="https://creditloansguaranteedapproval.com">loans 2017</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com>credit loans</a>
2018年10月11日 16時52分
Bad Credit さん
credit loans guaranteed approval <a href="https://creditloansguaranteedapproval.com">credit loans guaranteed approval</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com>credit loans guaranteed approval</a>
2018年10月15日 21時21分
Easy Payday Loan さん
credit loans guaranteed approval <a href="https://creditloansguaranteedapproval.com/">independent payday lenders</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com/>bad credit loans direct lenders</a>
2018年10月20日 07時41分
Speedy Cash さん
credit loans guaranteed approval <a href="https://creditloansguaranteedapproval.com/">payday loans no debit card</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com/>credit loans guaranteed approval</a>
2019年03月27日 21時56分
overseas pharmacies that deliver to usa さん
<a href="http://canadianpharmacyxyz.com/">no 1 canadian pharcharmy online</a>
http://canadianpharmacyxyz.com/
<a href=http://canadianpharmacyxyz.com/>canadian pharmacy</a>
2020年03月10日 18時05分
vaxtoGab さん
viagra online cheap viagra <a href="https://pharm-usa-official.com/#">cheap viagra </a> viagra 100mg generic viagra

viagra pills cheap viagra <a href=https://pharm-usa-official.com/#>viagra generic </a> viagra online viagra generic
2020年03月18日 21時13分
vjfiyGab さん
viagra online viagra generic <a href="http://yxo61.ru/ #">viagra buy </a> buy viagra viagra online ufiouas0209sss

viagra 100mg viagra online <a href=http://mp3mill.ru>viagra generic </a> buy viagra viagra generic
2020年03月25日 14時53分
zwgrqGab さん
how to enhance viagra effects viagra in herbal supplement <a href=" https://pharm-usa-official.com/# #">viagra vs cialis </a> viagra trusted sites getting the correct viagra dosage

viagra chastity bitch homemade viagra juice that really work <a href=https://pharm-usa-official.com/#>cialis vs viagra </a> i accidentally gave my stepson viagra orgasims on viagra

https://www.z-application.com/2020/03/09/mobilid-can-connect-to-qunsuo-bluetooth-barcode-readers/?unapproved=80&moderation-hash=dfb10a34cc9a039d40da229e340c0336#comment-80
https://www.tokenpayfraud.com/2020/03/11/publication-1-7/?unapproved=351&moderation-hash=f6b4d718e51cc6f4f022e838b2889f2b#comment-351
https://www.bluefoxcasino.com/boule-french-game/?unapproved=2439&moderation-hash=b28b9ab69e9607759bf445f3a0be9b7e#comment-2439
http://paasy.info/black-and-white-shower-curtain-set/?unapproved=144&moderation-hash=4ffd90c20a27d9c734340fa42b020253#comment-144
https://jizzedtothis.com/2020/03/13/glamour-babe-in-stockings-panties-and-stilettos/?unapproved=233&moderation-hash=cf2c716c5013584c76a462fc5a029f57#comment-233

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

お名前
コメント