上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 とうとう前回までで、ブログの骨格が作れるまでになってしまいました。
 今回は、殆どの人がここで躓くであろう、ブログをセンタリングする方法です。


テキストのセンタリングと、落とし穴


 その前に、テキストをセンタリングする方法について、正確に把握しておきましょう。
 最もポピュラーにテキストをセンタリングするタグとして…

<div align="center"> ~ </div>

 こういう物があります。これはご存じの方が多いと思います。
 これ、当サイトで始めてタグに触れた人は、不思議なタグではないでしょうか?
 当サイトでは、スタイルシートから勉強していますから

<div style="text-align:center;"> ~ </div>

 このように書くと思います。
 これ、どちらも正しい書式で、上はタグだけで、下はスタイルシートから、文字を制御する方法です。表示は同じになります。
 で、スタイルシートを勉強する場合に躓くのが、

<span style="text-align:center;"> ~ </span>

 というミス。スタイルシートがだんだん使いこなせてくると、得意になってどんなタグにでもスタイルを当てて、カッコよく制御し始めます。(特に私の場合は…汗)
 しかし、これは想像したようにセンタリングはされません。
 同様に

<strong style="text-align:center;"> ~ </strong>
<b style="text-align:center;"> ~ </b>
<em style="text-align:center;"> ~ </em>

 こういうのもセンタリングされません。

 そうです、忘れ物です。「div」は「ブロック要素」、「span」は「インライン要素」と言うものでした。
 そう、タグでの「align="center"」や、CSSの「text-align:center;」は、ブロック要素でないと、使えないタグと言うわけです。


ブラウザごとに、特別な決まりごとがある

 そして、もうひとつ定義があって、ブロック要素の中にあるインライン要素はセンタリングするが、ブロック要素の中にあるブロック要素はセンタリングしない。という決まりごとです。
 但し、ブラウザによっては、ブロック要素の中身は、すべての要素をセンタリングする。という定義をしていることもあります。

…何が何だかわからなくなりましたか?
 以下に図例を示してみましょう。


FXの場合
<div align="center"> テキスト文字 </div>
<div align="center"> <div> divボックス </div> </div>
テキスト文字

divボックス


IEの場合
<div align="center"> テキスト文字 </div>
<div align="center"> <div> divボックス </div> </div>
テキスト文字

divボックス



 これを、どのブラウザでも適応するためには、スタイルシートに同じ表示をするための命令文を2つ書かなければならなくなります。




ブログのセンタリング

 ファイアフォックスで、ブロック要素をセンタリングするには、「margin」という命令文を使います。
「ボーダーの外側の空間」を指定する命令文でした。
「margin : 0 auto ;」と言う記述をします。
 この書式は、上下の空間、左右の空間をまとめて指定する書式でした→スタイルシートで遊ぶ part.2(<div>タグ編)
「auto」という数値は、「自動で等しい値を計算する」というもの。この命令文では、「上下の空間は0」「左右の空間は自動で」という意味です。

HTMLCSS
<div class="conteinar">

<div class="header">
ヘッダー
</div>

<div class="main">
メイン
</div>

<div class="side">
サイド
</div>

<div class="footer">
フッター
</div>

</div>
.conteinar {
width : 320px ;
border : 4px dashed #ff0000 ;
margin : 0 auto ;
}

.header {
width : 320px ;
height : 20px ;
background : #995555 ;
}

.main {
width : 190px ;
height : 100px ;
background : #559955 ;
float : left ;
}

.side {
width : 100px ;
height : 100px ;
background : #555599 ;
float : right ;
}

.footer {
clear : both;
width : 300px ;
height : 20px ;
background : #995599 ;
}
表示結果
ヘッダー
メイン
サイド
フッター


IEでも、ブロック要素をセンタリングする

 さらに、このスタイルシートに、IE用のセンタリングをかけてみましょう。

HTMLCSS
<div align="center">

<div class="conteinar">

<div class="header">
ヘッダー
</div>

<div class="main">
メイン
</div>

<div class="side">
サイド
</div>

<div class="footer">
フッター
</div>

</div>

</div>
.conteinar {
width : 320px ;
border : 4px dashed #ff0000 ;
margin : 0 auto ;
text-align : left ;
}

.header {
width : 320px ;
height : 20px ;
background : #995555 ;
}

.main {
width : 190px ;
height : 100px ;
background : #559955 ;
float : left ;
}

.side {
width : 100px ;
height : 100px ;
background : #555599 ;
float : right ;
}

.footer {
clear : both;
width : 300px ;
height : 20px ;
background : #995599 ;
}
表示結果
ヘッダー
メイン
サイド
フッター

 
 これで、だいたいどんな環境のパソコンで閲覧しても、ブログのセンタリングが出来ていると思います。
 ただ、注意しなければならないのが、「<div align="center"> ~ </div>」を使ってセンタリングしているので、ヘッダー内、メインボックス内のテキストから何から、すべてがセンタリングされています。
 それを回避するため、「旗印・コンテナブロック内(conteinar)」の要素をすべて「text-align : left ;」で、デフォルトに戻してやります。

 タグは今回「<div align="center"> ~ </div>」を使いましたが、「<center> ~ </center>」タグでも同じ効果が得られます。
 また、「body」要素に、スタイルシート側からセンタリングをかける方法もあります。

 また、「text-align : left ;」でデフォルトに戻した場合、IE系でまたちょっと微妙に表示が変になる場合が考えられます。
 その場合は、「text-align : left ;」で文字のポジションを戻す方法として、纏めて戻すのではなく、それぞれ必要なブロック要素に一つずつすべてに「text-align : left ;」を書き加える方法が考えられます。



☆実際にDIVボックスを、リアルタイムにフロートさせてみよう。
divフロートチェックツール(リアルタイム)

■次のステップは、いよいよテーブルタグです。
テーブルタグを理解してみる

■divボックスフロート徹底講座。
実際にdivブロックを記事で利用する

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Mon.03.29.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。