Microsoft PowerPoint - ⅩII-Allin1SP_HTMLエディタ.ppt [互換モード]

HTML EDITOR HTMLエディタ マニュアル

目 次 HTMLエディタの 機 能 概 要 概 要 2 画 面 構 成 2 HTMLエディタの 機 能 説 明 各 ツールの 説 明 3 ツールの 詳 細 説 明 5 1

HTMLエディタ 機 能 概 要 概 要 HTMLエディタは ワープロソフトのように 直 感 的 にウェブページ(HTML 文 書 )を 編 集 するための 補 助 ツール です HTMLエディタは Allin1Office 管 理 画 面 のいくつかのページ 編 集 機 能 に 付 属 しています 各 種 ツールを 利 用 することで HTMLを 意 識 することなくウェブページを 作 成 することができます 画 面 構 成 1 2 3 4 1 モード 切 替 タブ エディタ モードと HTML モードを 切 り 替 えます エディタモード はHTMLエディタを 使 用 するモードです 対 して HTML モードは HTMLエディタを 使 用 せ ず HTMLソースを 直 接 編 集 するモードです どちらのモードを 使 用 しても 編 集 するソースは 同 じものですので 途 中 でモードを 切 り 替 えながら 編 集 するこ とが 可 能 です 2 ツールパネル HTMLエディタの 各 種 機 能 を 利 用 するためのツールを 選 択 するパネルです 対 象 のツールのアイコンをクリックすることで ツールを 利 用 することができます 3 編 集 欄 編 集 するHTML 文 書 の 内 容 が 表 示 されます ここにテキストを 入 力 しながらツールを 利 用 して 編 集 します 4 パスおよび 伸 縮 ボタン 編 集 欄 で 現 在 カーソルのある 場 所 がタグの 階 層 で 表 示 されます 右 端 の 伸 縮 ボタンは ドラッグすることで 編 集 欄 を 上 下 に 伸 縮 させることができます 2

各 ツールの 説 明 切 り 取 り 選 択 範 囲 を 切 り 取 ります コピー 選 択 範 囲 をコピーします 貼 り 付 け 切 り 取 りまたはコピーした 内 容 を 貼 り 付 けます 検 索 編 集 中 の 文 書 内 を 検 索 します 検 索 / 置 換 編 集 中 の 文 書 内 で 検 索 及 び 置 換 をおこないます 取 消 し 作 業 を1 段 階 取 り 消 します やり 直 し 取 り 消 した 作 業 をやり 直 します テキストの 色 選 択 範 囲 のテキストの 色 を 変 更 します ハイライトカ ラー 選 択 範 囲 のテキストに 背 景 色 を 設 定 します 太 字 選 択 範 囲 のテキストを 太 字 に します 斜 体 選 択 範 囲 のテキストを 斜 体 に します 下 線 選 択 範 囲 のテキストに 下 線 を 適 用 します 打 消 し 線 選 択 範 囲 のテキストに 打 消 し 線 を 適 用 します 左 揃 え 選 択 範 囲 の 行 のテキストを 左 揃 えにします 真 中 揃 え 選 択 範 囲 の 行 のテキストを 真 中 揃 えにします 右 揃 え 選 択 範 囲 の 行 のテキストを 右 揃 えにします 両 端 揃 え 選 択 範 囲 の 行 のテキストを 両 端 揃 えにします リンク 選 択 範 囲 のテキストにリンク を 設 定 します リンク 解 除 適 用 したリンクを 解 除 します アンカー アンカーを 挿 入 します イメージ 挿 入 イメージを 挿 入 します 水 平 線 挿 入 水 平 線 を 挿 入 します 日 付 挿 入 現 在 の 日 付 を 挿 入 します 時 間 挿 入 現 在 の 時 間 を 挿 入 します 順 不 同 リスト 選 択 箇 所 を 順 不 同 リストにしま す 順 序 リスト 選 択 箇 所 を 順 序 リストに 設 定 します 下 付 き 選 択 箇 所 を 下 付 き 文 字 に 設 定 します 上 付 き 選 択 箇 所 を 上 付 き 文 字 に 設 定 します 特 殊 文 字 特 殊 文 字 を 挿 入 します マルチメディア の 挿 入 / 修 正 マルチメディアを 挿 入 します 顔 文 字 顔 文 字 を 挿 入 します CSSスタイル 編 集 選 択 範 囲 にCSSスタイルを 適 用 します 書 式 をクリア 選 択 範 囲 に 設 定 された 各 種 書 式 をクリアします ガイドの 表 示 ガイドの 表 示 / 非 表 示 を 切 り 替 えます テーブルの 挿 入 テーブルを 挿 入 します 行 のプロパ ティ 選 択 しているテーブルの 行 の プロパティを 編 集 します セルのプロパ 選 択 しているテーブルのセル テーブルで 選 択 している 行 の 上 に 行 を 挿 入 ティ のプロパティを 編 集 します 上 に 行 を 挿 入 します 下 に 行 を 挿 入 テーブルで 選 択 している 行 の 下 に 行 を 挿 入 します 行 の 削 除 テーブルで 選 択 している 行 を 削 除 します 左 に 列 を 挿 入 テーブルで 選 択 している 列 の 左 に 列 を 挿 入 します 右 に 列 を 挿 入 テーブルで 選 択 している 列 の 右 に 列 を 挿 入 します 3

