ホームページ作成/ボックスや枠線の表示・装飾 (HTML,CSS)

ボックスをウインドウの中央に配置する方法(3ページ目)

1つのボックスをウインドウの中央に表示させる方法をご紹介。左右方向だけでなく上下方向にも中央に寄せて、ウインドウ(表示領域)の中心にボックスを配置させる方法です。スタイルシートで簡単に実現できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

サンプルソース群

サンプルで使った画面イメージのように表示させるスタイルシートとHTMLのソースをご紹介いたします。

■HTMLソース:

<div class="centerbox">
   <h1>中央配置ボックス</h1>
   <p>
      このボックスは、ウインドウの中心に表示されて
      いるはずです。………(文章省略)………
   </p>
</div>

中央に配置したいボックスをdiv要素で作っています。ここではclass属性を使って「centerbox」というクラス名を付加しています。

■スタイルシートソース:

div.centerbox {
   position: absolute;
   top:  50%;
   left: 50%;
   width:  360px;        /* 横幅 */
   height: 210px;        /* 高さ */
   margin-left: -180px;  /* マイナス「横幅÷2」 */
   margin-top:  -105px;  /* マイナス「高さ÷2」 */
   overflow: auto;  /* 内容がはみ出る場合の表示方法 */

   background-color: #ffcccc; /* 背景色 */
   color: #000000;            /* 文字色 */
}

各プロパティの値(大きさ)は表示したいサイズに合わせて書き換えて下さい。背景色や文字色の指定も望みの色に合わせて下さい。

ボックス内部にある見出し(h1要素)と段落(p要素)は以下のように装飾しています。(下記はどれも必須ではありません。自由に記述して下さい。)

/* 見出し */
div.centerbox h1 {
   font-size: 130%;            /* 文字サイズ:1.3倍 */
   text-align: center;         /* 中央寄せ */
   background-color: #cc0000;  /* 背景色:濃赤 */
   color: #fffff0;             /* 文字色:ほぼ白色 */
   margin: 10px;               /* 外側の余白:10px */
}

/* 段落 */
div.centerbox p {
   margin: 0px;        /* 外側の余白:なし */
   padding: 1em;       /* 内側の余白:1文字分 */
   line-height: 1.45;  /* 行間:0.45文字分 */
}

上記のソースを実際に表示すると、以下のサンプルページのようになります。

ボックスをウインドウの中央に配置する方法(サンプルページ)

おわりに

今回は、ボックスをウインドウの中心に表示させる方法をご紹介いたしました。 短いメッセージを、ウインドウ全体を使って表示させたい場合などに使ってみて下さい。

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます