--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年12月06日

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

はじめに

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


センタリングの方法(インライン要素)

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


CSS編集で追加するコード
/*センタリング(インライン要素)*/
.textcenter
{
text-align:center;
}

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

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


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


061207pic1.jpg
「それぞれは カワイイされる 画像かな」

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

 ポラロイド風の枠など装飾した画像や表などのブロックレベル要素は、ブロックレベル要素の幅を決めて、左右の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>


061207pic2.jpg
「あの記事で 準拠するのは 飾りなり」

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

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

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


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


061207pic3.jpg

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

参考にした記事の紹介

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


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

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


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

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

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

メイン

≪New BlogPetぺたぺたランキング発表! 俳句を求めて三千里 10000ぺた記念編@後姿ラブリー同盟 | Top | BlogPet10000ぺた「うさも」のキリぺた記念 俳句を求めて三千里 狙い撃ち編@後姿ラブリー同盟 Old≫

トラックバックURL


コメント

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

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

コメント

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

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

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

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

コメント

yozo ちゃま♪

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

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

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

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

コメント

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

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

コメント

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

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

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

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

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

コメント

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

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

>待ってました!センタリング!!さっそく挑戦してみましたよ~♪
たった今、お邪魔させていただきましたよ。ばっちりセンタリングできていましたね。
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!

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

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

コメント

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

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

コメント

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

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

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

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。