OneLittle STUPID New T-shirts!! 通販開始! Movable Type Template RGM-79C
マイメロメロメロミメロメロアワセテメロメロムメロメロなSTUPID BLOG 趣味SIDE
2004年5月17日

文字を一部隠してみる

このサイトのサイドバーのサブタイトル部分で太字&下に線付、文字の下の部分が切り取られてるようにするにはcssを、

.subtitle {
font-family: Hiragino Kaku Gothic Std,"MS Pゴシック", "Osaka", "ヒラギノ角ゴ Std W8", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
margin: 0px 0px 0px 0px;
height: 10px;
overflow: hidden;
letter-spacing: -0.1em;
border-bottom: solid 1px #333333;
width: 160px;
}

htmlのソースは、

<div class="subtitle">こんな感じにすると出来ます。</div>

実際に適用すると、

こんな感じにすると出来ます。

heightでブロックの高さを決めてfont-sizeでブロックのサイズからはみ出る高さを設定して、overflow: hidden;ではみ出した部分を隠すように設定。widthで横幅も決めているので長い文章だとwidthで設定した長さを超える部分も隠されちゃいます。letter-spacingは文字の間隔の設定で若干ここでは詰めています。

本当はもっと大きいサイズでやった方が効果的なんだけど配置場所がサイドバーだったのでこのサイズにしています。

[ css ]
Posted by 骨兎 at 15:24 このエントリーを含むはてなブックマーク

Post a comment