ブロックレベル要素のセンタリング（CSS編集） yozoの気が向いたと記2.0

ブロックレベル要素のセンタリング（CSS編集）

はじめに

　画像や表などを記事の真ん中に配置する（センタリングする）とき、以前では、<center>や<div align="center">を使用するのが当たり前でした。これらの方法は簡単で便利だったのですが、HTML4.01では非推奨、XHTMLでは使用できません。『センタリングはCSSでする』というのが正しい方法になっているようです。

センタリングの方法（インライン要素）

　画像や表などを記事の真ん中に配置する方法は大きくわけて２つあります。文字や画像（img）などの※インライン要素は、text-align:center;でセンタリングします。
※インライン要素について詳しくはコチラ→CSS編集をしましょう

CSS編集で追加するコード

/*センタリング（インライン要素）*/
.textcenter
{
text-align:center;
}

センタリングのソースコード

(センタリングするときは下の通りに入力します。)

<div class="textcenter">センタリングしたい文字や画像</div>

「それぞれは　カワイイされる　画像かな」

センタリングの方法（ブロックレベル要素）

　ポラロイド風の枠など装飾した画像や表などの※ブロックレベル要素は、ブロックレベル要素の幅を決めて、左右のmarginをautoしてセンタリングします。
※ブロックレベル要素について詳しくはコチラ→CSS編集をしましょう

CSS編集で追加するコード

/*width:150px;のセンタリング*/
.photocenter
{
margin-left: auto;
margin-right: auto;
width:150px;
}

※ここでは画像の幅130pxの左右にそれぞれ10pxのpaddingを設定
していますから、10+130+10＝150pxをwidthとして設定しました。

センタリングのソースコード

(センタリングするときは下の通りに入力します。)

<div class="photocenter">センタリングしたいポラロイド風の枠など装飾した画像や表</div>

「あの記事で　準拠するのは　飾りなり」

IE6.0でもセンタリングを有効にする方法

　この記事をIE6.0でご覧になっている方は、上の画像がセンタリングされていないと思います。これはIE6.0のバグなのだそうです。それでもIE6.0を使用される方が圧倒的に多いですので、IE6.0でもそれ以外のブラウザでも、センタリングできるようにしましょう。上記の設定に加えて、text-align:center;をさらに設定すればＯＫです。特に追加するCSSコードはありません。次のように入力してください。かなり面倒ですが、これでどんなブラウザでもブロックレベル要素のセンタリングが可能となります。yozoもこの方法を使用しています。

センタリングのソースコード

(センタリングするときは下の通りに入力します。)

<div class="textcenter"><div class="photocenter">センタリングしたいポラロイド風の枠など装飾した画像や表</div></div>

「この自分　注意したれば　画像かな」

参考にした記事の紹介

　いつもお世話になっている小粋空間のyujiroさんの記事CSSでブロックレベル要素をセンタリングするを見て、はじめて、ブロックレベル要素の正しいセンタリングの方法が理解できました。このyujiroさんの記事と、紹介されている、Web標準普及プロジェクト様の記事ブロックレベル要素をセンタリングする方法を参考にさせていただきました。m(_ _)m

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:カスタマイズ:ブログ