列 の 削 除 テーブルで 選 択 している 列 を 削 除 します セルの 分 割 テーブルで 結 合 したセルを 分 割 します セルの 結 合 テーブルで 選 択 しているセル 新 規 レイヤー 挿 新 規 にレイヤーを 挿 入 しま の 結 合 設 定 をおこないます 入 す 前 面 へ 移 動 選 択 しているレイヤーの 順 序 を 前 面 へ 移 動 します 背 面 へ 移 動 選 択 しているレイヤーの 順 序 を 背 面 へ 移 動 します 絶 対 位 置 切 り 替 え 選 択 しているレイヤーの 位 置 設 定 を 変 更 します コードの 整 理 乱 れたコードを 整 理 します HTML 表 示 編 集 中 の 文 書 のHTMLソース を 表 示 します プレビュー 編 集 中 の 文 書 のプレビュー を 表 示 します フルスクリーン モード 切 替 エディタをフルスクリーンモード に 切 り 替 えます 印 刷 編 集 中 の 文 書 を 印 刷 します 書 体 設 定 選 択 箇 所 の 書 体 を 設 定 します 文 字 サイズ 設 定 選 択 箇 所 の 文 字 サイズを 設 定 します 4

ツールの 詳 細 説 明 各 ツールの 中 で 複 雑 なインターフェースや 機 能 を 有 するものについて 詳 細 な 説 明 を 記 載 します 検 索 検 索 / 置 換 編 集 中 の 文 書 中 で 特 定 の 文 字 列 の 検 索 及 び 置 換 をおこないます アイコンをクリックすると 検 索 及 び 置 換 をおこなうためのウィンドウが 開 きます 検 索 置 換 のタブをクリックすることで 検 索 と 検 索 / 置 換 を 切 り 替 えることができます 検 索 検 索 文 字 列 方 向 大 文 字 と 小 文 字 を 区 別 する 次 を 検 索 検 索 対 象 の 文 字 列 を 入 力 します 編 集 欄 のカーソル 位 置 からどちらの 方 向 へ 検 索 を 実 行 するかを 選 択 します 検 索 時 アルファベットの 大 文 字 と 小 文 字 を 区 別 するかどうかを 設 定 します 検 索 を 実 行 します ヒットした 状 態 であれば 次 の 対 象 を 検 索 します 置 換 検 索 文 字 列 置 換 文 字 列 方 向 大 文 字 と 小 文 字 を 区 別 する 次 を 検 索 置 換 すべて 置 換 検 索 対 象 の 文 字 列 を 入 力 します 検 索 でヒットした 文 字 列 を 置 換 する 文 字 列 を 入 力 します 編 集 欄 のカーソル 位 置 からどちらの 方 向 へ 検 索 を 実 行 するかを 選 択 します 検 索 時 アルファベットの 大 文 字 と 小 文 字 を 区 別 するかどうかを 設 定 します 検 索 を 実 行 します ヒットした 状 態 であれば 次 の 対 象 を 検 索 します 置 換 は 行 いません 検 索 を 実 行 してヒットした 文 字 列 に 置 換 を 実 行 します まだ 検 索 が 行 われていない 状 態 であれば 検 索 をおこないます 検 索 してヒットした 文 字 列 すべてを 一 括 で 置 換 します 5

テキストの 色 編 集 中 の 文 書 中 で 選 択 されている 範 囲 のテキストの 色 を 変 更 します アイコン 部 分 をクリックすると 現 在 選 択 されている 色 が 適 用 されます 現 在 適 用 されてい る 色 はアイコンの 下 のバーで 示 されます 色 を 変 更 する 場 合 は 右 の ボタンをクリックすれば カラーリストが 表 示 され 色 を 選 択 することができます カラーリストで 選 択 できるのは あらかじめ 用 意 された40 色 ですが お 好 みの 色 が 無 い 場 合 は その 他 をクリックすれば 別 途 カラー 選 択 ウィンドウが 開 き さらに 多 くの 色 を 選 択 することできます カラー 選 択 ウィンドウでは 3つのタブでカラー 選 択 モードを 切 り 替 えることができます どのモードでも 色 を 選 択 すると 右 下 のカラーコードと 実 際 の 色 表 示 が 更 新 されます ピッカー 色 の 分 布 図 から 色 を 選 択 します まず 左 側 の 色 相 および 彩 度 の 分 布 図 から 目 的 の 色 相 彩 度 の 色 を 選 択 します 左 右 が 色 相 の 上 下 が 彩 度 の 分 布 です 次 に 右 端 の 明 度 分 布 図 で 目 的 の 明 度 を 選 択 します この 方 法 が 最 も 広 い 範 囲 の 色 を 選 択 することができます パレット WEBセーフカラー216 色 のリストから 色 を 選 択 します 色 名 HTMLで 色 名 が 規 定 されている138 色 のリストから 色 を 選 択 します リストは 色 名 のアルファベット 順 に 並 んでいます 色 アイコンにマウスを 乗 せると リスト 下 部 の 色 名 欄 に 色 名 が 表 示 されます ここで 色 を 選 択 してテキストの 色 を 設 定 しても コード 上 は 色 名 で はなくカラーコードで 指 定 されます 6

