CSSの最近のブログ記事

CSS で簡単に上下中央揃えを実現する

テキストや画像などの要素を、ボックスの縦中央に揃える方法がこちらで紹介されています。

webサイトで明朝を指定することはあまり多くないと思いますが、
それでもたまに明朝にしてほしいという希望がくるたびに
なんとかアンチエイリアスのかかったフォントを使えないものかと思っていました。

Macはヒラギノ明朝がありますが、Windowsは標準があれなので・・

他に標準搭載されている明朝フォントもないし・・と諦めかけていたところ、
こちらにとても参考になる記事がありました。

Creazy!
http://creazy.net/2007/08/windows_anti_alias.html

なんと、HG明朝E系は13pxからアンチエイリアスがかかるそうです。

OS標準ではありませんが、HG明朝はMicrosoft Officeが入っているPCならば
インストールされていますので、ほとんどの場合で表示できます。

少なくとも、指定しておく価値はあります。


これで今後は、明朝フォントも多少気軽に使えそうです。

以前の記事、「div内でfloatを使うときの注意点」で書いた通り、
大枠の div の height を中身の要素（floatあり）に合わせて伸ばすには、
大枠の div に overflow:hidden; を指定するという方法があります。

しかし、これだけではIE6では上手くいかなことがあります。

前記事の例では自然に指定していましたが、
overflow の指定だけではなく、width の指定も必要だったようです。
（そうしないと、中身の要素が折り返される場合に計算ができないのだとか・・）

ということで、前記事の方法を使う場合は、

・overflow:hidden;
・width:○○○;

この2つを指定しましょう。

上図のような表をdlで作成する場合、
今まではdt、ddにきっちりwidthを指定し、
それぞれにborder-bottomを指定。
dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。
でも、「う」の段のように、ddのテキストの行数がdlよりも多いと
border-bottomがずれてしまいます。
ならborder-top指定すれば？と思いますが、
「え」の段のように、逆にdtのテキストの行数が多いと
「お」の段が回り込んでしまいます。
そうすると、一段ずつdlにするというような
何とも不細工なソースになってしまっていました。

調べてみると、下記の様にすればで崩れずソースもきれいなままです。
それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。
ddには、dtのwidth分のpadding-leftとborder-bottomを指定、floatとwidthの指定はナシ。

具体的にはこんな感じです。

--------------

dl{
width:500px;
list-style:none;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background:url(dtについている色を画像で指定) repeat-y left top;
overflow:auto;
}

dt{
clear:both;
width:100px;
float:left;
}

dd{
border-bottom: 1px solid #999999;
padding:0 0 0 100px（dtのwidth分）;
}

--------------

リストなどで1行が長くなってしまうと、

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜ストテキスト
｜※テキストテキストテキ

折り返されてこのようになってしまいます。
ですが、折り返されたあとは※ではなく文字の初め（テキストの"テ"）に
合わせたいということが殆どかと思います。

今まではpaddingと背景画像を使って再現していたのですが、
もっとずっと楽な方法があること知ったのでメモしておきます。

上の例がリストであるとして、ソースはこのようになっていると思います。

<ul>
<li>※テキストテキスト</li>
<li>※テキストテキストテキストテキストテキスト</li>
<li>※テキストテキストテキ</li>
</ul>

まず、この<li>タグに左paddingを指定します。
1文字分、と指定するのがいいと思いますが、崩れる場合もあるようなので
そのときはピクセルで。

padding-left:1em;　または　padding-left:12px;　など

これで一文字分、右にずれることになります。

｜　※テキストテキスト
｜　※テキストテキストテキストテ
｜　キストテキスト
｜　※テキストテキストテキ


次に、行の先頭だけ左にずらします。

タグにtext-indentを指定します。

text-indent:-1em;

これで頭だけ左にずれ、改行後の先頭はテキストに揃う形になります。

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜　ストテキスト
｜※テキストテキストテキ


それにしても、text-indentなんてまさにこういう用途のために
用意されているようなクラスですよね・・
もしくは先頭1文字下げるとか。

普段、画像置き換えのために文字を吹っ飛ばすくらいしか
使っていなかったので、目から鱗な気分です。

最近、display:inline-block; を良く使っています。

名前の通り display:inline; と display:block; の性質を持っていて、
指定したタグの内側はblock要素、外側はinline要素になります。

なので、
・ボックスが横並びになる
・vertical-align が使えるようになる
・（上の2つを）height を決めなくても使える
というメリットがあります。

ボックスを横にならべるのは float:left; でも問題ないのですが、
繰り返し並べて自動改行される場合は
height を合わせないとズレてしまうことがあります。


使い方は以下のようになります。
タグが1つ増えてしまうのが欠点でしょうか＾＾；


■CSS

.sample {
width: 200px;
display: -moz-inline-box; /*FireFox2以下用*/
display: inline-block;
/display: inline; /*IE7以下用*/
/zoom: 1; /*IE7以下用*/
}

.sample div{ /*FireFox2以下用*/
width:200px;
display:block;
}


■HTML

<div class="sample"><div>内容</div></div>

いくつかのブラウザに対応させるために
少し記述が多くなりますが、使う価値はあると思います。

↑のように、大枠となる div の中に複数の div を入れ、
float を使って並べるときの注意点です。

以前の記事 【CSSトラブル】　marginが無視される とはまた違う例です。

★HTML
＜div id="box1"＞
＜div id="box2"＞
＜/div＞
＜/div＞

★CSS
#box1{
　　　margin:40px;
}

#box2{
　　 margin:20px;
}

としたときに、



上のように表示されるはずが、



このように、 box2 の上下部分の margin が無視されてしまいます。

これも同じく margin を padding に変えるか、
できるのなら外側の box1 に、width か height を指定することで
解決することができます。

div 内の要素を下揃えにする方法です。


大枠の div を「A」、そのなかで下揃えにしたい要素を
div で囲って「B」とします。

■ divA の設定
・height を指定する
・position:relative; と入れる

■ divB の設定
・position:absolute; と入れる
・bottom:0; と入れる（ピクセルで下からの高さを指定できます）


これで、divA 内で divB を下揃えにすることができます。