eyemovic inc.

Culture blog会社の活動・働き方

2012.04.20

丸角枠内のリスト

先日、たけのこをいただきました。
おひたしか炊き込みご飯かと考えていたら、
八宝菜にするという選択肢もあり、おいしくいただきました。
今度は、酢豚に。

CSS3。
よく使う丸角枠内のリストです。
仕様や人によってどのタグを丸角にするかもありますが、
シンプルな方法です。
 

 

—– HTML —–
<ul class=”marukado”>
    <li><a href=”#”>タイトル1</a></li>
    <li><a href=”#”>タイトル2</a></li>
    <li><a href=”#”>タイトル3</a></li>
    <li><a href=”#”>タイトル4</a></li>
    <li><a href=”#”>タイトル5</a></li>
</ul>

—– CSS —–
.marukado {
    border : 1px solid #cccccc;
    border-radius : 5px;
    / * ベンダープレフィックス */
    -webkit-border-radius : 5px;
    -moz-border-radius : 5px;
    -o-border-radius : 5px;
    -ms-border-radius : 5px;
}
.marukado a {
    display : block;
    border-top : 1px solid #cccccc;
    padding : 10px;
}
.marukado li:first-child a {
    border-top : none;
}

ここでのポイントは、<ul> の四角を丸角にすることです。
あとは <a> に水平線をつけ、最初の <a> だけつけません。
クリックやタップを想定し、装飾は <a> に対して行います。
<li> は文法上の記述のみで何も装飾をしません。

border-radiusプロパティは、
今後、ブラウザのアップデートで統一されることがあれば、
ベンダープレフィックスが必要なくなります。

5月19日(土)開催の CSS Nite in MATSUYAMA の参加申込、受付中です。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。