0%

Designデザインワークショップ

Posted:2015.06.22

左右天地方向(ウィンドウ表示域)の中央にコンテンツを配置する

ウェブサイトのレイアウトをCSSで作成していくときに、使う場面も多いコンテンツのセンタリングですが、左右方向に対しては比較的わかりやすいですが、天地方向に対しては少しややこしいイメージがあります。さらにウインドウ(表示画面)内に対してのセンタリングとなると一筋縄ではいかないのではないでしょうか、、

 

今回は知っておくと何かと便利なウィンドウに対して中央にコンテンツを配置する方法をまとめてみたいと思います。

まずは左右方向と天地方向の各センタリング方法のおさらいから。

 

左右方向にセンタリングする

【 text-align: center ; 】

画像やテキストなどインライン要素の中央揃え

【 margin: 0 auto ; 】

左右の均等余白を使ったブロック要素の中央寄せ

 

天地方向にセンタリングする

【 line-height: ◯◯◯px ; 】

行間指定を使うことで一行テキストの場合、指定した数値の中央に配置される

【 padding: ◯◯◯px 0 ; 】

上下の余白を統一することで中央に配置する

【 vertical-align: middle ; 】

インライン要素の上下中央揃え

【 display: table-cell ; & vertical-align: middle ; 】

テーブルのセルと同じ表示方法を使ったブロック要素の上下中央揃え

 

など、いろいろな方法が存在します。もちろんこれらは使用する場面によって使い分ける必要があります。

では次に左右と天地方向(=表示ウィンドウ)に対してセンタリングする方法です。

 

位置指定とネガティブマージンを用いた中央寄せ

positionプロパティとネガティブマージンを使ったセンタリングの方法です。しかし後述のとおり、幅と高さに対しての数値入力が必要ですのでセンタリングする要素のサイズが決まっている時にしか使えません。そして、親要素がセンタリングさせる子要素より小さい場合、はみ出して表示されるので使用できる場面は限られそうです。

左右天地方向(ウィンドウ表示域)の中央にコンテンツを配置する

<< ソースコード >>

//HTML
<div class="wrap">
  <div class="centering_box">センタリングさせる要素
  </div>
</div>

//CSS
.wrap {
  position: relative ;
}
.centering_box {
  position: absolute ;
  left: 50% ;
  top: 50% ;
  width: 400px ;
  height: 300px ;
  margin-left: -200px ;  //幅の1/2のサイズ
  margin-top: -150px ;  //高さの1/2のサイズ
}

 

1. 全体を囲う親要素に『position: relative ;』を指定し、その子要素には『position: absolute ;』で親要素に合わせた絶対位置指定をします。

 

2. 子要素の位置指定に『left: 50% ;』で左右方向、『top: 50% ;』で天地方向に中央配置します。

 

3. 子要素の左上端がセンタリングされている状態ですので、子要素の幅と高さの1/2の数値をネガティブマージンに指定することでコンテンツ自体がセンタリングされます。

 

ルート要素を基準にして0の位置指定とマージンautoを用いた中央寄せ

positionプロパティでルートの要素に基準を合わせた上で、marginの値をautoにしたセンタリングの方法です。ポイントとなるのはtop・bottom・left・rightの位置指定を統一し、四方からの余白を均等にしている点です。この方法はセンタリングする要素のサイズが決まっていない場合や包括する親要素がセンタリングさせる子要素よりも小さい場合でも使えるのでとても便利です。

左右天地方向(ウィンドウ表示域)の中央にコンテンツを配置する

<< ソースコード >>

//HTML
<div class="wrap">
  <div class="centering_box">センタリングさせる要素
  </div>
</div>

//CSS
.centering_box {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  margin: auto ;
  width: ◯◯◯ ;
  height: ◯◯◯ ;
}

 

1. センタリングさせる要素に『position: absolute ;』を指定し、ルートの要素(=ウィンドウ表示域)を基準に絶対位置指定をします。(親もしくは祖先ににあたる要素には位置指定がない場合)

 

2. top・bottom・left・rightそれぞれの位置指定を0として、margin: auto ; を設定する

 

 

ページ内で1つのコンテンツを効果的に見せることができるのがメリットです。CSSの基本的な知識だけでは難しいのでウィンドウに対してのセンタリングする方法は覚えておくと何かと使えるので便利ですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】