Softcreate co., ltd

1

株式会社ソフトクリエイト

2012/11/14

Html 編集ツール補足マニュアル

Ver.1.0

Softcreate co., ltd

目次 1. Html について .................................................................................................................................. 3

1.1. Html とは ........................................................................................................................................................... 4

1.2. Html タグの基本 ................................................................................................................................................ 5

1.2.1. HTML タグの基礎 ........................................................................................................................................... 5

1.2.2. HTML タグの種類（主要タグ） ..................................................................................................................... 7

2. Html 編集ツール ............................................................................................................................... 9

2.1. HTML 編集ツール ........................................................................................................................................... 10

2.1.1. HTML 編集ツール基本操作........................................................................................................................... 10

2.1.2. HTML 編集ツールを利用しない場合（補助的に利用する場合） ................................................................. 14

Softcreate co., ltd

11.. HHttmmll ににつついいてて

Softcreate co., ltd

1.1. Html とは

HTMLとは、Web ページ（ecbeing ではフロントの各商品などのページ）を作成する為の基本言語（マーク

アップ言語）の一つで、各ページを表示させるためブラウザに理解させるための記載ルールとなります。

「HTML（Hyper Text Markup Language の略)」は文字のみで構成されているテキストファイル（HTMLファ

イル）で文字や画像をブラウザで表示しております。HTML ファイルはタグ（記載ルール）と呼ばれる文字

列を挿入して作成していきますがタグというのは「<」と「>」で挟まれたものを指します。

例として、HTMLファイルはテキストで構成されているので画像ファイルを直接挿入する事は出来ません。

そのため表示箇所にイメージ（gif、jpg 画像など）を入れるというタグ（記載ルールに沿ったテキスト）

を記述します。そこでブラウザはその記述を解釈して画像を表示しているのです。

Web ページ（商品などのページ）をデザインまたはレイアウトする場合、フリースペースやテンプレート

の箇所については、HTMLタグ（tableタグなど）を編集することによりショップ独自のデザインを表示する

ことができますが、サイトの共通部分やシステムにかかわる箇所について変更できないよう制限をしており

ます。

また今回のバージョンアップにより、管理画面上で HTMLを理解していない方でも視覚的にデザインを作

成、編集できるよう HTML編集ツールを導入しております。本ツールについて、各種制限事項はありますが

HTMLのタグ（記載ルール）を理解していない方でも簡易的なデザインを行うことが可能となっております。

Softcreate co., ltd

1.2. Html タグの基本

1.2.1. HTML タグの基本ルール

HTMLタグとは「<」と「>」の記号で挟まれた特定の文字列（要素（element））のことを指します。

Webページを表示するにはタグを記載するだけで出来上がります。ecbeing 管理画面のフリースペースやテ

ンプレートもタグを含めた記載をするとデザインを表示することができます。

① タグ記載の前提

基本的にタグは対になっていて開始タグと終了タグがあり、終了タグは先頭に「/」スラッシュを記

述します。ただし例外のタグがあります（<br>改行,<hr>水平線 等）。

② 開始タグについて

開始タグには「属性（attribute）」と「属性値（value）」を必要に応じて追加する事が出来ます。

属性は対象となる要素に加える性質にあたる項目で、その属性を具体的に表すのが属性値です。

※上記では、align が属性で center がその属性値になります。

align 属性は横方向の並びを指定する属性で、center はセンタリングを意味する属性値で、つま

りここでのｈ要素は、センタリングして表示するという性質が追加されていることになります。

尚、属性はスペースで区切って複数指定する事も出来ます。

③ フリースペースやテンプレートへの記載例

<FONT color=#ff0080 size=3>

<MARQUEE behavior=alternate>お待たせしました！</MARQUEE>

<BR><BR>

市場であまり出回っていないため「どこで手に入るの？」との 問い合わせが多い全農の

人気国産ジャム≪とちおとめいちごジャム≫が JAタウンに登場しましたー☆

</FONT>

<BR><BR><BR>

<FONT color=navy size=3>

品種を「とちおとめ」に限定して作ったいちごジャムです。果肉感と風味をお楽しみ下さい。

パンだけでなく、ヨーグルトなどにもソースとしてお使い頂けます。（糖度 45度）

</FONT>

<BR><BR>

<FONT color=red size=4>

===○セット内容○===

</FONT>

<BR>

<FONT color=#959500 size=3>

全農旬の果実とちおとめいちごジャムプレザーブスタイル<BR>

</FONT>

<BR>

