🧘‍♀️

【Rails & CSS】positionプロパティを使ったランキング表示

2023/10/07に公開

CSS

はじめに

この記事では、ウェブページにランキング表示を追加する方法について説明します。具体的には、要素の左上に、No.1、No.2などのランキングを配置するやり方に焦点を当てます。
CSSを使い、スタイリッシュなランキング表示になるようにしていきましょう。

イメージ

以下のように、左上にランキングが表示されるように設定します。

親要素と子要素

イメージのように要素を相対的に配置するためには、親要素と子要素の関係を理解することが重要です。親要素は子要素のコンテナとして機能し、子要素は親要素内で配置されます。

position: relative;を持つ親要素

親要素にposition: relative;を指定すると、子要素は親要素内で位置を決定します。つまり、子要素は親要素を基準に位置を指定できます。この仕組みを利用することで、親要素内での相対的な配置を行うことができます。

.parent {
  position: relative;
}

postion: absolute;を持つ子要素

子要素にposition: absolute;を指定すると、その子要素は親要素を基準に位置を決定します。ただし、この場合、親要素はposition: relative;を持っている必要があります。子要素は親要素内での位置を自由に指定できます。

.child {
  position: absolute;
}

左上に配置する例:

.child {
  position: absolute;
  top: 0;
  left: 0;
}

このスタイルを持つ子要素は、親要素の左上に配置されます。

右下に配置する例:

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

このスタイルを持つ子要素は、親要素の右下に配置されます。

ランキング表示の作成

では実際に、イメージのようなランキング表示を作ります。

ランキングの要素の作成

まず、HTMLでランキング要素を追加します。これにより、表示したいランキング順位を含む要素を準備できます。順位は<%= index + 1 %>を使用して表示します。

<div class="ranking-container">
  <% @posts_ranking.each_with_index do |post, index| %>
    <div class="ranking-item">
      No. <%= index + 1 %>
    </div>
    <!-- 他のランキングアイテムも追加 -->
  <% end %>
</div>

解説：
<% @posts_ranking.each_with_index do |post, index| %>というコードは、@posts_rankingというリスト内の各投稿を順番に処理するループを表しています。このループで使われるindexとは何か、そしてなぜindex + 1を使っているのか解説します。

index: indexはループ内で現在の位置を示す数字です。最初のアイテムの場合は0、2番目のアイテムの場合は1、3番目のアイテムの場合は2といったように、順番に数えられます。この index は、各ランキングアイテムが何番目の順位かを示すのに使用されます。
index + 1: ランキングを表示する際、通常は1から始まる順位を表現したいですよね。しかし、indexは0から始まるため、そのままでは1位が0になってしまいます。そこで、index + 1を使うことで、indexの値に1を加えることができ、正確な順位を表示することができます。例えば、indexが0の場合、index + 1は1になり、1位が表示されます。

したがって、<%= index + 1 %>は、各ランキングアイテムが何位かを正確に表示するための式です。この部分をHTML内に挿入することで、1位、2位、3位などのランキングを表示することができます。

2. ランキングのスタイリング

CSSを使用してランキング要素を仕上げます。

.ranking-container {
  position: relative;
}

.ranking-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000; /* 背景色（黒） */
  color: white; /* テキスト色（白） */
  padding: 5px 10px; /* 内側の余白 */
  font-weight: bold; /* 太字のテキスト */
}

このようにすることで、イメージのようなランキング表示をすることができます。

absoluteとrelativeはポートフォリオでよく利用したので、今回記事にしました。
誰かの参考になったら嬉しいです。
最後までお読みいただきありがとうございました。