CSS

スマートフォンのサイトに限った話では無いですが、横幅(表示領域)によって要素の長さを変えたい時はあると思います。
今回は、横幅によってタブのサイズを変える必要が有ったのでその時の実装メモです。

flexible tabs – jsdo.it – share JavaScript, HTML5 and CSS

初期表示時と画面がリサイズ(スマートフォンの場合は、縦表示→横表示など)された際に、javascriptでタブのサイズを変更するようにしています。
※スマートフォン用に作成したので、IEなどのブラウザではうまく動かないかもです。。。

flexible tabs – jsdo.it – share JavaScript, HTML5 and CSS

擬似要素の:notと:last-childを組み合わせて指定します。

html

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

css

ul
{
    list-style-type:   none;
    text-align:        center;
}
li
{
    display:           inline;
}
li:not(:last-child):after
{
    content:           ' |';
}

:last-childで最後の要素を指定し:notで指定された要素以外を指定します。
つまり、最後の要素以外というセレクターができます。

2012-02-04 1st – jsdo.it – share JavaScript, HTML5 and CSS

擬似要素:before、:afterはその名前から、要素外側の前と後と解釈してしまいがちですが、実際は要素内側の前と後になります。

図で表すとこんな感じです。

一番使用するケースとしては、floatした要素の高さを出すために擬似要素にclearfixするという事が多いと思います。

例えば、ul、liタグでパンくずリストを作る場合、

<nav class="nav-topicpath">
    <ul>
      <li><a title="Home" href="/">Home</a></li>
      <li>Page1</li>
    </ul>
</nav>

ul, ol {
    list-style: none outside none;
}
a {
    color: #333333;
}
.nav-topicpath {
    background-color: #ffffff;
    font-size: 12px;
    padding: 3px 10px;
}
.nav-topicpath ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.nav-topicpath li {
    float: left;
}
.nav-topicpath li + li:before {
    content: ">";
    margin: 0 3px;
}
.nav-topicpath li a {
    padding: 3px 0;
}

※clearfixはスマートフォン用のものです。

topicpath – jsdo.it – share JavaScript, HTML5 and CSS

この場合、

<nav class="nav-topicpath">
    <ul>
      <li><a title="Home" href="/">Home</a></li>
      [[[ここに擬似要素afterが入る]]]
      <li>Page1</li>
    </ul>
</nav>

となります。
擬似要素は、要素のCSSも継承します。

clearfixのために空の要素を作ったり剃る必要が無いので、イイですね！

ひょんな事から、スマートフォンサイトのHTMLコーディングを最近しております。

スマートフォンサイトはバリバリHTML5が使えるので楽しいですね。

スマートフォンサイトのコーディングする際は、webkit系のブラウザかiOSシュミレーターのsafariである程度確認してから、実機で確認という流れで表示確認してたのですが、Windowsのsafariでもズレがないようにコーディングして下さいと上から申し出がありました。
※本当に対応する必要があったかは謎ですが。。。

Windowsのsafariでずれる原因はfontが”メイリオ”になってしまい、”ヒラギノ角ゴ”などと比べるとline-heightが高いので、水平に配置しても微妙にずれがでてしまってました。

他に影響が出ないようにと、工数が少ない中だった事もあり、今回はCSS Browser Selector.を使って、Windowsのsafariだった場合のスタイルを定義して対応しました。

これはホント便利ですね。