ハイライトカラー 編 集 中 の 文 書 中 で 選 択 されている 範 囲 のテキストの 背 景 色 を 変 更 します テキストの 色 と 併 用 することができます ハイライトカラーを 適 用 したテキストの 例 : アイコン 部 分 をクリックすると 現 在 選 択 されている 色 が 適 用 されます 現 在 適 用 されてい る 色 はアイコンの 下 のバーで 示 されます 色 を 変 更 する 場 合 は 右 の ボタンをクリックすれば カラーリストが 表 示 され 色 を 選 択 することができます 色 選 択 の 使 い 方 は テキストの 色 でのそれと 同 じです テキストの 色 の 項 をご 参 照 ください リンク リンク 解 除 編 集 中 の 文 書 中 で 選 択 されている 範 囲 にリンクを 設 定 します リンクの 設 定 は テキストだけでなく 画 像 にも 設 定 することができます リンクの 設 定 は4つのタブにまたがっており 詳 細 な 設 定 ができます 既 にリンクを 設 定 した 領 域 内 にカーソルがある 状 態 で リンク アイコンをクリックした 場 合 は 各 種 設 定 欄 にリンクの 情 報 があらかじめ 挿 入 され 上 方 修 正 を 行 うことができます 同 様 に 既 にリンクを 設 定 した 領 域 内 にカーソルがある 状 態 で リンク 解 除 アイコンをクリックすれば リン クを 解 除 することができます 基 本 リンクに 関 する 基 本 設 定 を 行 います 最 低 限 ここの 情 報 だけを 設 定 すればリンクを 設 定 することができます リンクURL アンカー ターゲット タイトル クラス リンク 先 のURLを 入 力 します 編 集 中 の 文 書 内 にアンカーが 設 置 されている 場 合 ここにリストされます リストからアンカー 名 を 選 択 すると リンクURL の 欄 にアンカー 名 が 自 動 的 に 挿 入 されます リンクをクリックしたときに リンク 先 を 表 示 する 対 象 を 選 択 します リンクのタイトルを 設 定 します タイトルを 設 定 することで 検 索 エンジン 対 策 として 有 効 であった り ブラウザによってはマウスを 乗 せたときにタイトル 文 字 が 表 示 されることが 期 待 できます スタイルシートのクラスを 設 定 します 7

ポップアップ リンクをポップアップウィンドウで 開 く 場 合 の 設 定 をします ポップアップではなく 通 常 のウィンドウで 開 く 場 合 は 使 用 しま せん JavaScriptポップアップ ポップアップURL ウィンドウタイトル サイズ ポジション ロケーションバーを 表 示 スクロールバーを 表 示 メニューバーを 表 示 ウィンドウサイズ 変 更 可 能 設 定 ツールバーを 表 示 従 属 ウィンドウ ステータスバーを 表 示 return false 挿 入 ポップアップを 使 用 するかどうかを 設 定 します ここにチェックを 入 れない 場 合 ポップアップを 使 用 しないことになり 以 下 の 設 定 は 全 て 無 効 となります ポップアップウィンドウに 表 示 するURLを 入 力 します ポップアップウィンドウの 名 前 を 入 力 します (JavaScriptで 利 用 するためのものであり 画 面 上 に 表 示 されるものではありません) ポップアップウィンドウのサイズ( 横 縦 )を 入 力 します ポップアップウィンドウが 表 示 されたときの 初 期 位 置 (X 座 標 / Y 座 標 )を 入 力 します 座 標 は 画 面 左 上 を 基 準 として 右 方 向 への 距 離 をx 下 方 向 への 距 離 をyとします ポップアップウィンドウにロケーションバー(URL 表 示 )をするかどうかを 設 定 します 表 示 する 場 合 はチェックを 入 れます ポップアップウィンドウにスクロールバーを 表 示 するかどうかを 設 定 します 表 示 する 場 合 はチェックを 入 れます ポップアップウィンドウにメニューバーを 表 示 するかどうかを 設 定 します 表 示 する 場 合 はチェックを 入 れます ポップアップウィンドウをサイズ 変 更 可 能 にするかどうかを 設 定 します 可 能 にする 場 合 はチェックを 入 れます ポップアップウィンドウにツールバーを 表 示 するかどうかを 設 定 します 表 示 する 場 合 はチェックを 入 れます 親 ウィンドウを 閉 じたときに ポップアップウィンドウも 同 時 に 閉 じるかどうかを 設 定 します ポップアップウィンドウにステータスバーを 表 示 するかどうかを 設 定 します 表 示 する 場 合 はチェックを 入 れます ポップアップウィンドウを 表 示 するJavaScriptコードの 後 に return false を 実 行 するかどうかを 設 定 します オプション と 表 示 された 領 域 の ロケーションバーを 表 示 ~ return false 挿 入 は 環 境 によって 正 常 に 反 映 されない 場 合 がありますのでご 注 意 ください 8

イベント 属 性 リンクを 領 域 に 対 して JavaScriptのイベントハンドラを 設 定 し ます リスト 上 のかくイベントに 対 して 実 行 するJavaScriptコードを 入 力 します ポップアップ タブでポップアップウィンドウを 表 示 する 設 定 をした 場 合 onclick イベントの 欄 に 自 動 的 にポップアップ ウィンドウを 開 くコードが 挿 入 されます 詳 細 リンクを 領 域 に 対 して 付 加 的 な 詳 細 設 定 をおこないます ID Style クラス ターゲット 名 文 字 列 の 向 き 対 象 言 語 言 語 コード 対 象 文 字 エンコーディング 対 象 MIMEタイプ rel 指 定 rev 指 定 タブインデックス アクセスキー IDを を 設 定 します スタイルシート 属 性 を 設 定 します スタイルシートのクラスを 指 定 します 基 本 タブの クラス 欄 で 入 力 したものがあれば あらか じめそれが 挿 入 されます リンク 先 のターゲットを 指 定 します 基 本 タブの ターゲット 欄 で 選 択 したものがあれば あら かじめそれが 挿 入 されます リンク 部 分 の 文 字 列 の 記 述 方 向 を 設 定 します (dir 属 性 / 例 : ltr) リンク 先 の 言 語 を 設 定 します (hreflang 属 性 / 例 : ja) リンク 部 分 の 言 語 を 設 定 します (lang 属 性 / 例 : ja) リンク 先 の 文 字 エンコーディングを 設 定 します (charset 属 性 / 例 : Shift_JIS) リンク 先 のMIMEタイプを 設 定 します (type 属 性 / 例 : text/html) この 文 書 から 見 たリンク 先 の 文 書 との 関 係 性 を 設 定 します リンク 先 の 文 書 から 見 たこの 文 書 との 関 係 性 を 設 定 します タブインデックスを 設 定 します タブインデックスとはキーボードのTabキーでフォーカスを 移 動 し たときに 何 番 目 にフォーカスが 移 動 するかを 決 める 数 値 です アクセスキーを 設 定 します アクセスキーとは キーボードでAltキーを 押 しながら 一 緒 に 押 すと リンク 部 分 にフォーカスが 移 動 するものです 9

