2008年9月アーカイブ

最近は、ユーザビリティの観点から、文字サイズを固定せずに「%」表記や「em」表記をするのが望ましいと考えられています。

その際、ユーザがブラウザによって文字サイズを変更してする場合に、文字が重なってしまうことがあります。これは、CSSの設定で、文字の行間(line-height)に単位をつけて指定しているためです。

例えば、以下のように、行間の大きさよりも文字サイズが大きい場合、文字は重なって表示されてしまいます。

CSSコード

p {
   line-height:1.0em;
}

p span{
   font-size:2.0em;
}

(X)HTMLコード

<p>
   あいうえおかきくけこさしすせそたちつてと<br />
   なにぬねの<span>はひふへほ</span>まみむめも
</p>

このような場合には、行間の指定に単位をつけないようにします。

CSSコード

p {
   line-height:1.0;
}

p span{
   font-size:2.0em;
}

テーブルを使用すれば簡単にテンプレートを上下中央寄せできるのですが、ここでは、テーブルタグを使わずにテキストを上下中央揃えする方法を紹介します。

実はテンプレートを上下中央寄せする方法は2種類あります。

1.絶対配置でテンプレートを上下中央寄せ

テンプレート(サイトの大枠)をdivで囲んで、縦と横のサイズを決めます。絶対配置で基点をページの真ん中に配置、テンプレートの半分の大きさだけ、上と左にmarginで移動させれば、テンプレートをページの中央に配置することができます。overflowをhiddenに指定しておかないと、縦方向のコンテンツ領域がheightで指定したサイズより大きい場合は、スクロールバーが出てしまいます。

最小限CSSソースは以下のようになります。

CSSコード

div#wrapper {
   position:absolute;
   top:50%;
   left:50%;
   width:700px;
   height:410px;
   overflow:hidden;
   margin:-205px 0 0 -350px;
}

(X)HTMLコード

<div id="wrapper">
   <div id="header"> </div>
   <div id="contents"> </div>
   <div id="footer"> </div>
</div>

2.inline-block要素でテンプレートを上下中央寄せ

この方法は、本来ブロック要素であるdivをインライン要素にしてしまうというちょっとトリッキーな技です。

例えば、2つのコンテンツ(記事領域とメニュー領域)を横並びにして、左右中央寄せにする場合、displayにinline-block(Firefox用には-moz-inline-box;)を指定します。 そうすると「vertical-align:middle;」によって、縦方向のセンタリングが有効になるという仕組みです。

inline-blockはインライン要素なので、勝手にコンテンツが横並び状態になります。

CSSコード

#main {
   display: inline-block;/* Opera Safari用 */
   display:-moz-inline-box;/* Firefox Netscape用 */
   vertical-align:middle;
   width: 100px;
}

#sub {
   display: inline-block;/* Opera Safari用 */
   display:-moz-inline-box;/* Firefox Netscape用 */
   vertical-align: middle;
   width: 100px;
}

/* IE 6 */
* html #main,
* html #sub{
   display:inline;
   zoom:1;
}

/* IE 7 */
*:first-child+html #main,
*:first-child+html #sub{
   display:inline;
   zoom:1;
}

p {
   width: 100px;
}

(X)HTMLコード

<div id="main">
<p>中身</p>
</div><!--
--><div id="sub">
<p>中身</p>
</div>

この方法は、当サイトのコラムで詳しく解説しているので、そちらも参考にしてください。

テーブルタグを使わずにテキストを上下中央揃えする方法 [Cool Web Window]

ドロップキャップとは、段落の最初の文字を数行分大きくすることです。Microsoft Wordなどにある機能ですね。雑誌などでよく見る手法だと思います。

このドロップキャップ効果をCSSを使用すると以下のような記述になります。

CSSコード

p:first-letter{
   font-size:200%;
   color:red;
}

(X)HTMLコード

<p>
あいうえおかきくけこさしすせそたちつてとなにぬねの
</p>

ちなみに:first-letter擬似要素に指定できるプロパティは以下のものです。

  • font関連
  • color
  • background関連
  • text-decoration
  • text-transform
  • text-shadow
  • vertical-align
  • line-height
  • margin
  • padding
  • border
  • float
  • clear