ヤフオク出品ページのためのHTML講座:使えるタグと書き方

ヤフオク出品ページ作成のためのHTMLの書き方の説明です。
2023年現在、PCでもスマホでも、またどのブラウザでも綺麗に表示させるために役立つタグのみを紹介します。

ヤフオク出品ページでは、通常のホームページのようにCSSを用いてPCとスマホの両方で最適な表示にすることができないため、HTMLタグのみでPC表示・スマホ表示ともに最適化する必要があります。使えるタグ自体も限られているので、あまり凝ったデザインにせず、シンプルなデザインで商品説明を「見やすく」「分かりやすく」することができれば十分です。

※ここで解説するHTMLの書き方はヤフオク出品ページ独自のものであり、現在では通常のホームページ制作で使用する書き方とは一部異なります。(通常のホームページ制作においてはウェブ黎明期に使用されていた古い書き方を含んでいます)

※タグはかならず半角で書く必要があります。また、出品後はHTMLタグが大文字で出力されますが、入力する際は大文字でも小文字でもどちらでも問題ありません。(本ページでは小文字で記述しております)

文字の色と大きさ / 改行の方法 / 文字の装飾 / 中央寄せ / リストの作成 / インデント(字下げ) / リンクの貼り方 / 画像の貼り方 / 水平線の挿入 / 非推奨のタグ / 商品を売れやすくするために / さいごに

文字の色と大きさ

<font color="色名"> で文字に色をつけることができます。「red」のように色名、もしくは「#0000ff」のようにカラーコードで指定します。
また、<font size="数値"> で文字の大きさを変えることができます。1がもっとも小さいサイズ、7がもっとも大きいサイズになります。
<font color="色名" size="数値"> というように、色とサイズを同時に指定することもできます。
<font color="red">文字色を赤にしています</font>
<font color="#0000ff">文字色を青にしています</font>
<font size="1">一番小さい文字サイズです</font>
<font size="7">一番大きい文字サイズです</font>
<font color="blue" size="5">色とサイズを同時に指定しています</font>

《表示結果》

文字色を赤にしています
文字色を青にしています
一番小さい文字サイズです
一番大きい文字サイズです
色とサイズを同時に指定しています
このほか、smallタグとbigタグを使って文字のサイズを少しだけ変えることもできます。
smallタグで通常より少しだけ小さく、bigタグで通常より少しだけ大きくなります。
これは何も設定していない通常の文字サイズです
<small>文字を少し小さく表示します</small>
<big>文字を少し大きく表示します</big>

《表示結果》

これは何も設定していない通常の文字サイズです
文字を少し小さく表示します
文字を少し大きく表示します
▲ページの先頭へ

改行の方法

brタグで改行することができます。
brタグで<br>
改行します。

《表示結果》

brタグで
改行します。
▲ページの先頭へ

文字の装飾(太字・斜体・下線)

strongタグ もしくは bタグ で文字を太字にできます。
iタグで文字を斜体にできます。
uタグで文字に下線を引くことができます。
<strong>文字を太字にします</strong>
<b>文字を太字にします</b>
<i>文字を斜体で表示します</i>
<u>文字に下線を引きます</u>

《表示結果》

文字を太字にします
文字を太字にします
文字を斜体で表示します
文字に下線を引きます
▲ページの先頭へ

中央寄せ

centerタグで文字や画像などを中央寄せにできます。
<center>中央寄せにしています</center>

《表示結果》

中央寄せにしています
▲ページの先頭へ

リストの作成

ulタグで全体を囲み、各項目をliタグで囲むことで、記号でリスト表示をすることができます。
<ul>
<li>一つ目のリストです。</li>
<li>二つ目のリストです。</li>
<li>三つ目のリストです。</li>
</ul>

《表示結果》

また、olタグで全体を囲み、各項目をliタグで囲むことで、番号でリスト表示をすることができます。
<ol>
<li>一つ目のリストです。</li>
<li>二つ目のリストです。</li>
<li>三つ目のリストです。</li>
</ol>

《表示結果》

  1. 一つ目のリストです。
  2. 二つ目のリストです。
  3. 三つ目のリストです。
▲ページの先頭へ

インデント(字下げ)

blockquoteタグで文書をインデント(字下げ)することができます。
テキストテキストテキストテキストテキスト<br>
<blockquote>この部分がインデントされます</blockquote>
テキストテキストテキストテキストテキスト

《表示結果》

テキストテキストテキストテキストテキスト
この部分がインデントされます
テキストテキストテキストテキストテキスト
▲ページの先頭へ

リンクの貼り方

<a href="URL">テキスト</a> で、他のページへのリンクを貼ることができます。
<a href="https://negaiboshi-project.com">私のホームページです</a>

《表示結果》

私のホームページです
▲ページの先頭へ

画像の貼り方

<img src="画像のURL"> で画像を貼ることができます。
<img src="画像のURL" width="◯%"> と記述することで画像の横幅を調整することも可能です。(指定しない場合は元々の画像サイズで表示されます)
注意点として、単位は%を用いて画面幅に対して占める割合を指定しましょう。
<img src="https://negaiboshi-project.com/jirachism/image/jirachi.gif">

《表示結果》

なお、ヤフオク出品ページでは、この形式で挿入できる画像は最大7枚までとなっています。
▲ページの先頭へ

水平線の挿入

hrタグでページを水平線で区切ることができます。
<hr>↑ページの区切り線です。

《表示結果》


↑ページの区切り線です。
▲ページの先頭へ

非推奨のタグ

以下のタグはヤフオク出品ページで使用できるものの、意図しないレイアウトになってしまうため使用しないほうが無難です。

pタグ
通常、pタグで囲った文字は上下に余白が入りますが、ヤフオク出品ページでは余白の入らないブラウザがあります。brタグで構成したほうが良いでしょう。

preタグ
ページの末尾で自動改行されず、画面幅をはみ出してしまいます。brタグで構成したほうが良いでしょう。

tableタグ
ヤフオク出品ページでは一部のブラウザで余白の指定が無視され、大きくレイアウトが崩れてしまいます。

このほか、数字やアルファベットを羅列するとページの末尾で自動改行されず、画面幅をはみ出してしまうため、注意してレイアウトを組む必要があります。
▲ページの先頭へ

商品を売れやすくするために

商品を売れやすくするための方法として、商品説明を見やすく・分かりやすくすることも重要ですが、写真やテキストも工夫する必要があります。

まず、写真は商品の第一印象ともなるので、綺麗な写真を使用するようにしましょう。
そしてテキストについては、検索されやすいキーワードを商品説明ではなくかならず商品名の中に記載するようにしましょう。商品説明の中に記載したキーワードは、ヤフオクの商品検索の結果には反映されません。
▲ページの先頭へ

さいごに

ほかにもいくつか使用できるタグはありますが、基本的にはここまで紹介したタグ(非推奨のタグを除く)を用いて文字の装飾や画像の挿入をする程度のシンプルなデザインで良いでしょう。

※ヤフオク出品用のテンプレートサイトで凝ったデザインのものが多くありますが、スマホが普及する前に作られたもの(=PC表示専用のもの)である点に注意してください。スマホで閲覧すると画面幅をはみ出してしまいます。
▲ページの先頭へ
ココナラ にてヤフオク出品ページのデザイン&コーディングを承っております。お気軽にお問い合わせください。
Tweet

Produced by ねがいぼしプロジェクト