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

 今回は、前回までの縦書き文書の文字の間の隙間に注目してみましょう。


行間・字間

 前回の文章では、あまりに行間が詰まりすぎ、あまりに字間が空いていました。コレを解消する方法を考えてみます。

 まず、一般的に、スタイルシートでの行間は「line-height:○;」、字間は「letter-spacing:○px;」で指定します。
 しかし、今回は、細いブロック内に文字を入力して、1字ごとに自動で「折り返し(改行)」させるようにして、強引に縦書きのように見せかけています。

 つまり、縦書きに見せかけているときのこの場合の字間は「スタイルシートでの行間」が指定されているために空いているものなのです。
 行間は、ほとんどすべてのテンプレートで指定してある、読みやすくするために必須のスタイルなので、ほとんどどんなテンプレートを使っていても、この隙間は空いてしまいます。

 つまり、コレを埋めるには「コーティング用の大きなブロックへ、ブロック内へ纏めて(line-height)を指定する」ようにすれば、その中にある全ての縦書きブロック3つとも同時に字間を調節することができるというわけです。

<div style="line-height:1;">
 <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文書を縦書きにする 。
ブロ ックフロ ートテクニ ック 。
ブロ ック組みの練習にはも って来い !
(フロート解除ブロック)



行間

 だいぶマトモになってきましたが、やや行間が詰まりすぎています。
 今回の縦書きフロートでは、実際は行間ではなく、「ブロック間」が詰まっているから、まるで行間が詰まっているかのように見えるのでした。
 ブロックの空間を調整するスタイルは「margin」「padding」ですね。となると、このどちらかでブロックの空間を取れば、「縦書き文書の行間があいたように見える」と言うわけです。
 今回は、margin,paddingどちらを使っても構いません。どちらを使うかはバックグランドカラーとボーダーがネックになってきますよね。
スタイルシートで遊ぶ part.2(<div>タグ編)

 とりあえず、今回はマージンで、横を10pxほど空けてみましょう。

<div style="line-height:1;">
 <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文書を縦書きにする 。
ブロ ックフロ ートテクニ ック 。
ブロ ック組みの練習にはも って来い !
(フロート解除ブロック)


 如何でしょう?
 かなり読みやすくなりました。


「HTML」が左によっているのが許せない!

 人は結構いると思います☆
 これも文章ブロック3つ纏めて「センタリング」のスタイルをかけてしまいましょう。

<div style="line-height:1; text-align:center;">
 <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文書を縦書きにする 。
ブロ ックフロ ートテクニ ック 。
ブロ ック組みの練習にはも って来い !
(フロート解除ブロック)

 これで、やや中央寄せに成功しました。
 どうして完全にセンタリング出来ないかというと…そう、「H」の横には半角スペース禁則処理のために存在していることの証拠です。

 どうしてもど真ん中に行かせたいと言う方は、「半角スペースの区切り」を「<br>タグ」に置き換えればOK。


■次回は、全体のレイアウト、センタリングです。
実際にdivブロックfloatを記事で利用する(ブロックのセンタリング)

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