<h1 align=”center”> 見出し記述 </h1> 要素 属性 属性値 （記述内容）

<h1> 見出し記述 </h1> （記述内容）

開始タグ

要素

終了タグ

開始タグ 終了タグ

要素

Softcreate co., ltd

（200g×12本）<BR>

</FONT>

<BR>

<TABLE border=0>

<TBODY>

<TR><TD bgColor=#ffd5ea>

【原材料】<BR>

●とちおとめいちジャム<BR>

いちご(国産)、砂糖、レモン果汁、ゲル化剤（ペクチン）<BR>

【内容量】<BR>

200g×12 本<BR>

【賞味期限】<BR>

製造日より６ヶ月<BR>

【保存方法】<BR>

開栓前は直射日光を避け常温で保存<BR>

開栓後は要冷蔵。<BR>

</TD></TR>

</TBODY>

</TABLE>

<BR>

<FONT color=red size=3>

■ご注意■<BR>

(1)包装、のしは対応しておりません。<BR>

(2)この商品は山口県から発送いたします。<BR>

</FONT>

<BR><BR>

※上記内容をフリースペースに記載した場合、以下のような表示イメージとなります。

Softcreate co., ltd

タグの記載については上記内容の応用となります。

まずはタグでどんな事が出来るのかを理解するため、タグの種類を把握する事がイメージに合わせたデザ

インを表示することにつながります。もちろんタグの種類はたくさんありますが、頻繁に使用するタグはだ

いたい決まってきますのでいろいろなホームページのソース表示を参考にされるのもよいかと思います。

1.2.2. HTML タグの種類（主要タグ）

よく利用されるタグについて一覧に取りまとめます。

ecbeing では一部利用できないタグがあります。ページ全体に影響を与えるタグ（<body>,<meta>等）や

入力フォームを表示するタグ（<input>,<form>等）はページ崩れの原因となりますので利用しないようお願

いいたします。

Ａ

タグ（要素） 用途 利用

<a> 指定文字（画像）にリンク張る ○

Ｂ

タグ（要素） 用途 利用

<big> 文字を一段階大きくする ○

<body> 実際にブラウザに表示されるページの本文 ×

<br> 改行 ○

Ｃ

タグ（要素） 用途 利用

<caption> 表にキャプション付与 ○

<center> 行揃え（中心） ○

Ｄ

タグ（要素） 用途 利用

<dd> 定義語リストの内容 ○

<dir> 箇条書き（ディレクトリリストを表示） ○

<div> 段落文章（スタイルシートでブロック要素としても使用） ○

<dl> 定義語の説明 ○

<dt> 定義語 ○

Ｅ

タグ（要素） 用途 利用

<em> 文字の強調表示 ○

Ｆ

タグ（要素） 用途 利用

<font> 文字サイズ、書体指定、文字色等 ○

<form> 入力フォーム ×

Ｈ

タグ（要素） 用途 利用

<head> ヘッダー情報記述 ×

<hr> 水平線（区切り線） ○

<html> html文章指定（宣言） ×

<h1>・・・<h6> 見出し（数字が小さい程より大きく表示） ○

Ｉ

タグ（要素） 用途 利用

<i> 文字を斜体（イタリック）にする ○

<img> 画像を表示 ○

<input> 入力フォーム・チェックボックス・送信ボタン等を作成 ×

Softcreate co., ltd

Ｌ

タグ（要素） 用途 利用

<li> 箇条書き（通し番号なし）リスト項目 ○

<link> スタイルシートの読み込み △

Ｍ

タグ（要素） 用途 利用

<marquee> 文字の移動 ○

<menu> 箇条書き（メニュリスト） ○

<meta> ページ付加情報（ページの説明、著作権、キーワード等） ×

Ｏ

タグ（要素） 用途 利用

<ol> 箇条書き（通し番号あり） ○

<option> 選択メニューの作成（ポップアップメニュー項目） ×

Ｐ

タグ（要素） 用途 利用

<p> 段落文章 ○

<plaintext> HTML タグを無視してテキストをそのまま表示 ○

<pre> HTML タグは解釈（反映）してテキストを表示 ○

Ｒ

タグ（要素） 用途 利用

<rp> ruby タグ未対応ブラウザ用表示文字 ○

<rt> ふりがな（ルビ） ○

<ruby> ふりがな（ルビ）を付与する ○

Ｓ

タグ（要素） 用途 利用

<s> 文字の取り消し線 ○

<script> スクリプト指定（定義） ×

<select> 選択メニューの作成（ポップアップメニュー項目） ×

