上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 徹底実用講座、divブロックfloat+CSS装飾編。ブロックのセンタリングです。
 最初から読むにはコチラから。
実際にdivブロックfloatを記事で利用する

 今回は、全体のレイアウトを修正します。


コーテイング用ブロックの修正

 前回までの縦書き講座、すべての文字が画面右端に寄っていて、かなり悪いバランスが気になったひとが多いと思います。
 これは、ブロック要素が、何かにぶつかるまで端から端に伸びるのが原因です。今回の場合、コーティング用のブロックが、右端から左端に伸びきっているためにそういう表示になります。

H T M L文書を縦書きにする 。
ブロ ックフロ ートテクニ ック 。
ブロ ック組みの練習にはも って来い !

(フロート解除ブロック)
5個のブロックの配置の様子。

 このような配置になっています。となると、コーティング用のブロックを、まず縦書き文書3行の幅にあわせてコンパクトにすれば、縦書き文書の配置全体をコントロールすることが出来るようになります。

 このとき、横幅がいくらかを計算します。

 文章の文字幅23px x 3行
 (文章ブロックのマージン右10px + マージン左10px) x 3行

 コレを計算すると、合計129pxが、現在の文字ブロックの全体幅になります。
 と言うわけで、コーティング用ブロック幅は、ブラウザ間の微妙な解釈の違いを考慮して、余裕を持たせて、150px幅ぐらいに設定してみましょう。

<div style="line-height:1; text-align:center; width:150px;">
 <div style="font-family:MS 明朝; font-size:23px; width:23px; float:right; margin:0 10px;">
 H T M L文書を縦書きにする 。
 </div>

 <div style="font-family:MS 明朝; font-size:23px; width:23px; float:right; margin:0 10px;">
 ブロ ックフロ ートテクニ ック 。
 </div>

 <div style="font-family:MS 明朝; font-size:23px; width:23px; float:right; margin:0 10px;">
 ブロ ック組みの練習にはも って来い !
 </div>

</div>
<div style="clear:both;">
(フロート解除ブロック)
</div>


 表示は以下のようになります。

H T M L文書を縦書きにする 。
ブロ ックフロ ートテクニ ック 。
ブロ ック組みの練習にはも って来い !

(フロート解除ブロック)



 このブロックをさらにセンタリングしてみましょう。
 センタリングで思い出すタグは「text-align:center;」ですが、このタグでブロック要素をセンタリングするブラウザはIEのみです。
 ブロック要素をセンタリングするときに有効なタグは「margin: 0px auto;」(上下の空間は0px、左右の空間は自動)のみと覚えておいてください。

 早速コレを適応してみると…

<div style="line-height:1; text-align:center; width:150px; margin: 0 auto;">
 <div style="font-family:MS 明朝; font-size:23px; width:23px; float:right; margin:0 10px;">
 H T M L文書を縦書きにする 。
 </div>

 <div style="font-family:MS 明朝; font-size:23px; width:23px; float:right; margin:0 10px;">
 ブロ ックフロ ートテクニ ック 。
 </div>

 <div style="font-family:MS 明朝; font-size:23px; width:23px; float:right; margin:0 10px;">
 ブロ ック組みの練習にはも って来い !
 </div>

</div>
<div style="clear:both;">
(フロート解除ブロック)
</div>


 実際の表示は以下のようになります。

H T M L文書を縦書きにする 。
ブロ ックフロ ートテクニ ック 。
ブロ ック組みの練習にはも って来い !

(フロート解除ブロック)



 いかがでしょう?
 これで、今回のdivブロックfloat徹底講座は終了です。

 このdivブロックを自在に操れるようになれば、どんなブログレイアウトも自分で作れるようになります。
 変なところ、例えば「ー」などは「|」に置き換えるとか、「。」は使わないとか、もう一行「。」専用の行を作って、行間を調整するとか、より自然な縦書き文書を構築することも可能です。

…が、あまりやりすぎると、検索エンジンが縦書きに成っている部分の文章を正確に認識できない可能性もあるので、ホドホドに☆


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