基本的なＨＴＭＬタグとスタイルシートの記述方法

ＨＴＭＬとは、ウェブページを記述するための世界共通の言語です。文書に「ＨＴＭＬタグ」でタグ付けして記述したもので、「見出しはココ」「ここからここまでが１つの段落」「強調したいのはココ」など、文書に論理的な構造を持たせて、わかりやすくすることを目的としたものです。

ウェブページを閲覧するには、一般的にウェブブラウザを使用しますが、これは、ＨＴＭＬで記述された文書を視覚的に表現されたものを見ています。

ＨＴＭＬ文書はテキスト文書の一種であるため、テキストエディタでＨＴＭＬ文書を開き、タグごとテキスト文書として読み書きすることができます。また、この文書を視覚的に作成するソフトとして「ドリームウィーバー」や「ホームページビルダー」などが有名です。

ショップサーブで自動生成されるお店ページも、ＨＴＭＬ文書の集合体です。商品ページの紹介文エリアやフリーエリアなどの「ＨＴＭＬ使用可能」領域にＨＴＭＬタグを記述すれば、より訴求力のあるページを制作できます。

ＨＴＭＬは文書に論理的な構造を持たせるためのものであるのに対し、スタイルシートは文書を装飾するためのものです。「ＣＳＳ」と略します。

文字を大きくしたり色をつけたり、行間を調節したりレイアウトしたりと、文書の内容とは直接関係ない、見た目を指定するために用います。

ＨＴＭＬタグと組み合わせて使います。

文書の論理構造はＨＴＭＬ、装飾はＣＳＳと両者を分離し、混同しないことが原則であり推奨されています。ＨＴＭＬタグにも文書を装飾するためのタグが多数ありますが、検索エンジン対策として良くないので使わないでださい。装飾はスタイルシートで行ってください。

自分で記述したＨＴＭＬに画像を貼り付けるには、「画像のＵＲＬ」が必要ですが、これは画像台帳の登録した各画像の「プレビュー」ボタンをクリックすると、ＵＲＬを確認できます。


登録した画像は縦横比を維持したまま５種類のサイズが複製されており、横幅を基準として「50px / 120px / 180px / 250px / 640px / オリジナルサイズ」があるので、最適なサイズを選んで、そのＵＲＬをコピーして利用します。

ページ内に画像を貼るには、「 画像のＵＲＬ」をＨＴＭＬタグで記述する必要があります。

ＨＴＭＬタグは、原則的に「開始タグ」と「終了タグ」をセットで用います。「終了タグ」の記述忘れなどがあると、ページのレイアウトが大きく崩れる原因になるのでご注意ください。

ホームページ作成ソフトで作成したコンテンツの「全ての」ＨＴＭＬタグをコピーして使用すると、タグを貼り付けたショップサーブのページに不具合を起こす原因となるのでご注意ください。

段落を空けるために多数の<br>タグを連続して記述するのは、ＨＴＭＬの記述方法として正しくないため、検索エンジンにマイナスの判定をされる恐れがあります。
そういった場合は、スタイルシートの margin 属性を利用してください。

スタイルシートは文章をＨＴＭＬタグで囲み、そこに付与する形で記述します。ＨＴＭＬタグ自体は段落を表す<p>タグ、ブロックを表す<div>タグなど様々なものが使えます。
なかでも<span>タグはＨＴＭＬタグとして特に意味を持っておらず、スタイルシートで文字を装飾するには使い勝手の良いＨＴＭＬタグです。

・文字色は#と６桁の数字で表現する「カラーコード」で指定します。検索エンジンで「カラーコード」と検索すると、カラーコードの一覧表を掲載したサイトが多数見つかるので、ご活用ください。

・文字サイズはパーセントで指定する方法の他に、サイズをピクセル単位で指定する px など、いくつかの指定方法があります。

オレンジの部分は直接の<table>タグではなく、スタイルシートの記述です。ショップサーブでは、<table>タグを記述した場合、標準では枠線を表示しないように設定されているので、枠線を表示するために追加してあります。

ここでは文字で例示していますが、もちろん画像や表も入れられます。枠の中にさらに段組みをすることもできます。