[CSS3] リストの最後の要素のボーダーを削除する方法

2012/10/02 16:40

このQ&Aのポイント

HTML5とCSS3を使用してスマートフォンサイトを制作しています。リスト要素を使用してメニューを作成しているのですが、一番下の要素だけボーダーを削除したいと思っています。しかし、うまくいきません。どなたか詳しい方、アドバイスをいただけませんか？
HTML5とCSS3を使用してスマートフォンサイトのメニューを作成しています。リスト要素を使用していますが、一番下の要素だけボーダーを削除したいと思っています。しかし、うまくボーダーを削除する方法が分かりません。どなたか詳しい方、ご教授いただけませんか？
スマートフォンサイトの制作において、HTML5とCSS3を使用しています。メニューはリスト要素で作成しているのですが、一番下の要素だけボーダーを削除したいと思います。しかし、うまく削除する方法がわかりません。詳しい方、アドバイスをいただけませんか？

laundry77
お礼率72% (29/40)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/02 19:46 回答No.2

まず、HTMLをチェックしましょう。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) 　確かに、HTML5ではA要素で<li></li>を括ることはできますが、この場合は　<li><a></a></li> 　とすべきです。以下、タブは全角スペース２個に置換してあります。 <nav id=#grovalNavi"> 　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　</ul> </nav> とすべきです。 nav {display: block;width: 300px;margin: 0 auto 18px;} nav ul,nav ul li{display:block;list-style-type:none;margin:0;padding:0;position:relative;} nav ul{ 　　border-radius: 8px; 　　border: 1px solid #CCCCCC; 　　background-color: #EEEEEE; 　　background: -moz-linear-gradient(white, #E7E7E7); 　　background: -webkit-gradient(linear, left top, left bottom, from(white), to(#E7E7E7)); 　　line-height: 26px; 　　text-align:center; } nav ul li{height:33px;} nav ul li a{ 　　text-decoration: none; 　　color: #646464; font-size: 18px; 　　display:block;height:95%;width:80%;margin:auto; } nav ul li {border-bottom: 1px solid #CCCCCC;} nav ul li:last-child {border-bottom-style: none;} しかし、最後の二行は、次のほうが良いです。borderの引かれる順番があるので・ nav ul li+ li{border-top:1px solid #CCCCCC;} ★上記スタイルシートは、aをblockにしてありますが、上下のリンクエリアとの間にリンク不能のスペースを取りましょう。

質問者

お礼 2012/10/09 14:09

ORUKA1951様とても丁寧にご回答いただきありがとうございました。いただいた回答を参考に実装することが出来ました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

DrFell
ベストアンサー率55% (305/551)

2012/10/02 19:12 回答No.1

<ul id="navi"> <li><a href="#a">メニュー1</a></li> <li><a href="#b">メニュー2</a></li> <li><a href="#c">メニュー3</a></li> <li><a href="#d">メニュー4</a></li> <li><a href="#e">メニュー5</a></li> </ul> cssはそのままでliとaをひっくり返して見てください（親子関係を変える）。 ulの子どもはliのみ認められています。

質問者