HTMLタグで値段を表示！誰でもわかりやすい3ステップ解説

はじめに

この記事を読めば、HTMLの値段タグを使って価格情報を表示することができるようになります。

初心者でもわかりやすい3ステップで解説しますので、ぜひ最後までお付き合いください。

●ステップ1：値段タグの基本構造を理解する

まずはじめに、HTMLの値段タグの基本構造を理解しましょう。

○値段タグの基本構造

HTMLでは、価格情報を表示するために、<span>タグとCSSを組み合わせて使用します。

具体的には、下記のようなコードが一般的です。

<span class="price">¥10,000</span>

この例では、<span>タグの中に価格情報（¥10,000）を記述し、”price”というクラス名を付けています。

このクラス名を使って、CSSでスタイルを適用することができます。

●ステップ2：CSSで値段タグをデザインする

次に、CSSを使って値段タグのデザインをカスタマイズしましょう。

○基本的なデザインの設定

下記のようにCSSを設定することで、価格情報のフォントサイズや色などをカスタマイズできます。

.price {
  font-size: 24px;
  color: #FF0000;
}

このCSSコードでは、”.price”というクラス名が付けられた要素に対して、フォントサイズを24pxにし、文字色を赤に設定しています。

○通常価格と割引価格の表示

通常価格と割引価格を同時に表示する場合、下記のようなHTMLとCSSを使って実装できます。

<span class="original-price">¥20,000</span>
<span class="discounted-price">¥10,000</span>

この例では、通常価格に”original-price”というクラス名を、割引価格に”discounted-price”というクラス名を付けています。

それぞれのクラス名に対して、下記のようなCSSを設定しましょう。

.original-price {
  font-size: 16px;
  color: #999999;
  text-decoration: line-through;
}

.discounted-price {
  font-size: 24px;
  color: #FF0000;
}

このCSSコードでは、”.original-price”の要素に対して、フォントサイズを16pxにし、文字色をグレーに設定し、取り消し線を入れています。

一方、”.discounted-price”の要素に対しては、フォントサイズを24pxにし、文字色を赤に設定しています。

●ステップ3：値段タグの応用例

さらに応用して、価格情報を工夫して表示しましょう。

○セールアイコンの表示

セール中の商品には、割引価格の横にセールアイコンを表示してみましょう。

下記のようなHTMLとCSSを使って実装できます。

<span class="discounted-price">
  ¥10,000
  <span class="sale-icon">SALE</span>
</span>

.discounted-price {
  font-size: 24px;
  color: #FF0000;
  position: relative;
}

.sale-icon {
  font-size: 12px;
  color: #FFFFFF;
  background-color: #FF0000;
  padding: 2px 4px;
  position: absolute;
  top: -4px;
  right: -20px;
}

この例では、”sale-icon”というクラス名を付けた<span>タグを、割引価格の表示部分に追加しています。

CSSでは、”.sale-icon”の要素に対して、フォントサイズや背景色を設定し、割引価格の右上に表示するようにしています。

まとめ

これで、HTMLの値段タグを使って価格情報を表示できるようになりました。

この知識を活用して、さまざまなWebページで価格情報を魅力的に表示しましょう。