yozoさん、こんばんは♪(^▽^)/
このセンタリングの件では本当にお世話になりました～。
センタリングなんてただtext-align:center;を入れておけばOKだと
思っていたのですが。(^^;;
インライン要素とブロック要素でやり方が違うだなんて思ってもみませんでした。
きっとこれからいろいろカスタマイズなどをやる上でこういったことは
しょっちゅう起こるんでしょうね。本当に日々勉強しなければいけませんね!!

とっても分かりやすい記事をありがとうございました♪(*- -)(*_ _)ペコリ

Posted by まゆび at 2006.12.06 23:15 | edit

＞まゆびさん、おはよーございまっす♪

＞センタリングなんてただtext-align:center;を入れておけばOKだと思っていたのですが。
あはは・・・恥ずかしながらyozoもそう思っていました。ヾ(￣o￣;)ｵｲｵｲ
IE6.0でセンタリングできるのに、どうして他のブラウザではだめなのかよくわかっていませんでしたよ。CSSの本にあるmargin:auto;でもIE6.0はセンタリングできないし・・・yujiroさんの記事で納得だったんですよ。お互いyujiroさんに感謝しなきゃいけませんね。(^○^)

＞本当に日々勉強しなければいけませんね!!
トライ＆エラーでしょうね。カスタマイズを楽しむつもりでのんびりいきましょうか。
できないことでも、どこかで誰かが問題を解決しているかもしれない・・・
Net世界は本当に広いですね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

追伸：遅まきながら紹介してくださった記事にトラバ入れさせていただきました。m(_ _)m

Posted by まゆびさんへ at 2006.12.07 11:15 | edit

yozo　ちゃま♪

こんばんわぁo(^-^ o )(ノ ^-^)ノゃぁゃぁ♪
何日か　お母さん役してました。
風邪はなかなか　治らないですけど。　(;^_^A アセアセ・・・

いろいろ　タグがあるんだよね。
以前HPの頃は　結構　覚えてたけど。
今は手抜きのサイトになってるかなぁ？？？

cssも勉強　しなきゃ・・・　ダメだな　σ(*^^*)ミユー♪
少し、時間ができればと思いつつ・・・　時間があると　背景作ってるからなぁ。

また、お勉強させてもらって、キャプの紹介に使わせてもらいます。
使用報告　どうも、ありがとう　(o*。_。)oペコッ

Posted by ☆(。・・。)mew☆*･゜ at 2006.12.07 17:26 | edit

yozoさん　こんばんは～★お久しぶりです（*´▽`*)
だんだん寒くなってきましたね。
お元気でお過ごしですか？

待ってました！センタリング！！
さっそく挑戦してみましたよ～♪
yozoさんのわかりやすい説明のおかげで
なんかすんなり出来ちゃってすごーーく嬉しいです。
どうもありがとうございました<(_ _)>
ＴＢもさせていただきました(*^_^*)
また色々なカスタマイズ　楽しみにしていま～す♪

Posted by miyu at 2006.12.07 17:28 | edit

＞σ(*^^*)ミユー♪ちゃま、こんばんはー♪

＞何日か　お母さん役してました。風邪はなかなか　治らないですけど。(;^_^A アセアセ・・・
あらら・・・無理しちゃたのですね♪でも、ボールを外すわけにはいかなかったですもんね。
今度は、みんなに心配かけないようにしなきゃいけませんね♪　(*^-^)

＞以前HPの頃は　結構　覚えてたけど。今は手抜きのサイトになってるかなぁ？？？
いえいえ♪ブログの場合は、記事がとっても書きやすいので、気にならなくなっただけだと思いますよ。それに忘れたって調べればすぐに思い出しますもんね　(^○^)

＞少し、時間ができればと思いつつ・・・　時間があると　背景作ってるからなぁ。
ふふふ・・・ブログですからね。その気になったときでいいのだと思いますよ。
楽しむはずがストレスになっちゃうと続かないですもんね。ドンマイ♪

＞また、お勉強させてもらって、キャプの紹介に使わせてもらいます。
ちょっぴり、お役に立てそうで、うれしーですよ♪　(*^-^)
とっても励みになりました。ありがとーございまっす♪m(_ _)m

Posted by σ(*^^*)ミユー♪さんへ at 2006.12.07 18:36 | edit

＞miyuさん、こんばんはー♪

＞だんだん寒くなってきましたね。お元気でお過ごしですか？
本当に寒くなりましたね♪miyuさんはお元気ですか？(*^-^)
yozoはおかげ様で元気一杯ですよ。ありがとーございまっす♪　m(_ _)m

＞待ってました！センタリング！！さっそく挑戦してみましたよ～♪
たった今、お邪魔させていただきましたよ。ばっちりセンタリングできていましたね。
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!

＞yozoさんのわかりやすい説明のおかげで
＞なんかすんなり出来ちゃってすごーーく嬉しいです。
(*ﾟｰﾟ*)ポッありがとーございまっす♪ちょっぴりお役に立ててうれしいですよ。
これからも参考になる記事を書けるように＼(*⌒0⌒)ｂがんばっ♪ しまっす(^○^)

追伸：記事での紹介及びトラバありがとーございまっす♪
こちらからもお返しのトラバさせていただきました。m(_ _)m

Posted by miyuさんへ at 2006.12.07 18:59 | edit

ｙｏｚｏさんお邪魔しまっす
センタリング助かりました～ありがとうございますm(_ _"m)
先日の件は記事の投稿形態自体を変えなければ解決しないことが分かりました

のんびり解決していきたいと思いますm(_ _"m)

Posted by ウッキ at 2006.12.08 18:34 | edit

＞ウッキさん、おはよーございまっす♪

＞センタリング助かりました～ありがとうございますm(_ _"m)
お役に立ててうれしーですよ。こちらこそ、いつも応援ありがとーございまっす♪　m(_ _)m

＞先日の件は記事の投稿形態自体を変えなければ解決しないことが分かりました
＞のんびり解決していきたいと思いますm(_ _"m)
「投稿形態」を変えないと・・・ですか？ご自分の投稿で防ぐことができるのでしたら、なんとかなりそうですね。ラブログ側の投稿時の設定が原因ならどうしようもないかもしれません。
いずれにしても、原因がわかったとのこと。よかったですね。(^○^)

Posted by ウッキさんへ at 2006.12.09 09:28 | edit

yozoの気が向いたと記2.0

BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪

スポンサーサイト