*

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

おすすめトピックス

関連記事

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

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

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

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

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

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

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

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

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

著者について

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

フォローはこちら

       

       
大滝鍾乳洞
トロッコに乗って鍾乳洞へ!東海地方最大級の岐阜県「大滝鍾乳洞」を探索

岐阜県郡上市にある東海地方最大級という鍾乳洞「大滝鍾乳洞」へ行

ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

→もっと見る