HTMLとCSSでランキングリストをデザインする方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLとCSSでランキングリストをデザインする方法について解説しています。ここではliタグを使った表示形式での作成方法とCSSでの装飾の例を紹介します。サンプルで表示を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLとCSSでランキングリストをデザインする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLとCSSでランキングリストをデザインする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

ランキングリストとは

HTMLで作るランキングリストとは、1位・2位・3位…や1番・2番・3番…などをあらかじめ決まった内容で表示していく形式の表示のことをいいます。

HTMLで表示する場合には事前に決まった内容で表示することになります。

PHPやRubyなどのwebアプリ用のプログラミング言語を組み合わせることで、データベース内のデータの順位を表示することができるでしょう。

 

データベース内の要素を繰り返し構文などを用いて、「データ数の多いものから順番に表示」などのコードを書くことでランキングを表示することが可能です。

しかし、HTMLの場合にはデータベースから抽出するわけではないため、決められたランキングをテキストとして表示していくことになるでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

HTMLで記述する内容

HTMLで表示する場合には、テーブルデータ形式のtd要素で表示する場合とリスト形式で表示する場合のli要素で標示する2つの場合があります。

表のように表示する場合にはtd要素を用いましょう。

見た目には分かりやすいため、ランキングの説明文が多い場合や10位以上も表示するようなランキングリストではよく用いられています。

反対に、3位ぐらいまでの表示をする場合には li要素を用いる場合が多いです。

 

li要素の方は見た目の調整であるcssで装飾しやすく、デザイン性を考慮したランキングリストを作成することができます。

箇条書きとなるli要素は、「ul要素」もしくは「ol要素」の中で使われるでしょう。

ul要素はリストの頭に点がつき、ol要素はリストの頭に数字が付きます。

順位など順番通りに読んで欲しい場合は、ol要素を用いて記述していきましょう。

 

CSSで装飾する内容

li要素をcssによる調整で装飾していく場合には、list-style-typeをnoneに指定しておくことでリストの頭に付く数字を見た目に表示しない見た目にすることが可能です。

表示としては見えていないものの、マークアップとしてはリストの1番目・2番目…と認識されています。

そして、表示したい順位表記は擬似的に要素があるように記述が出来る「疑似要素」を使用します。

:beforeセレクタを使うことで、リストの頭にコンテンツとして表示が出来るので、こちらを利用していきましょう。

さらにcounter-resetを使うことで番号を振り直すことで、番号表示自体をcssだけで表示が可能です。

 

HTMLとCSSでランキングリストを作ってみよう

(htmlファイル)

<div>

<olclass="test1">

<li>(1位の内容)</li>

<li>(2位の内容)</li>

<li>(3位の内容)</li>

</ol>

</div>

(cssファイル)

.test1{

counter-reset: my-counter;

list-style-type: none;

}

.test1 li:before {

content: ""counter(my-counter) ;

counter-increment: my-counter;

padding:10px;

margin: 10px;

color: red;

background: black;

}
 このように表示されていれば成功です。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLとCSSでランキングリストをデザインする方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。