基本的なHTMLタグの記述方法

基本的なＨＴＭＬタグとスタイルシートの記述方法
＜目次＞
1 HTML タグを記述するための事前準備と予備知識・・・・・・・・・・・・・・・・・・・・ 2
2 基本的なＨＴＭＬタグやスタイルシートの記述方法・・・・・・・・・・・・・・・・・・・・ 5
リンクを張る
画像を貼る
改行する
文字を装飾する
表を入れる
表のような段組みでレイアウトする
ＨＴＭＬの記述はサポートしておりません
ＨＴＭＬの記述については、ストアーデスクでサポートいたしかねます。
こちらでご案内している内容以外については、ご自身でお調べいただくか、制作代行サービスをご利用ください。
Ｅストアー制作代行
http://clubestore.jp/service/produce/top.html
メニューに無い内容でもお見積りのうえ、承ることができます。
1/7
1 HTML タグを記述するための事前準備と予備知識
■ＨＴＭＬとは？
ＨＴＭＬとは、ウェブページを記述するための世界共通の言語です。
文書に「ＨＴＭＬタグ」でタグ付けして記述したもので、「見出しはココ」「ここ
からここまでが１つの段落」「強調したいのはココ」など、文書に論理的な
構造を持たせて、わかりやすくすることを目的としたものです。
ウェブページを閲覧するには、一般的にウェブブラウザを使用しますが、
これは、ＨＴＭＬで記述された文書を視覚的に表現されたものを見ていま
す。
HTML 文書はテキスト文書の一種であるため、テキストエディタで HTML
文書を開き、タグごとテキスト文書として読み書きすることができます。
また、この文書を視覚的に作成するソフトとして「ドリームウィーバー」や
「ホームページビルダー」などが有名です。
ショップサーブで自動生成されるお店ページも、HTML 文書の集合体で
す。商品ページの紹介文エリアやフリーエリアなどの「HTML使用可能」領
域に HTML タグを記述すれば、より訴求力のあるページを制作できます。
■スタイルシートとは？
ＨＴＭＬは文書に論理的な構造を持たせるためのものであるのに対し、ス
タイルシートは文書を装飾するためのものです。「ＣＳＳ」と略します。
文字を大きくしたり色をつけたり、行間を調節したりレイアウトしたりと、文
書の内容とは直接関係ない、見た目を指定するために用います。
HTML タグと組み合わせて使います。
文書の論理構造はＨＴＭＬ、装飾はＣＳＳと両者を分離し、混同しないこと
が原則であり推奨されています。ＨＴＭＬタグにも文書を装飾するための
タグが多数ありますが、検索エンジン対策として良くないので使わないで
ください。装飾はスタイルシートで行ってください。
2/7
■ＨＴＭＬソースを編集できるソフトを用意します
ＨＴＭＬやＣＳＳを自分で記述するには「HTML ソースを確認するテキストエディタ」が必要です。
代表的なテキストエディタを以下にご紹介しますので、必要に応じて検索エンジンから検索し、ダウンロードして導入してください。
なお、ソフトのダウンロード方法や設定方法に関しては、サポートを行っておりませんので、ご自身の責任にて導入し、
使用方法に関しては提供者のサイトなどでご確認ください。
秀丸
（有料）
サクラエディタ（無料）
ショップサーブでは「カスタムテンプレート」は文字コード「UTF-8」、「ベーシックテンプレート」は文字コード「EUC-JP」を採用しているため、
これらの文字コードに対応した「テキストエディタ」をインストールしておくことをおすすめします。
なお、「DreamWeaver」や「ホームページビルダー」などのホームページ作成ソフトでもＨＴＭＬソースの編集はできますので、代替できます。
しかし、これらのソフトは自動的にＨＴＭＬタグを記述してくれることが強みですが、ショップサーブで利用するために最適な形のＨＴＭＬタグを
記述できる訳ではないため、これらの機能はあまり利用できず、テキストエディタと同じような使い方になります。
■画像のＵＲＬの確認方法
自分で記述したＨＴＭＬに画像を貼り付けるには、「画像のＵＲＬ」が必要
ですが、これは画像台帳の登録した各画像の「プレビュー」ボタンをクリッ
クすると、ＵＲＬを確認できます。
登録した画像は縦横比を維持したまま５種類のサイズが複製されてお
り、横幅を基準として「50px / 120px / 180px / 250px / 640px / オリジナル
サイズ」があるので、最適なサイズを選んで、そのＵＲＬをコピーして利用
します。
お店ページへアクセスするアドレスのことを「ＵＲＬ」と呼びます。
同じように、ページ内に画像を貼るには、画像が置かれている場所の「Ｕ
ＲＬ」を HTML タグで記述する必要があります。
これを「画像のＵＲＬ」と呼んでいます。
3/7
■開始タグと終了タグについて
ＨＴＭＬタグは、原則的に「開始タグ」と「終了タグ」をセットで用います。
「終了タグ」の記述忘れなどがあると、ページのレイアウトが大きく崩れる
原因になるのでご注意ください。
■必要なタグの範囲について
ホームページ作成ソフトで作成したコンテンツの「全ての」HTML タグをコ
ピーして使用すると、タグを貼り付けたショップサーブのページに不具合
を起こす原因となるのでご注意ください。
4/7
2 基本的なＨＴＭＬタグやスタイルシートの記述方法
リンクを張る
他ページや画像へ移動できるようにできます。
■文字リンクの記述
文字リンクのブラウザ表示例
同じページで開く
<a href="リンク先の URL">任意の文字列</a>
別ページで開く
<a href="リンク先の URL" target="_blank">任意の文字列</a>
■画像リンクの記述
画像リンクのブラウザ表示例
同じページで開く
<a href="リンク先の URL"><img src="画像の URL" border="0"></a>
別ページで開く
<a href="リンク先の URL" target="_blank"><img src="画像の URL" border="0"></a>
「border="0"」を付与しなければ、画像に枠線が表示される場合があります。
しかし、利用しているテーマによっては付与しなくても表示されませんので、
設置後に確認のうえ、必要に応じて削除してください。
画像を貼る
ページに画像を表示します。
なお、ショップサーブの多くの箇所ではＨＴＭＬエディタ機能が設置されており、そちらの「画像を挿入」ボタンを使えば、
ＨＴＭＬを記述しなくても自動的に画像を貼ることができます。
■画像を表示する記述
画像を貼りつけたブラウザ表示例
<img src="http://独自ドメイン/pic-labo/ファイル名">
※この表示例は３つの画像を貼り付け、さらにスタイルシートを使ってレイアウトを調整したものです。
5/7
改行する
文章の改行は<br>というタグを使います。改行したい箇所にタグを記述します。
ＨＴＭＬソース上で改行してもブラウザ表示上には反映しません。
また、画像も改行できます。
なお、<br>タグは例外的に、終了タグがありません。
■改行する記述
改行した文章のブラウザ表示例
文章を見やすくするために改行します。<br>改行されました。次は空行を入れてみま
す。<br><br>空行が入りました。
段落を空けるために多数の<br>タグを連続して記述するのは、ＨＴＭＬの
記述方法として正しくないため、検索エンジンにマイナスの判定をされる
恐れがあります。
そういった場合は、スタイルシートの margin 属性を利用してください。
文字を装飾する
文字の装飾は厳密にはＨＴＭＬタグではなく、スタイルシートを使います。
ＨＴＭＬでもできますが、「装飾はスタイルシートで」の原則から、ＨＴＭＬによる装飾はお控えください。
検索エンジンにマイナスの判定をされる恐れがあります。
■文字を装飾する記述
装飾した文字のブラウザ表示例
<span style="color:#FF0000;">文字を赤くします</span>
<span style="font-weight:bold;">文字を太くします</span>
<span style="font-size:150%;">文字を大きくします</span>
<span style="font-style: oblique;">文字を斜体にします</span>
<span style="text-decoration:line-through;">文字に取消線を入れます</span>
スタイルシートは文章をＨＴＭＬタグで囲み、そこに付与する形で記述しま
す。ＨＴＭＬタグ自体は段落を表す<p>タグ、ブロックを表す<div>タグなど
様々なものが使えます。
なかでも<span>タグはＨＴＭＬタグとして特に意味を持っておらず、スタイ
ルシートで文字を装飾するには使い勝手の良いＨＴＭＬタグです。
・文字色は#と６桁の数字で表現する「カラーコード」で指定します。
検索エンジンで「カラーコード」と検索すると、カラーコードの一覧表を
掲載したサイトが多数見つかるので、ご活用ください。
・文字サイズはパーセントで指定する方法の他に、サイズをピクセル単位
で指定する px など、いくつかの指定方法があります。
6/7
表を入れる
表を記述できるＨＴＭＬタグです。<table>というタグを使います。商品のスペックやサイズを表記するために活用できます。
かつてはページのレイアウトに広く活用されていましたが、レイアウトはスタイルシートを使うので、現在はお控えください。
■表を入れる記述
表のブラウザ表示例
<table style="border-collapse: collapse;">
<tr>
<td style="border:solid 1px #FF0080;">材質：</td>
<td style="border:solid 1px #FF0080;">厚紙</td>
</tr>
<tr>
<td style="border:solid 1px #FF0080;">寸法：</td>
この表示例は、左の「表を入れる記述」に加え、さらに枠の幅、枠内の余白をスタイルシートで
<td style="border:solid 1px #FF0080;">30×36cm</td>
指定してあります。
</tr>
</table>
オレンジの部分は直接の<table>タグではなく、スタイルシートの記述で
す。ショップサーブでは、<table>タグを記述した場合、標準では枠線を表
示しないように設定されているので、枠線を表示するために追加してあり
ます。
表のような段組みでレイアウトする
段組みレイアウトは厳密にはＨＴＭＬタグではなく、スタイルシートを使います。
テーブルタグを使ったレイアウトはＨＴＭＬの記述として正しくないのでお控えください。
■段組みレイアウトの記述
段組みレイアウトのブラウザ表示例
<div style="float:left;"> 材質：</div>
<div style="float:left;"> 厚紙</div>
<div style="clear:both;"></div>
<div style="float:left;"> 寸法：
</div><div style="float:left;"> 30×36cm</div>
<div style="clear:both;"></div>
この表示例は、左の「段組みレイアウトの記述」にスタイルシートの記述を追加して装飾してあります。
見やすいように枠線を表示し、その色、太さ、線の種類、線の幅、枠内の余白を指定しています。
ここでは文字で例示していますが、もちろん画像や表も入れられます。
枠の中にさらに段組みをすることもできます。
7/7

Download Report