ヤフオク商品説明作成のための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>文字を少し小さく表示します</small>
<big>文字を少し大きく表示します</big>
brタグで<br>
改行します。
<strong>文字を太字にします</strong>
<b>文字を太字にします</b>
<i>文字を斜体で表示します</i>
<u>文字に下線を引きます</u>
<center>中央寄せにしています</center>
<ul>
<li>一つ目のリストです。</li>
<li>二つ目のリストです。</li>
<li>三つ目のリストです。</li>
</ul>
<ol>
<li>一つ目のリストです。</li>
<li>二つ目のリストです。</li>
<li>三つ目のリストです。</li>
</ol>
テキストテキストテキストテキストテキスト<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">
<hr>↑ページの区切り線です。
pタグ
通常、pタグで囲った文字は上下に余白が入りますが、ヤフオク商品説明では余白の入らないブラウザがあります。brタグで構成したほうが良いでしょう。
preタグ
ページの末尾で自動改行されず、画面幅をはみ出してしまいます。brタグで構成したほうが良いでしょう。
tableタグ
ヤフオク商品説明では一部のブラウザで余白の指定が無視され、大きくレイアウトが崩れてしまいます。tableタグを用いたデザインを作成する場合は、ある程度専門的な知識が必要になります。
ココナラにてヤフオク出品ページのデザイン＆コーディングを承っておりますので、ぜひお問い合わせください。
(C) 2023 ヤフオク商品説明のためのHTML講座
Produced by ねがいぼしプロジェクト