ネットショップでも頻繁に使用するHTML超基礎知識
ECサイトやLPの作成はデザイナーに任せているという場合でも、ちょっとは自分で文字の大きさや装飾をアレンジしたいというケースがあります。
時には、既存のテンプレートのHTMLやCSSの一部変更したいということもあるかもしれません。HTMLやCSSの勉強には時間がかかるものの、いくつかのタグや記述を理解しておけば、簡単な仕様変更はできるものです。
今回はそんな、ネットショップ運営者のた基礎講座。まずはHTMLの基礎の基礎のご紹介です。
最低限覚えておきたいHTML
<h1>〜<h6>
見出しタグです。数字が若い方が大きな見出しとなり、小さい数字は小見出しになります<h1>の見出しを説明する小見出しが<h2>、＜h2＞に付随する説明の見出しが<h3>という入れ子構造となっています。
なお、<h1>は1ページに1つだけとなっています。
<p>
pはパラグラフの略。
ひとかたまりの文章をあらわします。<p>～</p>の〜部分に文章を挿入して段落とします。通常、タグの前後に１行のスペースが空きます。
</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>
などと表すことで
商品価格
| 商品A | 500円 |
| 商品B | 1000円 |
| 商品C | 1500円 |
| 商品D | 2000円 |
と表現されます。
キーワード
登録されたキーワードはありません