アンカー 編 集 中 の 文 書 中 で カーソルがある 場 所 にアンカーを 設 置 します アンカーは ページ 内 リンクでリンク 先 を 指 定 するために 利 用 する マーキングのことです アイコンをクリックすると アンカー 名 を 入 力 するウィンドウが 開 きます アンカー 名 を 入 力 して 挿 入 ボタンをクリックすればアンカーが 設 置 されます アンカーに 対 してリンクを 設 定 する 際 は リンク 先 に #アンカー 名 を 指 定 します 他 ページのアンカーへリ ンクを 設 定 する 場 合 は リンク 先 のファイル 名 #アンカー 名 とします ( 例 : example.html#imenu) :ガイドの 表 示 また アンカーは 目 に 見 えない 要 素 ですが 編 集 時 の 利 便 性 のため ガイドの 表 示 をオンにすることで アイコン( )で 表 示 されるようになります アイコンを クリックすると 周 囲 に 四 角 いマークが 表 示 され 選 択 状 態 になります この 状 態 で アンカー アイコンをクリックすると そのアンカーの 情 報 を 修 正 することがで きます 選 択 状 態 でキーボードの Delete キーを 押 せば アンカーを 削 除 するこ とができます イメージ 挿 入 修 正 編 集 中 の 文 書 中 で カーソルがある 場 所 にイメージ( 画 像 )を 挿 入 します アイコンをクリックすると イメージを 挿 入 するウィンドウが 開 きます イメージの 設 定 は3つのタブにまたがっており 詳 細 な 設 定 ができます 基 本 イメージに 関 する 基 本 設 定 を 行 います 最 低 限 ここの 情 報 だけを 設 定 すればイメージを 挿 入 することができます イメージURL イメージのファイルのURLを 入 力 します イメージ 説 明 (alt) イメージの 説 明 ( 代 替 テキスト/alt 属 性 ) タイトル クラス プレビュー イメージのタイトルを 設 定 します スタイルシートのクラスを 指 定 します クラスによって 様 々な 装 飾 が 付 与 されます イメージURL 欄 にURLを 入 力 すると すぐにここにイメージのプレビューが 表 示 されます 編 集 欄 に 配 置 されたイメージをクリックすると 周 囲 に 四 角 いマークが 表 示 され 選 択 状 態 になります この 状 態 で イメージの 挿 入 修 正 アイコンをクリックすると そ のイメージの 情 報 を 修 正 することができます また 周 囲 の 四 角 いマークをドラッグすることで サイズを 変 更 することができます 選 択 状 態 で キーボードの Delete キーを 押 せば イメージを 削 除 することができま す 10

