*

HTMLでulタグのリスト項目の表示数を制限する

公開日: : ノウハウ

リストの表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。

  • リスト
  • リスト
  • リスト

このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

この箇条書きのリストの表示数を制限したいと思う時がありました。表示数を制限とは、箇条書きで3つの項目があるとするならば、2つまでしか表示したくないという場合です。そんな必要性がどこにあるのかと?それがあるんです。

例えば WordPress であれば、カテゴリリストやタグリストも ul タグを使う事ができます。カテゴリやタグの表示数を制限したいという時に使えます。

CSSで表示数を制限

ul リスト項目の表示数を制限するには CSS を使う方法が一番簡単です。以下のように記述します。例として以下のリストの項目の表示を2つに制限したいという場合を考えます。

  • リスト
  • リスト
  • リスト

CSS で以下のように記述します。

ul li:nth-child(n+3){
   display:none;
}

nth-child という擬似クラスは CSS3 という新しい技術ですが色々応用ができます。2017年時点の主要ブラウザが最新であれば大抵対応しています。

li:nth-child(n+3) は li 要素の3番目以降に適用するという意味です。3番目以降の li 要素は display:none で非表示にしています。これで結果的にリストの項目表示を制限する事ができました。

  • Pocket

おすすめトピックス

関連記事

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Googleフォトにアップした写真がどこで撮影したのか確認する方法

あなたのスマートフォンの中にもたくさんの写真があるのではないで

長浜IC前「らーめん専家味噌壱」癖になる濃厚味噌ラーメン

北陸自動車道の長浜インターチェンジ前に、2018年にラーメン屋

WordPressのWP_Queryでカスタムフィールドで絞り込み今日の日付以前の記事は表示しない

WordPress で条件に応じた記事を一覧で表示したいという

電子レンジで冷凍食品のあたため500W/600Wってどこで判別?地域によって違いは?

冷凍食品を温めるのには電子レンジを使用しますが、冷凍食品の裏側

Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

→もっと見る