タイトル背景上で左右に何かを分けて入れたい・サンプル01
絶対配置で右側に何か入れちゃう版の実際のサンプルはこんな感じ。
タイトル背景上で左右に何かを分けて入れたい
右側のアイコンは別にテキストでも何でもいいんだけど、なんせその右側に寄せたい部分に何の工夫もなく「text-align:right;」なんて指定しても言う事聞かないので、絶対配置で右側に寄せます作戦。タイトルテキスト部分は普通にhタグの中身として入力して、右側のアイコン部分をspanで囲む。
右側の絶対配置部分もテキストの場合はこんな感じ。(↓)
タイトル背景上で左右に何かを分けて入れたい右もテキスト
アイコン画像とかの場合はどっちゃでもいいんだけど、右側もテキストにする場合は、span内で「line-height」か何かで適当に調節してやらないと、左側のメインテキストとテキストのラインがズレる可能性あり。
もちろん左右分けてリンクを設置する事も可能なので、長いページで右側のアイコンを「ページトップへ」とかにしてページの先頭へリンクするのも便利かも。右側に置くアイコンを数種用意する場合、spanに対して背景画像として扱ってclassごとに切り替えても楽かなぁ。
cssソース
h3.sample01{
background:url(title_bg.gif) no-repeat left top;
position:relative;/* ここが右側span部分の絶対配置の基準 */
width:560px;
height:30px;
font-size:90%;
line-height:220%;
font-weight:bold;
color:#fff;
text-indent:20px;
}
h3.sample01 span{
position:absolute;
top:5px;
right:10px;
line-height:160%;
}
xhtmlソース
<h3 class="sample01">タイトル背景上で左右に何かを分けて入れたい<span><img src="icon_new.gif" alt="New" width="62" height="18" /></span></h3>
<h3 class="sample01">タイトル背景上で左右に何かを分けて入れたい<span>右もテキスト</span></h3>
タイトル背景上で左右に何かを分けて入れたい・サンプル02
今度は「float」を使った作戦。
右側部分のspanに対して「float:right;」を指定し、paddingで位置調整。が、IEとその他で右側の画像位置がズレる･･･。なんかさらに工夫要。
タイトル背景上で左右に何かを分けて入れたい
で、右側をテキストにしたケース。
右側テキストタイトル背景上で左右に何かを分けて入れたい
テキストにしたら「line-height」で調節してやればズレは気にならない。
cssソース
h3.sample02{
background:url(title_bg.gif) no-repeat left top;
width:560px;
height:30px;
font-size:90%;
line-height:220%;
font-weight:bold;
color:#fff;
padding-left:20px;
}
h3.sample02 span{
float:right;
padding-top:4px;/* ここで上までの余白を整えたいと思ったけど、IEとその他でズレが･･･ */
padding-right:10px;
line-height:180%;/* テキストの場合はここで調節してやれば問題なさげ。 */
}
xhtmlソース
<h3 class="sample02"><span><img src="icon_new.gif" alt="New" width="62" height="18" /></span>タイトル背景上で左右に何かを分けて入れたい</h3>
<h3 class="sample02"><span>右側テキスト</span>タイトル背景上で左右に何かを分けて入れたい</h3>
で、もっと素晴らしいやり方が「Lucky bag::blog: エントリー毎のカテゴリをCSSで調整」こちらで紹介されていた･･･。目から鱗状態でした。天才だ～。
こういった背景化のデメリットはタイトルテキストがイレギュラーに長くなって複数段になった場合がパっと頭に浮かぶが、Lucky bag::blogさんの場合だと、タイトルが複数段になった場合でも背景がちゃんと追従して対応してくれる、かつ、右側に配置してある部分にテキストが重なるのを回避して下の段にテキストが表示される(と思う。ソースを見た感じそうなる気がした。検証未。)
今回私が出したサンプルだと当然絶対配置なのでレイヤーが重なったみたいな状態になってて、タイトルが長くなったらその下に重なって表示されてしまう。･･･つーことでイレギュラーに長くなったタイトルテキストはテキストの見直しが迫られるという罠。
タイトルが長くなっても背景が複数段に対応してついてくる方法はまた今度･･･というか、Lucky bag::blogさんのソースを拝見すればよくわかるのでそちらを･･･。ただねぇ、ごっついビジュアルにこだわるデザイナさんの書いたデザインはそういうイレギュラーに対応する事を前提にしてないケースも多くて・・・。ってまた愚痴が始まりそうなのでこのへんで。
