webfeelfree

CSSでdivでもulタグでも2つ以上のブロック要素を並べて中央寄せにしてみた

以前書いた「2つ、3つ以上のテーブルを並べて中央に寄せるHTML&CSSコンビネーション」のブロック要素版というか、<div>タグはもちろん、<ul>タグでも<dl>タグでもできるんだ!と思ったので、改めてメモしていきます。

デモは、いつもと同じく、記事の最後の方にあります。

とりあえず1つのブロック要素を中央寄せしてみる

ブロック要素ができるという事で、あえて<p>タグを使ってみました。

HTML

<p class="demo1">中央に来ていますか?</p>

CSS

.demo1{
    width: 100px;
    margin: 0 auto;
}

ポイントとしては、
・しっかりと幅(width)を指定する
・左右の余白をautoで指定する
というところでしょうか。

今回は<p>タグを使いましたが、もちろん<div>タグに書きかえて使うこともできます。

2つのブロック要素を並べて中央寄せにします

今回の本題です。

HTML

<div class="demo2">
    <div class="demo2-1">左の欄だよ</div>
    <div class="demo2-2">右の欄だよ</div>
</div>

CSS

.demo2{
    width: 250px;
    margin: 0 auto;
}
.demo2-1{
    width: 125px;
    float: left;
}
.demo2-2{
    width: 125px;
    float: left;
}

親divでボックスを作って中央寄せにして、その中で子divを並べています。
div入れ子というやつですね。

中央寄せにするときの親にするブロック要素には<div>タグ<section>タグなどを使いましょう。

ここでのポイントは・・・
親divに関しては、1つのブロック要素を中央寄せと同じ要領で、
・しっかりと幅(width)を指定
・左右の余白を指定
します。

そして、子divの方は、
・2つの子divfloatを指定すること
・幅を親divの幅の範囲内で設定すること
にあります。

式にしてみると・・・

算数の授業のようですが、式にしてみると、
子divの幅の合計 + 子divの余白や線の幅の合計 = 親divの幅』
となり、この例だと「子divの幅(125px×2) + なし = 250px」となります。

子divに左右の余白や左右の線などを設定した場合には、その値も合計に入れましょう。
そして、合計が親divの幅を超えないように注意します。

子divを中央に寄せないとしても、例えば7:3などの割合でレイアウトするときも基本は同じです。
よくブログのレイアウトとかで見る、2カラムレイアウトなどは、このような土台でコーディングされています。

他のブロック要素も並べて中央寄せできる

おまけという感じで、<ul>タグ<table>タグのブロック要素でやってみました。
さら~っと見ていただければと思いますので、説明は割愛します。
あんまり使わないともいう。

基本的には、<div>タグの時と一緒です。
あとは、CSSの装飾系のコードで余計な余白とかをリセットしているという感じです。

HTML

<div class="demo3">
    <ul class="demo3-1"><li>ulタグを使用</li></ul>
    <table class="demo3-2"><tr><td>tableタグを使用</td></tr></table>
</div>

CSS

.demo3{
    width: 250px;
    margin: 0 auto;
    border: 1px solid #000;
    padding: 10px;
    overflow: hidden;
}
.demo3-1{
    width: 123px;
    float: left;
    border: 1px solid #000;
    margin: 0;
    padding: 0;
}
.demo3-1 li{
    list-style: none;
}
.demo3-2{
    width: 125px;
    float: left;
    border: 1px solid #000;
    border-collapse: collapse;
}
.demo3-2 td{
    padding:0;
}

デモ

デモでは、CSSに装飾系のコードが入っているので、説明してきた内容と若干相違があります。

See the Pen 2つ以上のブロック要素を中央寄せ by webfeelfree (@webfeelfree) on CodePen.

あとがき

今回は、2つのブロック要素で説明してきましたが、3つのブロック要素の場合でも基本は同じ親divの幅を超えないことです。
レスポンシブサイトが主流となってきていますが、その場合には相対値(%)で指定する必要があります。
その話は、またいづれ・・・。

Webサイトを作るときに、どうしてもこのタグで並べて中央寄せにしたいとか、この配置じゃなきゃダメなんだ等々、皆さんのよりセマンティックな構成のお役に立てれたら嬉しいです。

【2014.02.05 追記】
HTML4.01では「ブロック要素」、HTML5では「フロー・コンテンツ」というそうです。

最新記事

読まれている記事

ツイッター

カテゴリー