最低限覚えておきたいHTMLタグ


カラーミーショップのテンプレートだけではなく、1から全てHTMLを覚えてからサイトを作ろうと思うとかなりの時間がかかってしまいます。

まずは最低限のタグだけを理解し、既存テンプレートに意図した形でショップ独自の文章や画像、リンクを貼れるようになりましょう。
日々テンプレートを触っていれば、以降の事は自ずと理解できるようになるはずです。

<br />タグ
おそらく一番最初に覚えるタグになるかと思われます。
役割は「改行」で、文章を区切る際や1行分のスペースを作りたい場合などに使います。
<br>でも同じ効果がありますが、カラーミーショッププロでの正規表現は「<br />」です。
例:ここに<br />文章が<br />入ります。

ここに
文章が
入ります

<p>タグ
<br />同様、おそらく最も使用頻度の高いタグになると思います。
効果は「段落」を作ることで、<p>~</p>に囲まれた文章や画像タグを段落として扱います。
通常のHTMLでは1行分スペースを空けてから文章や画像が挿入されますが、カラーミーショッププロではそのスペースができない仕様になっているので1行分のスペースを作りたい場合は<br>を使いましょう。
また、</p>の次に来る文章は必ず改行されます。
例:<p>この中に文章や画像が入ります。</p><p>ここに次の段落の文章が入ります。</p>

この中に文章や画像が入ります。

ここに次の段落の文章が入ります。

<strong>タグ
文字を強調させたい場合に使うタグです。<strong>~</strong>で囲まれた文字は通常のフォントより太くなります。
HTML上では<B>~</B>と同じ効果がありますが、これは現在使わないほうがいいタグのひとつですので<strong>を使いましょう。
例:<strong>ここに強調させたい文字を入れます。</strong>

ここに強調させたい文字を入れます。

<img>タグ
画像を表示させたいときに使うタグです。
画像は基本的に全て<img>タグ内に画像URLを記載することで表示されるようになっています。
<img src=”画像URL”>のみでも表示はされますが、横幅を指定する「width=”画像の横幅”」「height=”画像の縦幅”」「alt=”画像の説明”」の3つを入れるようにしましょう。また、終了を宣言する</>のタグがないため、<img />のようにタグの最終位置に「 /」を入れる必要があります。
また、widthとheihgtの指定には単位は必要ありません。横幅、縦幅それぞれの数字のみです。
例:<img src=”表示させたい画像URL” width=”100″ height=”100″ alt=”画像の説明” />

<a>タグ
リンク全般のタグです。他サイトに誘導したり、フリーページに誘導したい時などに使います。
基本は<a href=”誘導先のURL”>誘導先の名前</a>となります。
例(yahoo!を同一ウィンドウ内で移動する場合):<a href=”http://www.yahoo.co.jp/”>Yahoo!Japan</a>

Yahoo!Japan

例(新しいウィンドウを開いて移動する場合):<a href=”http://www.yahoo.co.jp/” target=”_blank”>Yahoo!Japan</a>

Yahoo!Japan

ショッピングカート

カラーミーショップなら・・・

低コスト 月額900円~
デザイン自由自在なカスタマイズ機能!
楽々商品・在庫管理!
ボタンひとつでモバイルサイトも製作!
お店とお揃いのブログも簡単作成!
30日間のお試し期間もついています!
カラーミーショップで簡単ネットショップ!


このページの先頭へ