低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

[HTML]今さら人に聞けない「左・右・中央寄せが出来ない時の対処法」

今回もコーディング初心者向けのテクニックです。要素の位置を寄せたいとき、「スタイルで指定しているのにできない!」という時があるかと思います。その解決法です。

インライン要素を寄せるとき

text-alignを使います。

左寄せ

text-align: left

中央寄せ

text-align: center

右寄せ

text-align: right

text-alignは、インライン要素にしか適用されません。

ブロック要素を寄せるとき

marginを使います。

左寄せ

margin-right: auto

中央寄せ

margin: 0px auto

右寄せ

margin-left: auto

ただし、ブロック要素を寄せるときには、同時にその要素の横幅を指定しなければなりません。

また、IE6ではxml宣言があると、ブラウザ側が後方互換モードで表示してしまうため、margin:auto;が効かなくなります。そこで、IE独自の「text-alignがブロック要素にも適用される」というバグを利用し、IE6のみに適用されるハックを使ってbody全体にtext-align: centerを適用し、寄せたい要素にtext-align: leftやrightを使って任意の方向に寄せる、ということを行わなければなりません。

text-alignとmarginの違いとしては、text-alignは指定した要素の子要素が寄せられ、marginは指定した要素そのものが寄せられます。例えて言うなら、箱の中身に砂が入っているとして、text-alignは箱を傾けて砂をいずれかの方向に寄せ、marginは箱そのものをずらす、ということになります。

左右寄せ・中央寄せはレイアウトの基本なので、ぜひ覚えて活用してみてください。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