おすすめのVOD・スマホアプリ・スマホゲームアプリの紹介サイト

LAGRANGE BLOG

メニューをpipe「|」で区切ったとき、最後にpipeを表示させない方法How to not display pipe menu


スポンサーリンク

coding web制作

-coding, web制作
-, ,

□サイト内検索:

投稿日:2010/12/21 更新日:



pipe_index

【はじめに】

メニューをulタグとliタグでマークアップするとします。
メニュー項目をpipe「|」で区切ったときに、cssで一括指定すると最後のメニュー項目にまで
pipeがついてしまって困りました。

スポンサードリンク
スポンサードリンク

pipe
こんなケースを回避するtopicsです。

対象ブラウザ:実装方法はCSSの「:last-child」を使用します。
「:last-child」 はCSS 3のセレクタのため IEは適応対象外です。

last-child:afterを使用する方法

Creating Pipe-Separated Menus with Unordered Lists - exscale.seさんの方法で紹介されていた方法
last-child:afterを使用して、最後の子要素のみcontentを追加しないようにしています。

■html

[code language="html"]
<ul id="footer-navigation">
<li><a href="#">Top</a></li>
<li><a href="#">Valid XHTML</a></li>
<li><a href="#">Valid CSS</a></li>
<li><a href="#">Get Firefox</a></li>
</ul>
[/code]

■CSS

[code language="css"]
#footer-navigation {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#footer-navigation li {
display: inline;
}
#footer-navigation li:after {
content: " | ";
}
#footer-navigation li:last-child:after {
content: "";
}
[/code]

サンプル

nth-last-child(1)を使用する方法

css3で追加されたnth-last-child(*)を使用する方法です。

■html

[code language="html"]
<ul id="footer-navigation">
<li><a href="#">Top</a></li>
<li><a href="#">Valid XHTML</a></li>
<li><a href="#">Valid CSS</a></li>
<li><a href="#">Get Firefox</a></li>
</ul>
[/code]

■CSS

[code language="css"]
#footer-navigation2 {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#footer-navigation2 li {
display: inline;
margin-right:10px;
padding-right:10px;
border-right:1px solid #666;
}
#footer-navigation2 li:nth-last-child(1) {
border-right:none;
}
[/code]

サンプル2

解読メモ

:after セレクタの後に要素をスタイルを適応
:last-child 最後に書かれている子要素にスタイルを適応
:last-child:after 最後に書かれている子要素のセレクタの後にスタイルを適応
nth-last-child(*) 最後から*番目に適応する

サンプル2のnth-last-child(1)は最後から1番目の要素にスタイルを適応させている
border-right:noneが適応され、区切り線の表示が消える。

IEに対応させる場合には

javascriptを使用します。
フッターとかの区切り『|』のサンプル1種 - CSS HappyLife

参照URL

:first-child疑似クラス (E:first-child)|セレクタ|CSS HappyLife ZERO

【終わりに】

CSS3についての情報が1年前よりも格段に増えてきて、参考になるサイトが増えています。
スマートフォンはCSS3がメインになるようだし、これを気に1から覚えないとダメですね。


スポンサードリンク

□サイト内検索: 掲載アプリ数が増えてきました。攻略一覧表示で見つからないものなどは検索をご利用ください。

-coding, web制作
-, ,

全世界2,500万ダウンロード達成の本格ストラテジーRPG『アート・オブ・コンクエスト』

城を築いてドラゴンを育てて自軍の英雄を育てていく本格ストラテジーRPG! 全世界2,500万ダウンロード達成で52カ国TOP10ランクインの実績があるアプリゲームです。

「※ラインフレンド登録・メールアドレス登録完了で事前登録完了

「アート・オブ・コンクエスト」の"無料"事前登録はこちら

    アート・オブ・コンクエスト
 
スポンサーリンク

スマホアプリ攻略記事特集

Android,iPhoneスマホゲームアプリの攻略記事です。
他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

 

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アプリレビュー

おすすめスマホゲーム・アプリ

最新スマホゲーム攻略はこちらから!

他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

おすすめ記事

1

そんなことできるの?違法サイトとかじゃないの? U-NEXTはファミリーアカウントが分けられるので、家族内で共通利用していても 視聴履歴のプライバシーは守られます。 U-NEXTのポイントがなくなった ...

2

毎月のスマホの通信制限にひっかかってしまい、イライラしてしまっていませんか? 外出中にYoutubeを見たり、スマホゲームをしたりしたいのに、通信制限で快適に動かない。 通信制限にならないようにするに ...

3

ファミコン、スーパーファミコン世代でテレビゲームを楽しんでいた人たちはスマホゲームは「あればゲームじゃない」と思っている人も少なくありません。 いや私も同じこと思ってましたよ。 あくまで待ち合わせの待 ...

4

このページでは『2018年版』おすすめの動画配信サービス(VOD)を比較して紹介していきます。 Netflixだけじゃない!2018年になって色々な動画配信サービスが出てきており、 ・どの動画配信サー ...

5

当サイトでプレイしたおすすめのスマホゲームを攻略していきます。 スマホ人気ゲームランキング

6

当サイトで独自で調べたスマホで遊べる『おすすめ脱出ゲーム』を
ランキング形式で紹介していきます。

7

当サイトで独自で調べたスマホで遊べる『おすすめパズルゲーム』を
ランキング形式で紹介していきます。

8

当サイトで独自で調べたスマホで遊べる『おすすめのスマホアドベンチャーゲーム』を紹介

9

FODプレミアムが選ばれるポイント FOD自体は「非会員でも無料」で使うことができます! FOD非会員の場合には「期間限定のフジテレビ最新話見逃し分」だけ見ることができます。 無料会員でも放送直後のド ...

-coding, web制作
-, ,

スポンサーリンク

Copyright© LAGRANGE BLOG , 2018 All Rights Reserved.