<small> 文字を一段階小さくする ○

<spacer> 空白サイズ指定 ○

<span> 段落文章の一部の文字にスタイルを適用 ○

<strike> 文字の取り消し線 ○

<strong> 文字の強調表示（<em>より強調） ○

<sub> 文字の下付き文字 ○

<sup> 文字の上付き文字 ○

Ｔ

タグ（要素） 用途 利用

<table> 表の作成 ○

<td> 表のセル ○

<textarea> 複数行の入力欄 ×

<th> 表の見出しセル ○

<title> ページタイトル ×

<tr> 表の各 1行 ○

<tt> 等幅文字 ○

Ｕ

タグ（要素） 用途 利用

<u> 文字に下線を付与 ○

<ul> 箇条書き（通し番号なし） ○

Softcreate co., ltd

22.. HHttmmll 編編集集ツツーールル

Softcreate co., ltd

2.1. HTML 編集ツール

管理画面のフリースペースおよびテンプレートの項目には、項目したに HTML 編出ツールの起動ボタンを

用意しております。HTML タグでの記載が不慣れな場合はこのツールを利用して簡易的なデザインを行うこ

とが可能となります。

2.1.1. HTML 編集ツール操作

HTML編集ツールは、商品系管理画面や CMS 管理画面のフリースペースおよびテンプレートに補助ツール

として用意しております。

各画面の HTML編集ツールボタンをクリックし起動してください。

編集ツール右上の三角ボタンをクリックすることで編集ツールを開くことができます。

編集を行う場合は、デザイン適用する文字列を選択してツール内のフォントの変更や色の変更を行います。

Softcreate co., ltd

選択箇所の背景色を緑に変更してみます。

Softcreate co., ltd

そのほか選択をせずに利用することが可能なツール（表の挿入やイメージの挿入）もあります。

マウスのカーソルをツールの各種ボタンに合わせることで、編集する内容がヘルプ表示されますのでデザ

インに合わせて利用するようにしてください。

デザインの編集が終了したら、左下の適用ボタンを押下します。

ツールで編集したデザインが該当項目に反映されます。

※編集ツールを利用した場合の注意

・商品詳細項目として登録する前に必ずプレビュー画面を開き、デザインを確認してください。

・デザイン途中の場合は、状態を下書きなどで仮登録するようにしてください。

Softcreate co., ltd

修正した HTMLを適用し、商品詳細画面のプレビューボタンをクリックすることで表示したフロントでの

見え方は以下のイメージの通り。

HTMLでは記載していない項目や行は左上に詰めて表示される言語となります。そのため実際に表示され

た際に意図しない表示のされかたをする場合があるため、デザインを登録する前にプレビューで確認を行う

ようにしてください。

HTML編集ツールで適用しても商品詳細にすぐに登録はされません。適用後に商品の登録および更新をす

ることにより本登録となりますので、適用⇒プレビューを繰り返し確認後に登録を行うようにしてください。

Softcreate co., ltd

2.1.2. HTML 編集ツールを利用しない場合（補助的に利用する場合）

HTML編集ツール外で作成した HTMLを HTML エディタに適用しようとすると、HTML 編集ツールの補助機能

によりタグの自動補完が行われ、意図した HTMLとならない可能性が高くなります。

そのため補助的に利用する場合は、必ずテキストファイルなどと合わせて終了タグの確認を行うようにし

てください。

テキストツール（メモ帳など）で HTMLを作成しその内容を HTML編集ツールに適用する場合、以下のイメ

ージのように編集ツールをソース表示に切り替えて貼り付けます。

終了タグを記載していない状態

Softcreate co., ltd

そのうえでソース表示からデザインに戻し適用した場合、記載内容をチェック終了タグがない場合は

HTML編集ツールの補助機能として終了タグの補完を行います。

適用された HTML をテキストツール（メモ帳など）で確認してみましょう。

Softcreate co., ltd

上記例の場合、適用後のソースプログラムを確認すると、Font タグの終了タグの補完は行われております

が開始タグの位置も移動しております。

HTML編集ツールの補助機能により大きなデザイン崩れを起こすことはありませんが、作成者の意図しな

いような補完を行う場合があるため、補助的に利用する場合であっても、再度テキストツールで記載内容を

確認するようにしてください。

また HTML 補助ツールでは自動補完が補助機能として必ず機能するため、他のフリースペースにまたがっ

てタグの開始、終了タグを記載する場合は HTML編集ツールを利用しないようお願いいたします。