表 示 イメージの 表 示 に 関 する 設 定 を 行 います 配 置 サイズ 縦 の 余 白 横 の 余 白 枠 線 クラス Style 前 後 のテキストとの 位 置 関 係 を 設 定 します イメージの 表 示 サイズ( 縦 横 )を 設 定 します 初 期 状 態 では イメージのオリジナルサイズが 挿 入 されています すぐ 下 の 縦 横 比 を 固 定 する のチェックを 入 れた 状 態 であれば 縦 または 横 の 一 方 の 数 値 を 書 き 換 えた 場 合 オリジナルサイズの 縦 横 比 が 保 持 されるよう もう 一 方 の 数 値 が 自 動 的 に 書 き 換 わるようになります イメージと 隣 接 する 上 下 のテキストとの 余 白 を 設 定 します イメージと 隣 接 する 左 右 のテキストとの 余 白 を 設 定 します イメージの 枠 線 の 太 さを 設 定 します スタイルシートのクラスを 設 定 します スタイルシート 属 性 を 設 定 します 詳 細 イメージに 対 して 付 加 的 な 詳 細 設 定 をおこないます イメージスワップ マウスオーバー 時 マウスオーバー 時 に 他 のイメージに 切 り 替 えるかどうかを 設 定 します イメージスワップ にチェックが 入 っている 場 合 マウスオーバー 時 (マウスカーソルが 乗 った 状 態 )に 表 示 するイメージのファイルのURLを 入 力 します マウスアウト 時 イメージスワップ にチェックが 入 っている 場 合 マウスアウト 時 (マウスカーソルが 外 れた 状 態 ) に 表 示 するイメージのファイルのURLを 入 力 します ID IDを 設 定 します 文 字 列 の 向 き リンク 部 分 の 文 字 列 の 記 述 方 向 を 設 定 します (dir 属 性 / 例 : ltr) ) 言 語 コード イメージマップ リンク 部 分 の 言 語 を 設 定 します (lang 属 性 / 例 : ja) イメージマップのマップ 名 を 設 定 します (usemap 属 性 / 例 : #map1) 外 部 説 明 参 照 イメージに 対 する 外 部 説 明 ページのURLを 設 定 します (lngdesc 属 性 ) 11

特 殊 文 字 編 集 中 の 文 書 中 で カーソルがある 場 所 に 特 殊 文 字 を 挿 入 します アイコンをクリックすると 特 殊 文 字 を 挿 入 するウィンドウが 開 きます リストで 特 殊 文 字 にマウスを 乗 せると 右 に 情 報 が 表 示 され クリックするとその 文 字 が 挿 入 されます (ソース 上 ではHTML-Codeで 挿 入 されます) マルチメディアの 挿 入 編 集 中 の 文 書 中 で カーソルがある 場 所 に 様 々なマルチメディアを 挿 入 します アイコンをクリックすると マルチメディアを 挿 入 するウィンドウが 開 きます マルチメディアの 設 定 は2つのタブにまたがっており 詳 細 な 設 定 ができます 一 般 マルチメディアに 関 する 基 本 設 定 を 行 います 最 低 限 ここの 情 報 だけを 設 定 すればマルチメディアを 挿 入 することができ ます 形 式 ファイル/URL サイズ プレビュー 挿 入 するマルチメディアの 形 式 を 選 択 します Flash Quicktime Shockwave Windows Media Real Medi マルチメディアのファイルのURLを 入 力 します マルチメディアの 表 示 サイズ( 縦 横 )を 設 定 します すぐ 横 の 縦 横 比 を 固 定 する のチェックを 入 れた 状 態 であれば 縦 または 横 の 一 方 の 数 値 を 書 き 換 えた 場 合 変 更 前 のサイズの 縦 横 比 が 保 持 されるよう もう 一 方 の 数 値 が 自 動 的 に 書 き 換 わるようになります ファイル/URL 欄 にURLを 入 力 すると すぐにここにマルチメディアのプレビューが 表 示 されま す 12

詳 細 マルチメディアに 関 する 詳 細 設 定 を 行 います 設 定 情 報 は 一 般 タブで 設 定 した 形 式 によって 異 なります 各 設 定 情 報 の 詳 細 は 当 該 形 式 のマルチメディアのベンダーが 提 供 する 情 報 をご 参 照 ください 顔 文 字 の 挿 入 編 集 中 の 文 書 中 で カーソルがある 場 所 に 顔 文 字 を 挿 入 します アイコンをクリックすると 顔 文 字 を 挿 入 するウィンドウが 開 きます あらかじめ 用 意 された16 種 類 の 顔 文 字 から 任 意 のものをクリックすると 顔 文 字 が 挿 入 されます CSSスタイル 編 集 編 集 中 の 文 書 中 で 選 択 されている 範 囲 に 対 してCSSのスタイルを 設 定 します アイコンをクリックすると CSSスタイルを 設 定 するウィンドウが 開 きます CSSスタイルの 設 定 は 属 性 ごとに7つのタブに 分 かれており それぞれ 設 定 を 行 うことができます テキスト 選 択 範 囲 のテキストに 適 用 するスタイルを 設 定 します フォント フォントを 選 択 します (value) を 選 択 すると 直 接 入 力 できます サイズ フォントサイズと 単 位 を 選 択 します サイズは (value) を 選 択 すると 直 接 入 力 できます ウェイト フォントの 太 さを 選 択 します スタイル フォントスタイル( 斜 体 等 )を 選 択 します 変 体 大 文 字 のスモールキャピタル 表 示 を 設 定 します (アルファベットのみ 有 効 ) 行 間 行 間 のサイズと 単 位 を 選 択 します サイズは (value) を 選 択 すると 直 接 入 力 できます 大 / 小 文 字 大 文 字 / 小 文 字 変 換 を 選 択 します (アルファベットのみ 有 効 ) カラー カラーを 設 定 します 隣 のアイコンをクリックす ると 色 選 択 ウィンドウから 選 択 できます 装 飾 文 字 装 飾 を 設 定 します 適 用 する 装 飾 のチェックボックスにチェックを 入 れます 13

テキスト 選 択 範 囲 の 背 景 に 適 用 するスタイルを 設 定 します 選 択 範 囲 は カーソルがある 段 落 またはブロックを 単 位 として 適 用 され ます 背 景 色 背 景 のカラーを 設 定 します 隣 のアイコンをク リックすると 色 選 択 ウィンドウから 選 択 できます 背 景 イメー ジ 背 景 に 適 用 する 画 像 を 設 定 します 画 像 ファイ ルのURLを 入 力 します 繰 り 返 し 背 景 イメージの 繰 り 返 しパターンを 選 択 します 配 置 形 式 背 景 イメージの 配 置 形 式 を 選 択 します 水 平 位 置 背 景 イメージの 水 平 位 置 を 選 択 します (value) を 選 択 すると 数 値 を 直 接 入 力 でき さらに 隣 のボックスで 単 位 を 選 択 します 垂 直 位 置 背 景 イメージの 垂 直 位 置 を 選 択 します (value) を 選 択 すると 数 値 を 直 接 入 力 でき さらに 隣 のボックスで 単 位 を 選 択 します ブロック 選 択 範 囲 のブロックに 適 用 するスタイルを 設 定 します 単 語 間 隔 ブロック 内 の 単 語 間 隔 を 選 択 します (value) を 選 択 すると 数 値 を 直 接 入 力 でき さらに 隣 のボックスで 単 位 を 選 択 します 単 語 間 隔 は 英 文 などの 場 合 に 有 効 です 文 字 間 隔 ブロック 内 の 文 字 間 隔 を 選 択 します (value) を 選 択 すると 数 値 を 直 接 入 力 でき さらに 隣 のボックスで 単 位 を 選 択 します 垂 直 性 列 位 置 ブロックの 垂 直 整 列 位 置 を 選 択 します 垂 直 性 列 位 置 は イメージなど 特 定 の 種 類 の 要 素 にのみ 有 効 になります テキスト 整 列 位 置 ブロックのテキスト 整 列 位 置 を 選 択 します テキストイ ンデント ブロックのテキストのインデント( 字 下 げ)を 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 のボックスから 単 位 を 選 択 します 空 白 ブロック 内 の 空 白 の 扱 い 方 を 選 択 します 表 示 ブロックの 表 示 形 式 を 選 択 します 14

ボックス 選 択 範 囲 の 背 景 に 適 用 するスタイルを 設 定 します 選 択 範 囲 は カーソルがある 段 落 またはブロックを 単 位 として 適 用 され ます 幅 ボックスの 横 幅 を 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します 高 さ ボックスの 高 さを 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します フロート ボックスのフロート 設 定 を 選 択 します クリア ボックスのクリア(フロート 解 除 ) 設 定 を 選 択 し ます パディング ボックスのパディング(ボックスの 外 枠 と 中 身 と の 間 のスペース)を 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します すべて 同 じ にチェックを 入 れると 上 の 欄 に 設 定 したものが 右 下 左 にも 適 用 され ます チェックを 外 せば 上 下 左 右 を 別 々に 設 定 することができます マージン ボックスのマージン(ボックスの 外 枠 と 周 辺 要 素 との 間 のスペース)を 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します すべて 同 じ にチェックを 入 れると 上 の 欄 に 設 定 したものが 右 下 左 にも 適 用 され ます チェックを 外 せば 上 下 左 右 を 別 々に 設 定 することができます ボーダー 選 択 範 囲 のボーダー( 枠 線 )に 適 用 するスタイルを 設 定 します 選 択 範 囲 は カーソルがある 段 落 またはブロックを 単 位 として 適 用 され ます タイプ リストデータの 行 頭 記 号 のタイプを 選 択 します 行 頭 記 号 イメージ リストデータの 行 頭 記 号 にイメージを 使 用 する イメージのURLを 入 力 します ポジション リストデータの 行 頭 記 号 の 位 置 を 選 択 します 15

リスト リスト( 順 序 型 リスト/ul 順 不 同 型 リスト/ol)に 適 用 するスタイルを 設 定 します カーソルがひとつリストデータ(li)の 内 部 にある 場 合 そのリストデータに 対 して 設 定 され リストデータすべてを 選 択 した 状 態 であれば リスト 自 身 に 対 して 設 定 されます タイプ 背 景 のカラーを 設 定 します 隣 のアイコンをク リックすると 色 選 択 ウィンドウから 選 択 できます 背 景 イメー ジ 背 景 に 適 用 する 画 像 を 設 定 します 画 像 ファイ ルのURLを 入 力 します 繰 り 返 し 背 景 イメージの 繰 り 返 しパターンを 選 択 します 配 置 形 式 背 景 イメージの 配 置 形 式 を 選 択 します 水 平 位 置 背 景 イメージの 水 平 位 置 を 選 択 します (value) を 選 択 すると 数 値 を 直 接 入 力 でき さらに 隣 のボックスで 単 位 を 選 択 します 垂 直 位 置 背 景 イメージの 垂 直 位 置 を 選 択 します (value) を 選 択 すると 数 値 を 直 接 入 力 でき さらに 隣 のボックスで 単 位 を 選 択 します ポジショニング 選 択 範 囲 のボックスのポジショニングに 適 用 するスタイルを 設 定 します 選 択 範 囲 は カーソルがある 段 落 またはブロックを 単 位 として 適 用 され ます タイプ ポジショニングのタイプを 選 択 します 可 視 性 ボックスの 可 視 性 を 選 択 します 幅 ボックスの 横 幅 を 設 定 します Zインデッ ボックスの 重 なり 順 序 を 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します この 設 定 は ボックス で 設 定 できる 幅 と 同 一 であり 一 方 に 値 を 設 定 するともう 一 方 には 自 動 的 に 反 映 されます クス 数 値 が 大 きいほど 手 前 に 表 示 されます この 設 定 は タイプ で absolute を 選 択 した 場 合 のみ 有 効 です 高 さ ボックスの 高 さを 設 定 します 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します この の 設 定 は ボックス で 設 定 できる 高 さ と 同 一 であり 一 方 に 値 を 設 定 するともう 一 方 に は 自 動 的 に 反 映 されます オーバー フロー 内 容 のはみ 出 した 部 分 の 処 理 を 選 択 します 位 置 ボックスの 位 置 を 設 定 します この 設 定 は タイプ で absolute または relative を 選 択 した 場 合 のみ 有 効 です 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します すべて 同 じ にチェックを 入 れると 上 の 欄 に 設 定 したものが 右 下 左 にも 適 用 され ます チェックを 外 せば 上 下 左 右 を 別 々に 設 定 することができます 通 常 は 上 or 下 左 or 右 それぞれ 一 方 の み 設 定 します クリップ ボックスのクリップ( 切 り 抜 き 表 示 範 囲 指 定 )を 設 定 します この 設 定 は タイプ で absolute を 選 択 した 場 合 のみ 有 効 です 一 つ 目 のボックスに 数 値 を 入 力 し 二 つ 目 の ボックスから 単 位 を 選 択 します すべて 同 じ にチェックを 入 れると 上 の 欄 に 設 定 したものが 右 下 左 にも 適 用 され ます チェックを 外 せば 上 下 左 右 を 別 々に 設 定 することができます 16

表 の 挿 入 編 集 中 の 文 書 中 で カーソルがある 場 所 に 表 (テーブル)を 挿 入 します アイコンをクリックすると 表 を 挿 入 するウィンドウが 開 きます 表 の 設 定 は2つのタブにまたがっており 詳 細 な 設 定 ができます 基 本 表 に 関 する 基 本 設 定 を 行 います 最 低 限 ここの 情 報 だけを 設 定 すれば 表 を 挿 入 することができます 列 表 の 列 の 数 を 入 力 します 行 表 の 行 の 数 を 入 力 します セル 内 余 白 表 のセル 内 余 白 (cellpadding)を 入 力 します セル 間 隔 表 のセル 間 隔 (cellspacing)を 入 力 します 配 置 表 の 配 置 方 法 を 選 択 します 枠 線 表 の 枠 線 の 太 さを 入 力 します 幅 表 の 幅 を 入 力 します 高 さ 表 の 高 さを 入 力 します クラス スタイルシートのクラスを 設 定 します キャプショ ン 有 表 のキャプション( 表 題 )を 使 用 するかどうかを 設 定 します チェックを 入 れると キャプション の 入 力 欄 が 追 加 されます 詳 細 表 に 関 する 詳 細 設 定 を 行 います ID IDを 設 定 します サマリー 表 の 要 約 説 明 を 入 力 します Style スタイルシート 属 性 を 設 定 します 言 語 コード 表 の 言 語 を 設 定 します (lang 属 性 / 例 : ja) 背 景 イメージ 背 景 に 適 用 する 画 像 を 設 定 します 画 像 ファイルのURLを 入 力 します セルの 枠 線 表 の 枠 線 の 太 さを 入 力 します 内 側 枠 線 の ルール 表 の 枠 線 の 表 示 ルールを 選 択 します (rules 属 性 ) 文 字 の 向 き 表 の 文 字 列 の 記 述 方 向 を 設 定 します (dir 属 性 ) 境 界 線 色 境 界 線 のカラーを 設 定 します 隣 のアイコン をクリックすると 色 選 択 ウィンドウから 選 択 で きます 背 景 色 背 景 のカラーを 設 定 します 隣 のアイコンを クリックすると 色 選 択 ウィンドウから 選 択 でき ます 17

枠 線 の 無 い 表 は 通 常 セルの 境 界 線 が 見 えませんが 編 集 時 の 利 便 性 のため ガイドの 表 示 をオンにすることで 点 線 で 表 示 されるようになります :ガイドの 表 示 テーブルの 端 をクリックすると 周 囲 に 四 角 いマークが 表 示 され 選 択 状 態 になります この 状 態 で 表 の 挿 入 アイコンをクリックすると その 表 の 情 報 を 修 正 することができます また 周 囲 の 四 角 いマークをドラッグすることで サイズを 変 更 することができます 選 択 状 態 で キーボードの Delete キーを 押 せば 表 を 削 除 することができます テーブルの 行 のプロパティ 編 集 中 の 表 (テーブル)で 現 在 カーソルがあるセルの 設 定 を 行 います テーブルの 行 の 設 定 は2つのタブにまたがっており 詳 細 な 設 定 ができます 設 定 を 保 存 する 際 適 用 する 行 の 条 件 を 選 択 でき 複 数 の 行 に 一 括 で 適 用 することができます 基 本 テーブルの 行 に 関 する 基 本 設 定 を 行 います テーブル 内 で の 行 設 定 この 行 がテーブル 内 のどこに 配 置 されるか を 選 択 します 配 置 この 行 のセルの 内 容 の 水 平 方 向 の 配 置 方 法 を 選 択 します 垂 直 方 向 の 配 置 この 行 のセルの 内 容 の 垂 直 方 向 の 配 置 方 法 を 選 択 します クラス スタイルシートのクラスを 設 定 します 高 さ この 行 の 高 さを 入 力 します 詳 細 テーブルの 行 に 関 する 詳 細 設 定 を 行 います ID IDを 設 定 します Style スタイルシート 属 性 を 設 定 します 文 字 列 の 向 き 文 字 列 の 記 述 方 向 を 設 定 します (dir 属 性 ) 言 語 コード 言 語 を 設 定 します (lang 属 性 / 例 : ja) 背 景 イメージ 背 景 に 適 用 する 画 像 を 設 定 します 画 像 ファイルのURLを 入 力 します 背 景 色 背 景 のカラーを 設 定 します 隣 のアイコンを クリックすると 色 選 択 ウィンドウから 選 択 でき ます 18

テーブルのセルのプロパティ 編 集 中 の 表 (テーブル)で 現 在 カーソルがあるセルの 設 定 を 行 います テーブルのセルの 設 定 は2つのタブにまたがっており 詳 細 な 設 定 ができます 設 定 を 保 存 する 際 適 用 するセルの 条 件 を 選 択 でき 複 数 のセルに 一 括 で 適 用 することができます 基 本 テーブルのセルに 関 する 基 本 設 定 を 行 います 配 置 このセルの 内 容 の 水 平 方 向 の 配 置 方 法 を 選 択 します セルタイプ このセルのタイプを 選 択 します 垂 直 方 向 の このセルの 内 容 の 垂 直 方 向 の 配 置 方 法 を スコープ セルのタイプがヘッダ(th)の ( ) 場 合 の 見 出 しの 配 置 選 択 します 示 す 方 向 を 選 択 します 幅 このセルの 幅 を 入 力 します 高 さ このセルの 高 さを 入 力 します クラス スタイルシートのクラスを 設 定 します 詳 細 テーブルのセルに 関 する 基 本 設 定 を 行 います ID IDを 設 定 します Style スタイルシート 属 性 を 設 定 します 文 字 列 の 向 き 文 字 列 の 記 述 方 向 を 設 定 します (dir 属 性 ) 言 語 コード 言 語 を 設 定 します (lang 属 性 / 例 : ja) 背 景 イメージ 背 景 に 適 用 する 画 像 を 設 定 します 画 像 ファイルのURLを 入 力 します 背 景 色 背 景 のカラーを 設 定 します 隣 のアイコンを クリックすると 色 選 択 ウィンドウから 選 択 でき ます 19

セルの 結 合 新 規 レイヤー 挿 入 編 集 中 の 表 (テーブル)で 複 数 のセルの 結 合 をおこないます 現 在 カーソルがあるセルを 基 準 に 列 ( 右 方 向 )と 行 ( 下 方 向 )の 結 合 数 を 入 力 して 結 合 をおこないます 結 合 前 のセルにデータが 含 まれる 場 合 は 結 合 後 のセルに 全 てのデー タが 結 合 されたものが 入 ります 結 合 したセルを 元 の 状 態 に 分 割 するには セルの 分 割 をおこないま す レイヤーとは ページ 上 でスペースを 占 有 せずに 浮 いた 状 態 で 自 由 に 配 置 することができるボックスです 内 部 的 にはポジショニングで absolute を 指 定 した 状 態 になります レイヤーの 中 にはテキストや 画 像 等 通 常 のページと 同 じようにコンテンツを 入 れることができます レイヤーの 位 置 指 定 は 画 面 の 左 上 が 基 準 となります 編 集 時 は 編 集 欄 の 左 上 を 基 準 としているため 実 際 のページとは 配 置 が 異 なる 場 合 があります 編 集 時 と 同 じ 配 置 にする 場 合 は コンテンツ 全 体 を<div>で 囲 い それに 対 してポジショニングを relative に 設 定 してください :ガイドの 表 示 : 前 面 へ 移 動 : 背 面 へ 移 動 枠 線 や 背 景 を 指 定 しないレイヤーは 境 界 線 が 見 えない 状 態 ですが 編 集 時 の 利 便 性 のため ガイドの 表 示 をオンにすることで 点 線 で 表 示 されるようになります レイヤーの 重 なりは 後 から 追 加 したレイヤーが 手 前 に 配 置 されますが 前 面 へ 移 動 背 面 へ 移 動 を 利 用 することで 順 序 を 入 れ 替 えることができます レイヤーをクリックすると 周 囲 に 四 角 いマークが 表 示 され 選 択 状 態 になります こ の 状 態 で イメージの 挿 入 修 正 アイコンをクリックすると そのイメージの 情 報 を 修 正 することができます また 周 囲 の 四 角 いマークをドラッグすることで サイズを 変 更 することができます 選 択 状 態 で キーボードの Delete キーを 押 せば アンカーを 削 除 することができま す レイヤーを 選 択 状 態 で 内 部 をクリックすると 枠 線 が 変 わりカーソルがレイヤーの 内 部 に 移 動 し テキストの 入 力 やイメージや 表 の 挿 入 等 レイヤー 内 コンテンツを 編 集 することができまるようになります レイヤーの 背 景 や 枠 線 等 のスタイルは CSSスタイル 編 集 でおこないます レイヤーを 選 択 した 状 態 で 新 規 レイヤー 挿 入 をおこなうと そのレイヤーと 同 じスタイルや 中 身 を 持 つレ イヤーをコピーして 挿 入 することができます ( 同 じ 場 所 に 配 置 されるので ドラッグで 移 動 させる 必 要 があ ります) : 絶 対 位 置 (absolute) 切 り 替 え レイヤーを 選 択 した 状 態 で 絶 対 位 置 (absolute) 切 り 替 え をクリック(オフにす る)すると そのレイヤーの 絶 対 位 置 指 定 が 解 除 され レイヤー 状 態 でなくなり ます レイヤー 状 態 でなくなった 後 で 再 度 絶 対 位 置 (absolute) 切 り 替 え をオン にするとレイヤーになりますが 以 前 の 位 置 やサイズ 設 定 は 失 われます 20

HTML 表 示 編 集 中 の 文 書 のHTMLソースを 表 示 します HTMLモード のタブが 提 供 されている 箇 所 では これ を 利 用 する 場 合 と 同 じ 機 能 です どちらのモードを 使 用 しても 編 集 するソースは 同 じもの ですので 途 中 でモードを 切 り 替 えながら 編 集 すること が 可 能 です プレビュー 編 集 中 の 文 書 の 実 際 の 表 示 を 確 認 することができます ただし ここでのプレビューは 編 集 しているソースのみで の 状 態 ですので 実 際 のページではCSSが 適 用 される 等 の 影 響 により このプレビューとは 違 った 表 示 結 果 に なる 場 合 があります 21