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

 基本部分は前回で完了です。今回は細かいスタイルを実際に当てていき、美しいレイアウトに仕上げます。


文章を入れてみる

 まずは、実際に縦書きで入れたい文章を挿入していきます。実は普通に何も考えずに文章を入れると問題が発生します。

<div style="">
 <div style="font-family:MS 明朝;font-size:23px;width:23px;float:right;">
 HTML文書を縦書きにする。
 </div>

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

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

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

 こんな風に普通に文章を書いて、これを表示してみると…

HTML文書を縦書きにする。
ブロックフロートテクニック。
ブロック組みの練習にはもって来い!
(フロート解除ブロック)


 かなり崩れてしまいました。(IEでは、なぜか結構マトモに表示されていますが、他のブラウザでは崩れています。IEでは句読点にしか禁則処理が働いていないのかな?)


禁則処理

 これ、「禁則処理」と言うものが働いているせいで、おかしな表示になっています。
 小学生の作文の時間で習ったと思うのですが、日本語には書く上での決まりごとがあります。

「。」「、」「ー」「ッ」「ゃ」などの句読点など(約物…ヤクモノと言います)は、行頭に来てはいけません。コンピュータ上でも、日本語の「約物」が行頭にこないよう折り返す仕組みが出来ています。
 そのため、約物がくっついている前の文字は、コンピュータが折り返すことが出来ない決まりを忠実に守っているがために、強制的に約物がはみ出して表示されてしまうのです。

 この時思い浮かぶのが、IEの「word-break:break-all;」というスタイル。すべての禁則処理を無効にするスタイルの命令文ですが、残念ながらIEのみの対応なので、他のブラウザには使えません。

 仕方が無いので、禁則処理が働いている文字の前に半角スペースを入れていきます。

<div style="">
 <div style="font-family:MS 明朝;font-size:23px;width:23px;float:right;">
 H[半角スペース]T[]M[]L文書を縦書きにする[]
 </div>

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

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

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


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

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



 実はこの方法、注意事項が有って、半角スペース(恐らく全角も)自体にも禁則処理が働くため、見えないのですが、文字の横に半角スペースが表示されていることになっています。
 そのため、いくら文字をスペースで仕切っても、縦書き文字間に空白を開けることはできません。
 たくさん半角スペースを入れると、見えないですが、コンピューターの頭の中では半角スペースと言う「文字」が表示されているため、「カラム落ち」などの現象が発生することがあるので注意!

 文字間にスペースを開けて表示するには、改行タグ「<br>」を挿入します。




■次回は、文字間のスペース調整です。
実際にdivブロックfloatを記事で利用する(行間・字間)

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