表(table)の中央揃え:CSS入門

ブログが作りたい!CSS入門 > 表(table)の中央揃え:CSS入門

表(table)の中央揃え:CSS入門

表(table)の中央揃え:CSS入門

CSS入門(24)

今回は、表(table)を中央揃え(センタリング)します。お話は、次の順番で進みます。

▲ページの先頭に戻る

表(table)の中央揃え(センタリング)

1:前回までのお話

(01)

前回は、floatを使って、2段組みのレイアウトを行いました。

widthを使った幅の指定

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:今回、行うこと

(02)

見ていると表(table)が左寄りで気になります。今回は、表(table)を、中央揃えにしてみましょう。

表(table)を中央揃え

▲ページの先頭に戻る

3:text-alignであかんのかい!?

(03)

記事「文字の左右・中央揃え【text-align】:CSS入門」では、h1大見出しをtext-alignを使って中央揃えにしました。

それなら、表(table)もtext-alignで出来そうですが、残念ながら出来ません。この中央揃え(センタリング)ってのは、なかなか話がややこしいのです。

(04)

それでは、実際に出来ないことを試してみましょう。#blog-info(1:ブログの情報)の中の表(table)に、「text-align」をかけてみます。

(05)

ブラウザで表示してみましょう。あらやだ、table(表)の中の文章が中央揃え(センタリング)になっています。

text-alignで表(table)は中央揃えにならない

(06)

今度は、#blog-info(1:ブログの情報)に、「text-align」をかけてみます。(<div>タグにかけるわけです)

(07)

ブラウザで表示してみましょう。h2見出しは中央揃え(センタリング)になりましたが、table(表)は微動だにしません。

もう一度言います、text-alignで表(table)は中央揃えにならない

▲ページの先頭に戻る

4:それなら、<center>で、ええやないか!

(08)

「<center>タグを使えばいいじゃないの!パンが無いなら、ケーキを食べればいいじゃないの!」と思う人もいらっしゃるかもしれませんが、非推奨タグなので、残念ながら駄目です。

また、FC2ブログのプラグイン(HTML文)などでも使われている「align="center"」をタグに付ける方法も、本来、<center>タグと同じ意味なので推奨されるものではないようです。

▲ページの先頭に戻る

5:表(table)の中央揃え(センタリング)

(09)

前フリが長くなってしまいましたが、「表(table)の中央揃え(センタリング)」を行う方法を書きます。

次のように、<table>タグに対して、marginの左右に「auto」を指定することで、中央揃え(センタリング)できます。

とりあえず、「text-align: center;」は、削除しておいてください。

(10)

ブラウザで表示してみましょう。表(table)が中央揃え(センタリング)になっているはずです。

表(table)はmarginの左右に「auto」を指定することで中央揃えになる

▲ページの先頭に戻る

6:まとめ

(11)

試していただくと分かりますが、おそらく次のような場合には、「text-align:center;」で中央揃え(センタリング)できないはずです。

  • <table>タグ(表)
  • <img>タグ(画像)
  • <div>タグ(グループ)

などなど。

(12)

これらの対象を、中央揃え(センタリング)するときのポイントは、次の2点です。

  • 幅(width)を指定する。
  • 「margin-left: auto;」と「margin-right: auto;」を指定する。

tableなどのもともと幅(width)の値をもっている対象に対しては、幅を指定しなくても構いません。

▲ページの先頭に戻る

IE(Internet Explorer)の問題

実は、話はまだ終わりません。また、IE(Internet Explorer)のバグに対応しなければいけないのです。

1:IE(Internet Explorer)で見てみましょう

(01)

前項で、marginに「auto」を指定することで解決したはずの中央揃えですが、IE6で見てみると、中央揃えになっていません。

どうやら、IE6が互換モードになっている場合、及びそれ以前のIEブラウザは、バグによって中央揃え(センタリング)されないようです。

IEのバグで中央揃え(センタリング)されない

▲ページの先頭に戻る

2:IEのバグをバグを利用して中央揃え(センタリング)する

(02)

marginの「auto」に加えて、IEのバグ用の記述が必要です。IEのバグ対策には、「text-align:center;」を使います。

これは、バグに対して、バグで対応するという摩訶不思議なお話です。

#blog-info(1:ブログの情報)に、「text-align」をかけます。(<div>タグにかけるわけです)

(03)

IEブラウザで確認してみましょう。IEでもtableが中央揃え(センタリング)できましたが、h2大見出しまで中央揃えになっています。

h2大見出しまで中央揃え

さて、どうしたものでしょう?・・・どうするかは、そのときどきの状況に寄りそうです。

(04)

今回は、入門編なので、後で見たときに混乱しない方法で書いておきたいと思います。

まず、「text-center」というクラスを作成し、「text-align:center;」を記述しておきます。

(05)

<table>タグを、新たに<div>タグで囲み、クラス「text-center」を付けます。

(06)

IEブラウザで確認してみましょう。表(table)だけが中央揃えになっているはずです。

IEでも中央揃え

▲ページの先頭に戻る

3:他の方法

(07)

他には、<body>タグに「text-align:center;」をかけて、中央に寄せないタグを一括して「text-align:left;」してしまうのもひとつの方法かと思います。

もちろん、もっと良い方法があるかもしれませんけれど、そのサイト、ページ、更新する人のスキルを鑑みて、決めていけば宜しいかと思います。

ベストな方法はありません。何しろ、最もベストなのは、みんなが IEブラウザを使わないことです。

▲ページの先頭に戻る

参考サイト

今回の説明だけでは、そのときどきの状況に対応できまないはずなので、参考になるサイトをご紹介いたします。

おそらく、中央揃え(センタリング)に関するお話を書いている人は、ほぼ『Web標準普及プロジェクト』さんのページを参考にさせていただいているものと思います。きっちり書かれています。

また、『小粋空間』さんのページは、整理されて、とても分かりやすく書かれています。

▲ページの先頭に戻る

次回予告

次回は、リンクに関するCSSの指定について書く予定です。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/05/11 更新日:2008/05/11

« 「段組みレイアウト【float】」|「CSSでリンクを装飾する」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

tableのAlignをCSSでcenterにする方法、前ふりも含めてわかりやすかったです。非常に役に立ちました。これからも、役立つ情報を公開してくださいね。ありがとうございました。

ブロックレベルの中央揃え

ひかりさん、こんにちは!(・∀・)/
コメントありがとうございます。

お役に立てたようで、何よりです。
良かったわん。▼・ェ・▼ワンワン

No title

これは非常に参考になりました。
ありがとうございます。

参考

hpさん、こんにちは!( ・∀・)ノHappy Sunday
コメントありがとうございます。

お役に立ったようで、何よりでございます。

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/294-a89834f6
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて