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に難点がありますね。ここら辺はまた別の機会にしようかなと思います 😅。