*

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の使い方

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

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

著者について

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

フォローはこちら

       

       
シーリングファン
天井に取り付けられるプロペラ「シーリングファン」の意味とは?

天井が高いカフェやオフィスなどでたまに天井に取り付けられている

ASUSタブレットPC「T101HA」でPhotoshopは問題なく使える?

今まで外出先や旅行先で作業する為のモバイル端末として、Andr

イタリアンジェラート
小樽市のイタリアンジェラート専門店「パスコロ」豊富なメニューと滑らかな口溶けが魅力

北海道の小樽市にあるパスコロは、手作りアイスのイタリアンジェラ

札幌大通近くのハヤシライス専門店「フェルム・ソレイユ」2週間熟成した究極のハヤシライスを食すランチ

札幌市中央区役所の近くにあるハヤシライス専門店「フェルム・ソレ

中部国際空港(セントレア)の駐車場でバッテリー上がりを起こした時の対処法

先日中部国際空港の駐車場でバッテリー上がりを起こしてしまいまし

→もっと見る