ホームページのど真ん中に好きな言葉をドーンと表示したいと思い作ってみた。
図は分かりやすくするため、内側のdiv枠をグレー、pタグをレッドに背景色を変えてある。
以下解説です。
HTML部分
わたしの方法はまず全体枠をdiv#wrapperなどで作りその中に言葉を表示するためのdiv枠（クラス名は、.box-center）を設けて中にpタグ（クラス名：.text-center）を入れた。
<div id="wrapper">
<div class="box-center">
<p class="text-center">大根おろしのせたら和風かよ！</p>
</div>
</div>
CSS部分
全体枠（div#wrapper）
ポイントはブロック内部をど真ん中にするために、定番の方法（らしい。わたしの中では定番でもなんでもないが）position: absolute を指定し、top,leftともに50%にする。それだけでは枠の左上の位置が中央になってしまうので、ボックスの幅と高さの半分の長さをずらす。（margin-left, margin-top部分）
#wrapper{ /* 中身全体を画面中央に配置 */
width: 900px;
height 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -450px; /* マイナス「横幅÷2」 */
margin-top: -150px; /* マイナス「高さ÷2」 */
}
文字枠（div.box-center）
この文字枠自体は上記の設定で画面の中央に位置している。
ここでは枠内の設定のみ行う。枠内にpタグを入れることを考慮してそのpタグが上下左右中央（つまりはど真ん中）に位置するように設定する。
ポイントは、display: table-cellを設定すること。これは下につづくvertical-align: middleを有効にするために必要。display: table-cellになっていないと垂直方向の中央揃えができない。あとは水平方向の中央揃えtext-align: centerを設定する。
.box-center{ /* ボックス内の文字を上下左右中央ぞろえに設定する */
display: table-cell; /* 表のセル要素にする（vertical-align: middleを有効にするため）*/
vertical-align: middle; /* ボックス内の文字の垂直方向の位置 */
text-align: center; /* ボックス内の文字の水平方向の位置 */
width: 900px; /* 横幅 */
height: 300px; /* 高さ */
overflow: hidden; /* 内容がはみ出る場合auto指定でスクロールバーが表示される */
background-color: #fff;
}
段落（p.text-center）
文字の装飾をしたり影をつけたりしているが、基本的にはtext-align: centerで文字を中央揃えにすれば良い。
.text-center{ /* 文字を中央揃えにする */
font-size: 48px; /* 文字サイズ */
font-weight: 900;
font-family: 'メイリオ', Osaka;
text-shadow: #999 10px 10px 20px; /* 影の色,縦方向にずれる位置,横方向にずれる位置,影の拡散*/
/*display: inline-block; 入れても表示はかわらないためコメントアウト*/
text-align: center;
background-color: #fff;
}
div#wrapperの設定をその中のボックス枠（div.box-center）に入れてdiv枠を一つでど真ん中に文字を表示させようとするとうまくいかなくなる。文字用と中央配置用の2つのdiv枠を使って役割分担させるとうまくいく。これなら文字列の長さを変えても必ず中央にくるようになる。
でかいフォントで一文字だけ「人生」とかやってみたい。
div枠は2つともwidthとheightを設定しているので、もし300px以上のフォントサイズで文字を表示するならheight等を調整しそれ以上の大きさにする。
ネット上には情報が溢れかえっており、隙間がない気がする。何事も余裕がないとよくないのではないかな、と思ってしまう。
真ん中にどかんと文字だけがあるシンプルなページはなかなか少ないので、これからはそういったページも作っていこうかと考えている。
全体ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>文字をボックスの中央に配置するサンプル - tomato.site44.com</title>
<style>
*{
margin: 0;
padding; 0;
}
#wrapper{ /* 中身全体を画面中央に配置 */
width: 900px;
height 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -450px; /* マイナス「横幅÷2」 */
margin-top: -150px; /* マイナス「高さ÷2」 */
}
.box-center{ /* ボックス内の文字を上下左右中央ぞろえに設定する */
display: table-cell; /* 表のセル要素にする（vertical-align: middleを有効にするため） */
vertical-align: middle; /* ボックス内の文字の垂直方向の位置 */
text-align: center; /* ボックス内の文字の水平方向の位置 */
width: 900px; /* 横幅 */
height: 300px; /* 高さ */
overflow: hidden; /* 内容がはみ出る場合auto指定でスクロールバーが表示される */
background-color: #fff;
}
.text-center{ /* 文字を中央揃えにする */
font-size: 48px; /* 文字サイズ */
font-weight: 900;
font-family: 'メイリオ', Osaka;
text-shadow: #999 10px 10px 20px; /* 影の色,縦方向にずれる位置,横方向にずれる位置,影の拡散*/
/*display: inline-block; 入れても表示はかわらないためコメントアウト*/
text-align: center;
background-color: #fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box-center">
<p class="text-center">大根おろしのせたら和風かよ！</p>
</div>
</div>
</body>
</html>
コメント