人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

「タイトル」「Edit Del スイッチ」構造の見直し 文字背景に拘る

2014年 05月 03日
以前から何度か弄っていた「タイトル」の構造を再び手直し。

何故手直しを繰り返して来たかというと、
1)タイトル枠はデザイン上で投稿文の幅いっぱいに拡げたものにしたい。
2)タイトル枠の右隅にLOG-IN 後に表示される「Edit Del」スイッチを置きたい。
3)タイトル枠の背景色と異なる「Edit Del」スイッチの背景色を表示させたい。
4)スイッチ背景色は、LOG-OUT状態では表示されては駄目。
5)スイッチ背景色は、タイトル枠幅の高さ全てに達していること。
6)ブラウザ文字サイズの最大でタイトル枠の高さが最大になっても 5)を満たすこと。
7)スイッチの文字サイズは12pt固定で、タイトル枠の高さに一切影響しないこと。

以上の様なデザインを満足させるものを実現するのは、案外と難しいのです。
今回、DOMの助けを借りて、マイナスmarginを利用することで、かなり上手いところまで来ました。



タイトル部のHTMLは基本的な1行2段のtableを使った表記に戻しています。

タイトル部のHTML
<div class=POST_HEAD>
    <table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div class=POST_TTL><$postsubject$></div>
</td>
<td>
<div class=POST_ADM><$postadmin type=2$></div>
</td>
</tr>
</table>
</div>

これに対するCSSは以下です。
div.POST_HEAD { 
    margin-top: 25px;
margin-bottom: 20px;
border: 1px #AAA solid;
background-color: #D7E3EC;
overflow: hidden; }
.POST_HEAD td:nth-child(2) {
width: 0px; }

div.POST_TTL {
font-size: medium;
font-weight: normal;
padding: 8px 0px 4px 20px; }

div.POST_ADM {
font-size: 12pt;
font-weight: normal;
text-align: center;
background-color: #ACD6F4;
border-left: 1px #AAA solid;
line-height: 400%;
margin: -30% 0% -30% -50%;
white-space: nowrap; }



以下、CSSの説明です

最初の項「div.POST_HEAD 」の「overflow: hidden;」は、タイトル枠からはみ出す内容を表示させない指定。 これが無いと後述の「行幅400%」の文字背景色が露出してしまいます。

第2項「.POST_HEAD td:nth-child(2)」は、HTML上の赤の「td」(テーブルデータ)の2個目、「<div class=POST_ADM>~</div>」のあるテーブルセルを指します。 要は「Edit Del」スイッチのセルですが、この「width: 0px;」は、そのセル幅の初期値を「0px」と指定します。
LOG-IN後には、スイッチが実体を持って現れてセル幅が拡げられますが、この指定が無いと、LOG-INの前も後もセル幅が過剰に広くなります。 これは tableの本来の機能が、内容に合わせ適当なセル幅を割付けるためです。 「0px」指定がない場合はスイッチ側セル幅は、左側のタイトル文字数が少ないほど顕著に拡大します。 下図の3つ目の例は、右セル幅が拡張されてデザイン崩れを生じています。

「タイトル」「Edit Del スイッチ」構造の見直し 文字背景に拘る_b0174191_03113447.png



最後の項「div.POST_ADM」のline-heightmarginの値は、記述の肝心の部分です。

「タイトル」「Edit Del スイッチ」構造の見直し 文字背景に拘る_b0174191_03120141.png

上図は、IEの表示文字サイズ「大」の設定でのタイトル右端の状態です。
左側は、青の3行の指定がない場合。
中央は「line-height: 400%」だけを指定した文字背景色の様子。
右側は更にセルの「左右のマージン」を「-40%」とし、セルの左枠線を描画したもの。

行幅「400%」は、文字背景色でタイトル枠を埋めることを目的にしていますが、値が大きすぎてタイトル枠を縦に押し広げています。 また、スイッチ文字の左右の余裕が欲しいのですが、左右マージン値を「+50」等では文字が右枠外に押し出されます。 マイナス値とすると、左側だけですが余裕が出来ます。

ここで、上下のマージン値を色々と調節してみると、興味深いことが判って来ます。

「タイトル」「Edit Del スイッチ」構造の見直し 文字背景に拘る_b0174191_03120548.png

上下マージン値が「+10%」では、枠は更に縦に拡げられ、背景色に途切れが出ます。「0%」は先の状態で途切れはなくなり、マイナス側にすると枠は高さを低くして行きます。 「-16% 」以下では常に、左側セルのタイトル文字サイズに応じた正常な枠の高さになりますが、「-40%」を超えるとスイッチ文字が上にズレ始めます。

上下マージン値を「-16% ~ -40%」の範囲で指定すれば、文字背景色を途切れなく枠内に拡げ、且つ枠の高さに影響を与えないことが可能になるわけです。 こういうトリックは、CSSデザインの常識かもしれませんが、現在のところ一番上手い手法に思えます。



以上はIEの表示文字サイズ「大」での結果ですから、文字サイズを「最小」~「最大」と変化させて正確に調べてみました。
  文字サイズ  最大 -14% ~ -43%
  文字サイズ  大  -17% ~ -43%
  文字サイズ  中  -19% ~ -43%
  文字サイズ  小  -22% ~ -43%
  文字サイズ  最小 -23% ~ -43%
上の範囲で、枠サイズに影響が出ない様子です。
IEの表示文字サイズが小さいほどタイトル枠の高さは小さくなるので、影響の出ない範囲がシビアになる様です。 「影響を与えたくない」タイトル枠の高さにより、適したマイナスマージン値が変わりますから、スキンにより適当なマイナス値を調べる必要があるでしょう。

私の場合は中間の「-30%」としておけば、他ブラウザの極端な設定でも問題が出ないと判断しました。



スイッチ文字の左右の余裕ですが、左右のマージン値を個別に設定することで解決できました。

「タイトル」「Edit Del スイッチ」構造の見直し 文字背景に拘る_b0174191_03121313.png

マージン値の4値の表記は、
  margin: 上マージン 右マージン 下マージン 左マージン
と時計周りですが、
  上図の左側は、右マージン「-50%」左マージン「-50%」とした場合
  上図の右側は、右マージン「 0%」左マージン「-50%」とした場合
これで、上手く調節できました。



ちょっと考えると、LOG-IN時にしか幅を持たないセル「td」の背景色を設定すれば、苦労して文字背景色を拡張する必要が無い様に思えます。 しかし、試しに「td」の背景色を「赤」に設定すると下図の様に背景色は一部に限られてしまいます。

「タイトル」「Edit Del スイッチ」構造の見直し 文字背景に拘る_b0174191_11140821.png

これは「td」セルの実体にしかその背景色が描かれないからです。
また、スイッチ文字に「padding」を設定すると、この赤い範囲は文字周囲に拡張します。 しかし、今度はLOG-INしない状態でも padding幅分の赤帯が露出してしまいます。 最初に挙げた条件を満たすのは、やはりこの方法しか無い様です。



HTMLの構造自体を根本的に変えることで、良い方法があるかもしれません。
○ tableを2行にして「position: relative」等で重ね合わせて表示する
○ tableを使わず、divの入れ子構造とし「float」や「position: relative」を使う
等ですが、タイトル枠の高さをタイトル文字サイズにのみに関連させるには、やはり工夫が必要と思われます。



by Ataron | 2014-05-03 10:01 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。