*

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

おすすめトピックス

関連記事

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

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

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

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

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

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

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

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

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

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

著者について

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

フォローはこちら

       

       
千歳市のイタリアンレストラン「アキオカ」でパスタランチ

「アキオカ」は北海道千歳市にある格調高いイタリアンレストランで

Fuwattoまるやまキッチン!札幌市円山のふわふわオムライスとパンケーキのお店でランチ

札幌市の円山公園近くにある「Fwatto まるやまキッチン」は

札幌駅前の野菜が美味しいベジタブルバー「野菜バルMAHALO」ハワイな雰囲気を楽しめます

札幌駅前に野菜が美味しいベジタブルバーがあります。その名前を「

外国人にも人気な中部国際空港のガチャガチャコーナーが豊富

日本でお馴染みのガチャガチャ、正式名称をカプセルトイという所謂

Illustratorでオブジェクトの背景を画像にする為にスウォッチに登録する方法

Illustrator でオブジェクトの背景を画像にしたいとい

→もっと見る