スマートフォン用reset.cssのa要素にdisplay:blockはよくないかもしれない

今までreset.cssに書いてましたが、これだと何かと不都合な場合があることに気がついた。
例えばこんな時。

<p>
吾輩は猫である。名前はまだないので<a href="#">こちら</a>で受け付けている。<br>
メールでも受け付けている。<br>
mail:<a href="mailto:wagahai@nekodea.ru">wagahai@nekodea.ru</a>
</p>

このような場合にdisplay:blockにしてると、「こちら」とメールアドレスが勝手に次の行に落ちることになる。

基本的にli要素内のa要素だったり、ボタンっぽいものさえ、タップしやすくなってたらいいと思うので、こんな風に書き換えることにした。

li a {
    display: block;
}

/* p要素用class */
.btn {
    padding: 1em 0;
    text-align: center;
}

/* 値はお好みで */
.btn a {
    padding: 14px 24px;
    background: #F00;
    border: 2px solid #FFF;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14);
    color: #FFF;
}

たいていの場合、ボタンっぽいものは中央に寄せたいので、p要素のclassにbtnをつけてtext-align:centerで中央揃えにして、その中のa要素で装飾関係を。
.btnはreset.cssよりも、common.cssとか別のファイルに書いたほうがいいですね。


この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