Strings of Life

paddingプロパティでリンクエリアを拡張する

ナビゲーションボタンの縦幅は44px以上が望ましいとされているが、14px～16px程度の文字に<a>タグでリンクを貼る場合も多い。そのようなときに有効となるテクニックが、paddingで<a>タグのタップ可能領域を広げてやること。文字サイズを維持しつつ、ユーザビリティを向上させることが出来る。

・html

<nav class=”nav-topicpath”>
    <ul>
      <li>a</li>
      <li>b</li>
　（ここに擬似要素が入る）
    </ul>
</nav>

・CSS

.nav-topicpath ul:after{　←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入
content: “”;　←contentプロパティで擬似要素として””（中身なし）を挿入
display:block;
clear:both;
}

なお、擬似要素としては他にも :before があり、要素の開始タグの直後に要素が挿入される。

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時（nav→div）や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて（例：<nav class=”nav-topicpath”>）、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display:block;
}

HTML5で追加された新要素の場合、ブラウザーによってはdisplayのデフォルト値がセットされていないことがある（Firefox3.6ではheaderがインライン要素になってたような…）。ブロックレベルに該当する要素には、あらかじめ display;block をかけておくと安心。

window.addEventListener(‘load’,
function(){
    setTimeout(function(){
    scrollTo(0,1);
    },100);
}, false;

※↑にはミスタイプの可能性があるのでコピペは非推奨