*

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

おすすめトピックス

関連記事

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々登場するもので、小説、雑誌、文書など様々な場面に登場するものです。三点リーダーとはすなわち「…」、点が3つ並んだものです。普段のメールなどの会話でも言葉を省略 […]

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

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

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

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

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

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る