1 Html 編 集 ツール 補 足 マニュアル Ver.1.0 株 式 会 社 ソフトクリエイト 2012/11/14
目 次 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
1. Html について
1.1. Html とは HTML とは Web ページ(ecbeing ではフロントの 各 商 品 などのページ)を 作 成 する 為 の 基 本 言 語 (マーク アップ 言 語 )の 一 つで 各 ページを 表 示 させるためブラウザに 理 解 させるための 記 載 ルールとなります HTML(Hyper Text Markup Language の 略 ) は 文 字 のみで 構 成 されているテキストファイル(HTML ファ イル)で 文 字 や 画 像 をブラウザで 表 示 しております HTML ファイルはタグ( 記 載 ルール)と 呼 ばれる 文 字 列 を 挿 入 して 作 成 していきますがタグというのは < と > で 挟 まれたものを 指 します 例 として HTML ファイルはテキストで 構 成 されているので 画 像 ファイルを 直 接 挿 入 する 事 は 出 来 ません そのため 表 示 箇 所 にイメージ(gif jpg 画 像 など)を 入 れるというタグ( 記 載 ルールに 沿 ったテキスト) を 記 述 します そこでブラウザはその 記 述 を 解 釈 して 画 像 を 表 示 しているのです Web ページ( 商 品 などのページ)をデザインまたはレイアウトする 場 合 フリースペースやテンプレート の 箇 所 については HTML タグ(table タグなど)を 編 集 することによりショップ 独 自 のデザインを 表 示 する ことができますが サイトの 共 通 部 分 やシステムにかかわる 箇 所 について 変 更 できないよう 制 限 をしており ます また 今 回 のバージョンアップにより 管 理 画 面 上 で HTML を 理 解 していない 方 でも 視 覚 的 にデザインを 作 成 編 集 できるよう HTML 編 集 ツールを 導 入 しております 本 ツールについて 各 種 制 限 事 項 はありますが HTML のタグ( 記 載 ルール)を 理 解 していない 方 でも 簡 易 的 なデザインを 行 うことが 可 能 となっております
1.2. Html タグの 基 本 1.2.1. HTML タグの 基 本 ルール HTML タグとは < と > の 記 号 で 挟 まれた 特 定 の 文 字 列 ( 要 素 (element))のことを 指 します Web ページを 表 示 するにはタグを 記 載 するだけで 出 来 上 がります ecbeing 管 理 画 面 のフリースペースやテ ンプレートもタグを 含 めた 記 載 をするとデザインを 表 示 することができます 1 タグ 記 載 の 前 提 基 本 的 にタグは 対 になっていて 開 始 タグと 終 了 タグがあり 終 了 タグは 先 頭 に / スラッシュを 記 述 します ただし 例 外 のタグがあります(<br> 改 行,<hr> 水 平 線 等 ) 要 素 開 始 タグ <h1> 見 出 し 記 述 </h1> ( 記 述 内 容 ) 要 素 終 了 タグ 2 開 始 タグについて 開 始 タグには 属 性 (attribute) と 属 性 値 (value) を 必 要 に 応 じて 追 加 する 事 が 出 来 ます 属 性 は 対 象 となる 要 素 に 加 える 性 質 にあたる 項 目 で その 属 性 を 具 体 的 に 表 すのが 属 性 値 です <h1 align= center > 見 出 し 記 述 </h1> 要 素 属 性 属 性 値 ( 記 述 内 容 ) 開 始 タグ 終 了 タグ 上 記 では align が 属 性 で center がその 属 性 値 になります align 属 性 は 横 方 向 の 並 びを 指 定 する 属 性 で center はセンタリングを 意 味 する 属 性 値 で つま りここでのh 要 素 は センタリングして 表 示 するという 性 質 が 追 加 されていることになります 尚 属 性 はスペースで 区 切 って 複 数 指 定 する 事 も 出 来 ます 3 フリースペースやテンプレートへの 記 載 例 <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>
(200g 12 本 )<BR> </FONT> <BR> <TABLE border=0> <TBODY> <TR><TD bgcolor=#ffd5ea> 原 材 料 <BR> とちおとめいちジャム<BR> いちご( 国 産 ) 砂 糖 レモン 果 汁 ゲル 化 剤 (ペクチン)<BR> 内 容 量 <BR> 200g 12 本 <BR> 賞 味 期 限 <BR> 製 造 日 より6ヶ 月 <BR> 保 存 方 法 <BR> 開 栓 前 は 直 射 日 光 を 避 け 常 温 で 保 存 <BR> 開 栓 後 は 要 冷 蔵 <BR> </TD></TR> </TBODY> </TABLE> <BR> <FONT color=red size=3> ご 注 意 <BR> (1) 包 装 のしは 対 応 しておりません <BR> (2)この 商 品 は 山 口 県 から 発 送 いたします <BR> </FONT> <BR><BR> 上 記 内 容 をフリースペースに 記 載 した 場 合 以 下 のような 表 示 イメージとなります
タグの 記 載 については 上 記 内 容 の 応 用 となります まずはタグでどんな 事 が 出 来 るのかを 理 解 するため タグの 種 類 を 把 握 する 事 がイメージに 合 わせたデザ インを 表 示 することにつながります もちろんタグの 種 類 はたくさんありますが 頻 繁 に 使 用 するタグはだ いたい 決 まってきますのでいろいろなホームページのソース 表 示 を 参 考 にされるのもよいかと 思 います 1.2.2. HTML タグの 種 類 ( 主 要 タグ) よく 利 用 されるタグについて 一 覧 に 取 りまとめます ecbeing では 一 部 利 用 できないタグがあります ページ 全 体 に 影 響 を 与 えるタグ(<body>,<meta> 等 )や 入 力 フォームを 表 示 するタグ(<input>,<form> 等 )はページ 崩 れの 原 因 となりますので 利 用 しないようお 願 いいたします A <a> 指 定 文 字 ( 画 像 )にリンク 張 る B <big> 文 字 を 一 段 階 大 きくする <body> 実 際 にブラウザに 表 示 されるページの 本 文 <br> 改 行 C <caption> 表 にキャプション 付 与 <center> 行 揃 え( 中 心 ) D <dd> 定 義 語 リストの 内 容 <dir> 箇 条 書 き(ディレクトリリストを 表 示 ) <div> 段 落 文 章 (スタイルシートでブロック 要 素 としても 使 用 ) <dl> 定 義 語 の 説 明 <dt> 定 義 語 E <em> 文 字 の 強 調 表 示 F <font> 文 字 サイズ 書 体 指 定 文 字 色 等 <form> 入 力 フォーム H <head> ヘッダー 情 報 記 述 <hr> 水 平 線 ( 区 切 り 線 ) <html> html 文 章 指 定 ( 宣 言 ) <h1> <h6> 見 出 し( 数 字 が 小 さい 程 より 大 きく 表 示 ) I <i> 文 字 を 斜 体 (イタリック)にする <img> 画 像 を 表 示 <input> 入 力 フォーム チェックボックス 送 信 ボタン 等 を 作 成
L <li> 箇 条 書 き( 通 し 番 号 なし)リスト 項 目 <link> スタイルシートの 読 み 込 み M <marquee> 文 字 の 移 動 <menu> 箇 条 書 き(メニュリスト) <meta> ページ 付 加 情 報 (ページの 説 明 著 作 権 キーワード 等 ) O <ol> 箇 条 書 き( 通 し 番 号 あり) <option> 選 択 メニューの 作 成 (ポップアップメニュー 項 目 ) P <p> 段 落 文 章 <plaintext> HTML タグを 無 視 してテキストをそのまま 表 示 <pre> HTML タグは 解 釈 ( 反 映 )してテキストを 表 示 R <rp> ruby タグ 未 対 応 ブラウザ 用 表 示 文 字 <rt> ふりがな(ルビ) <ruby> ふりがな(ルビ)を 付 与 する S <s> 文 字 の 取 り 消 し 線 <script> スクリプト 指 定 ( 定 義 ) <select> 選 択 メニューの 作 成 (ポップアップメニュー 項 目 ) <small> 文 字 を 一 段 階 小 さくする <spacer> 空 白 サイズ 指 定 <span> 段 落 文 章 の 一 部 の 文 字 にスタイルを 適 用 <strike> 文 字 の 取 り 消 し 線 <strong> 文 字 の 強 調 表 示 (<em>より 強 調 ) <sub> 文 字 の 下 付 き 文 字 <sup> 文 字 の 上 付 き 文 字 T <table> 表 の 作 成 <td> 表 のセル <textarea> 複 数 行 の 入 力 欄 <th> 表 の 見 出 しセル <title> ページタイトル <tr> 表 の 各 1 行 <tt> 等 幅 文 字 U <u> 文 字 に 下 線 を 付 与 <ul> 箇 条 書 き( 通 し 番 号 なし)
2. Html 編 集 ツール
2.1. HTML 編 集 ツール 管 理 画 面 のフリースペースおよびテンプレートの 項 目 には 項 目 したに HTML 編 出 ツールの 起 動 ボタンを 用 意 しております HTML タグでの 記 載 が 不 慣 れな 場 合 はこのツールを 利 用 して 簡 易 的 なデザインを 行 うこ とが 可 能 となります 2.1.1. HTML 編 集 ツール 操 作 HTML 編 集 ツールは 商 品 系 管 理 画 面 や CMS 管 理 画 面 のフリースペースおよびテンプレートに 補 助 ツール として 用 意 しております 各 画 面 の HTML 編 集 ツールボタンをクリックし 起 動 してください 編 集 ツール 右 上 の 三 角 ボタンをクリックすることで 編 集 ツールを 開 くことができます 編 集 を 行 う 場 合 は デザイン 適 用 する 文 字 列 を 選 択 してツール 内 のフォントの 変 更 や 色 の 変 更 を 行 います
選 択 箇 所 の 背 景 色 を 緑 に 変 更 してみます
そのほか 選 択 をせずに 利 用 することが 可 能 なツール( 表 の 挿 入 やイメージの 挿 入 )もあります マウスのカーソルをツールの 各 種 ボタンに 合 わせることで 編 集 する 内 容 がヘルプ 表 示 されますのでデザ インに 合 わせて 利 用 するようにしてください デザインの 編 集 が 終 了 したら 左 下 の 適 用 ボタンを 押 下 します ツールで 編 集 したデザインが 該 当 項 目 に 反 映 されます 編 集 ツールを 利 用 した 場 合 の 注 意 商 品 詳 細 項 目 として 登 録 する 前 に 必 ずプレビュー 画 面 を 開 き デザインを 確 認 してください デザイン 途 中 の 場 合 は 状 態 を 下 書 きなどで 仮 登 録 するようにしてください
修 正 した HTML を 適 用 し 商 品 詳 細 画 面 のプレビューボタンをクリックすることで 表 示 したフロントでの 見 え 方 は 以 下 のイメージの 通 り HTML では 記 載 していない 項 目 や 行 は 左 上 に 詰 めて 表 示 される 言 語 となります そのため 実 際 に 表 示 され た 際 に 意 図 しない 表 示 のされかたをする 場 合 があるため デザインを 登 録 する 前 にプレビューで 確 認 を 行 う ようにしてください HTML 編 集 ツールで 適 用 しても 商 品 詳 細 にすぐに 登 録 はされません 適 用 後 に 商 品 の 登 録 および 更 新 をす ることにより 本 登 録 となりますので 適 用 プレビューを 繰 り 返 し 確 認 後 に 登 録 を 行 うようにしてください
2.1.2. HTML 編 集 ツールを 利 用 しない 場 合 ( 補 助 的 に 利 用 する 場 合 ) HTML 編 集 ツール 外 で 作 成 した HTML を HTML エディタに 適 用 しようとすると HTML 編 集 ツールの 補 助 機 能 によりタグの 自 動 補 完 が 行 われ 意 図 した HTML とならない 可 能 性 が 高 くなります そのため 補 助 的 に 利 用 する 場 合 は 必 ずテキストファイルなどと 合 わせて 終 了 タグの 確 認 を 行 うようにし てください 終 了 タグを 記 載 していない 状 態 テキストツール(メモ 帳 など)で HTML を 作 成 しその 内 容 を HTML 編 集 ツールに 適 用 する 場 合 以 下 のイメ ージのように 編 集 ツールをソース 表 示 に 切 り 替 えて 貼 り 付 けます
そのうえでソース 表 示 からデザインに 戻 し 適 用 した 場 合 記 載 内 容 をチェック 終 了 タグがない 場 合 は HTML 編 集 ツールの 補 助 機 能 として 終 了 タグの 補 完 を 行 います 適 用 された HTML をテキストツール(メモ 帳 など)で 確 認 してみましょう
上 記 例 の 場 合 適 用 後 のソースプログラムを 確 認 すると Font タグの 終 了 タグの 補 完 は 行 われております が 開 始 タグの 位 置 も 移 動 しております HTML 編 集 ツールの 補 助 機 能 により 大 きなデザイン 崩 れを 起 こすことはありませんが 作 成 者 の 意 図 しな いような 補 完 を 行 う 場 合 があるため 補 助 的 に 利 用 する 場 合 であっても 再 度 テキストツールで 記 載 内 容 を 確 認 するようにしてください また HTML 補 助 ツールでは 自 動 補 完 が 補 助 機 能 として 必 ず 機 能 するため 他 のフリースペースにまたがっ てタグの 開 始 終 了 タグを 記 載 する 場 合 は HTML 編 集 ツールを 利 用 しないようお 願 いいたします