html
サイト構築 更新日:2019.07.08

ネットショップでも頻繁に使用するHTML超基礎知識

ECサイトやLPの作成はデザイナーに任せているという場合でも、ちょっとは自分で文字の大きさや装飾をアレンジしたいというケースがあります。

時には、既存のテンプレートのHTMLやCSSの一部変更したいということもあるかもしれません。HTMLやCSSの勉強には時間がかかるものの、いくつかのタグや記述を理解しておけば、簡単な仕様変更はできるものです。

今回はそんな、ネットショップ運営者のた基礎講座。まずはHTMLの基礎の基礎のご紹介です。

最低限覚えておきたいHTML

<h1>〜<h6>

見出しタグです。数字が若い方が大きな見出しとなり、小さい数字は小見出しになります<h1>の見出しを説明する小見出しが<h2>、<h2>に付随する説明の見出しが<h3>という入れ子構造となっています。

なお、<h1>は1ページに1つだけとなっています。

 

<p>
pはパラグラフの略。

ひとかたまりの文章をあらわします。<p>~</p>の〜部分に文章を挿入して段落とします。通常、タグの前後に1行のスペースが空きます。

</br>
bはブレイク(改行)のこと。文章の改行を行う際、任意で入れることで改行することができます。

<strong>
その名の通り、文章を強調するタグです。

<strong>〜</stromg>の〜部分に入れている文章を太字にして強調します。SEO的にも重視されるタグですので、特に強調して伝えたい文章・ポイントに使用しましょう。

<img>
画像を表示するためのタグです。<img src=”images/home.jpg” alt=”ここに画像のテキストが入ります”>といった形で使われます。使用できる拡張子はGIF・JPEG・PNGとなります。

<a>
aはアンカーの略でハイパーリンクを入れるためのタグです。

<a href=”https://*******.jp”>ここにリンク文が入ります</a>

といったように、アドレスと共にリンクテキストを入れることで機能します。

 

<ul>・<li>・<ol>
これらはそれぞれリストを作成するためのタグとなります。

<ul>は序列のないリストを指し、<li>はリストの中身を表します。

記述では

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
と記述すると

・A
・B
・C

と表されます。

<ol>は序列のないリストとなり、<ul>と同様に<li>を伴いますが

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
と記述することで

1.A
2.B
3.C
と表されます。

<table><tr>・<th>・<td>.
<table>は、表組みを作る際に使用します。

リスト作成時と同様に複数のタグを用いて、項目を表現します。

<tr>は表組みの行
<th>は表組みの見出し
<tdは>表組みのデータ

を定義します。

記述としては

<tr>
<th>商品</th><th>価格</th></tr>
<tr><td>商品A</td><td>500円</td></tr>
<tr><td>商品B</td><td>1000円F</td></tr>
<tr><td>商品C</td><td>>1500円</td></tr>
<tr><td>商品D </td><td>2000円</td></tr>
</table>

などと表すことで

商品価格

商品A500円
商品B1000円
商品C1500円
商品D2000円


と表現されます。

キーワード

登録されたキーワードはありません

Pocket

あわせて読みたい記事