1 Html 編集ツール補足マニュアル Ver.1.0 株式会社ソフトクリエイト 2012/11/14 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 1. Html について 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>水平線等）。 <h1> 見出し記述 </h1> （記述内容）要素要素終了タグ開始タグ ② 開始タグについて開始タグには「属性（attribute）」と「属性値（value）」を必要に応じて追加する事が出来ます。属性は対象となる要素に加える性質にあたる項目で、その属性を具体的に表すのが属性値です。 <h1 align=”center”> 要素属性開始タグ属性値見出し記述 </h1> （記述内容）終了タグ ※上記では、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> 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> <h1>・・・<h6> Ｉタグ（要素） <i> <img> <input> 用途指定文字（画像）にリンク張る利用 ○ 用途文字を一段階大きくする実際にブラウザに表示されるページの本文改行利用 ○ × ○ 用途表にキャプション付与行揃え（中心）利用 ○ ○ 用途定義語リストの内容箇条書き（ディレクトリリストを表示）段落文章（スタイルシートでブロック要素としても使用）定義語の説明定義語利用 ○ ○ ○ ○ ○ 用途文字の強調表示利用 ○ 用途文字サイズ、書体指定、文字色等入力フォーム利用 ○ × 用途ヘッダー情報記述水平線（区切り線） html 文章指定（宣言）見出し（数字が小さい程より大きく表示）利用 × ○ × ○ 用途文字を斜体（イタリック）にする画像を表示入力フォーム・チェックボックス・送信ボタン等を作成利用 ○ ○ × Softcreate co., ltd Ｌタグ（要素） <li> <link> Ｍタグ（要素） <marquee> <menu> <meta> Ｏタグ（要素） <ol> <option> Ｐタグ（要素） <p> <plaintext> <pre> Ｒタグ（要素） <rp> <rt> <ruby> Ｓタグ（要素） <s> <script> <select> <small> <spacer> <span> <strike> <strong> <sub> <sup> Ｔタグ（要素） <table> <td> <textarea> <th> <title> <tr> <tt> Ｕタグ（要素） <u> <ul> 用途箇条書き（通し番号なし）リスト項目スタイルシートの読み込み利用 ○ △ 用途文字の移動箇条書き（メニュリスト）ページ付加情報（ページの説明、著作権、キーワード等）利用 ○ ○ × 用途箇条書き（通し番号あり）選択メニューの作成（ポップアップメニュー項目）利用 ○ × 用途段落文章 HTML タグを無視してテキストをそのまま表示 HTML タグは解釈（反映）してテキストを表示利用 ○ ○ ○ 用途 ruby タグ未対応ブラウザ用表示文字ふりがな（ルビ）ふりがな（ルビ）を付与する利用 ○ ○ ○ 用途文字の取り消し線スクリプト指定（定義）選択メニューの作成（ポップアップメニュー項目）文字を一段階小さくする空白サイズ指定段落文章の一部の文字にスタイルを適用文字の取り消し線文字の強調表示（<em>より強調）文字の下付き文字文字の上付き文字利用 ○ × × ○ ○ ○ ○ ○ ○ ○ 用途表の作成表のセル複数行の入力欄表の見出しセルページタイトル表の各 1 行等幅文字利用 ○ ○ × ○ × ○ ○ 用途文字に下線を付与箇条書き（通し番号なし）利用 ○ ○ Softcreate co., ltd 2. Html 編集ツール 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 編集ツールを利用しないようお願いいたします。 Softcreate co., ltd