HTML EDITOR HTMLエディタ マニュアル 目 次 HTMLエディタの機能概要 ■概要 ・・・・・・・・・・・・・・・・ 2 ■画面構成 ・・・・・・・・・・・・・・・・ 2 ■各ツールの説明 ・・・・・・・・・・・・・・・・ 3 ■ツールの詳細説明 ・・・・・・・・・・・・・・・・ 5 HTMLエディタの機能説明 1 HTMLエディタ機能概要 HTML エディタ機能概要 概要 HTMLエディタは、ワープロソフトのように直感的にウェブページ（HTML文書）を編集するための補助ツール です。HTMLエディタは、Allin1Office管理画面のいくつかのページ編集機能に付属しています。 デ 各種ツールを利用することで、HTMLを意識することなくウェブページを作成することができます。 画面構成 １ 2 3 4 1 モード切替タブ 「エディタ」モードと「HTML」モードを切り替えます。 「エディタモード」はHTMLエディタを使用するモードです。対して、「HTML」モードは、HTMLエディタを使用せ ず、HTMLソースを直接編集するモードです。 どちらのモードを使用しても、編集するソースは同じものですので、途中でモードを切り替えながら編集するこ とが可能です。 2 ツールパネル HTMLエディタの各種機能を利用するためのツールを選択するパネルです。 対象のツールのアイコンをクリックすることで、ツールを利用することができます。 3 編集欄 編集するHTML文書の内容が表示されます。ここにテキストを入力しながらツールを利用して編集します。 4 パスおよび伸縮ボタン 編集欄で現在カーソルのある場所がタグの階層で表示されます。 右端の伸縮ボタンは、ドラッグすることで編集欄を上下に伸縮させることができます。 2 HTMLエディタ機能説明 HTML エディタ機能説明 各ツールの説明 切り取り 選択範囲を切り取ります。 コピー 選択範囲をコピーします。 貼り付け 切り取りまたはコピーした内容 を貼り付けます。 検索 編集中の文書内を検索します。 検索/置換 編集中の文書内で検索及び 置換をおこないます。 取消し 作業を1段階取り消します。 やり直し 取り消した作業をやり直します。 テキストの色 選択範囲のテキストの色を変 更します。 ハイライトカ ラー 選択範囲のテキストに背景色 を設定します。 太字 選択範囲のテキストを太字に します。 斜体 選択範囲のテキストを斜体に します。 下線 選択範囲のテキストに下線を 適用します。 打消し線 選択範囲のテキストに打消し 線を適用します。 左揃え 選択範囲の行のテキストを左 揃えにします。 真中揃え 選択範囲の行のテキストを真 中揃えにします。 右揃え 選択範囲の行のテキストを右 揃えにします。 両端揃え 選択範囲の行のテキストを両 端揃えにします。 リンク 選択範囲のテキストにリンク を設定します。 リンク解除 適用したリンクを解除します アンカー アンカーを挿入します。 イメージ挿入 イメージを挿入します。 水平線挿入 水平線を挿入します。 日付挿入 現在の日付を挿入します。 時間挿入 現在の時間を挿入します。 順不同リスト 選択箇所を順不同リストにしま す。 順序リスト 選択箇所を順序リストに設定 します。 下付き 選択箇所を下付き文字に設定 します。 上付き 選択箇所を上付き文字に設 定します。 特殊文字 特殊文字を挿入します。 マルチメディア の挿入/修正 マルチメディアを挿入します。 ルチメディアを挿入します。 顔文字 顔文字を挿入します。 CSSスタイル編 集 選択範囲にCSSスタイルを適 用します。 書式をクリア 選択範囲に設定された各種書 式をクリアします。 ガイドの表示 ガイドの表示/非表示を切り替 えます。 テーブルの挿 入 テーブルを挿入します。 行のプロパ ティ 選択しているテーブルの行の プロパティを編集します。 セルのプロパ プ ティ 選択しているテーブルのセル ブ のプロパティを編集します。 上に行を挿入 テーブルで選択している行の ブ 上に行を挿入します。 下に行を挿入 テーブルで選択している行の 下に行を挿入します。 行の削除 テーブルで選択している行を 削除します。 左に列を挿入 テーブルで選択している列の 左に列を挿入します。 右に列を挿入 テーブルで選択している列の 右に列を挿入します。 3 HTMLエディタ機能説明 HTML エディタ機能説明 列の削除 テーブルで選択している列を 削除します。 セルの分割 テーブルで結合したセルを 分割します。 セルの結合 テ ブルで選択しているセル テーブルで選択しているセル の結合設定をおこないます。 新規レイヤ 挿 新規レイヤー挿 入 新規にレイヤ を挿入しま 新規にレイヤーを挿入しま す。 前面へ移動 選択しているレイヤーの順序 を前面へ移動します。 背面へ移動 選択しているレイヤーの順 序を背面へ移動します。 絶対位置切り 替え 選択しているレイヤーの位置 設定を変更します。 コードの整理 乱れたコードを整理します。 HTML表示 編集中の文書のHTMLソース を表示します。 プレビュー 編集中の文書のプレビュー を表示します。 フルスクリーン モード切替 エディタをフルスクリーンモード に切り替えます。 印刷 編集中の文書を印刷します。 書体設定 選択箇所の書体を設定します。 文字サイズ設定 選択箇所の文字サイズを設定します。 4 HTMLエディタ機能説明 HTML エディタ機能説明 ツールの詳細説明 各ツールの中で、複雑なインターフェースや機能を有するものについて詳細な説明を記載します。 検索、検索//置換 検索、検索 編集中の文書中で、特定の文字列の検索及び置換をおこないます。 アイコンをクリックすると、検索及び置換をおこなうためのウィンドウが開きます。 「検索」「置換」のタブをクリックすることで、「検索」と「検索/置換」を切り替えることができます。 検索 検索文字列 検索対象の文字列を入力します。 方向 編集欄のカーソル位置からどちらの方向へ検索を実行するかを選択します。 大文字と小文字を区別する 検索時、アルファベットの大文字と小文字を区別するかどうかを設定します。 次を検索 検索を実行します。ヒットした状態であれば、次の対象を検索します。 置換 検索文字列 検索対象の文字列を入力します。 置換文字列 検索でヒットした文字列を置換する文字列を入力します。 方向 編集欄のカーソル位置からどちらの方向へ検索を実行するかを選択します。 大文字と小文字を区別する 検索時、アルファベットの大文字と小文字を区別するかどうかを設定します。 次を検索 検索を実行します ヒ トした状態であれば 次の対象を検索します 置換は行いません 検索を実行します。ヒットした状態であれば、次の対象を検索します。置換は行いません。 置換 検索を実行してヒットした文字列に置換を実行します。まだ検索が行われていない状態であれば 検索をおこないます。 すべて置換 検索してヒットした文字列すべてを一括で置換します。 5 HTMLエディタ機能説明 HTML エディタ機能説明 テキストの色 編集中の文書中で 選択されている範囲のテキストの色を変更します 編集中の文書中で、選択されている範囲のテキストの色を変更します。 アイコン部分をクリックすると、現在選択されている色が適用されます。現在適用されてい る色はアイコンの下のバーで示されます。 色を変更する場合は、右の▼ボタンをクリックすれば、カラーリストが表示され、色を選択 することができます。 カラーリストで選択できるのは、あらかじめ用意された40色ですが、お好みの 色が無い場合は「その他」をクリックすれば 別途「カラ 選択」ウィンドウが開 色が無い場合は「その他」をクリックすれば、別途「カラー選択」ウィンドウが開 き、さらに多くの色を選択することできます。 「カラー選択」ウィンドウでは、３つのタブでカラー選択モードを切り替えることができます。 どのモードでも、色を選択すると、右下のカラーコードと実際の色表示が更新されます。 ピッカー 色の分布図から色を選択します。 まず左側の「色相」および「彩度」の分布図から、目的の色相・彩度 の色を選択します。左右が色相の、上下が彩度の分布です。 次に右端の「明度」分布図で、目的の明度を選択します。 この方法が、最も広い範囲の色を選択することができます。 パレット WEBセーフカラー216色のリストから色を選択します。 色名 HTMLで色名が規定されている138色のリストから色を選択します。 リストは色名のアルファベット順に並んでいます リストは色名のアルファベット順に並んでいます。 色アイコンにマウスを乗せると、リスト下部の「色名」欄に色名が表 示されます。 ※ここで色を選択してテキストの色を設定しても、コード上は色名で はなくカラーコードで指定されます。 6 HTMLエディタ機能説明 HTML エディタ機能説明 ハイライトカラー 編集中の文書中で、選択されている範囲のテキストの背景色を変更します。 編集中の文書中で 選択されている範囲のテキストの背景色を変更します テキストの色と併用することができます。 ハイライトカラーを適用したテキストの例： アイコン部分をクリックすると、現在選択されている色が適用されます。現在適用されてい る色はアイコンの下のバ で示されます る色はアイコンの下のバーで示されます。 色を変更する場合は、右の▼ボタンをクリックすれば、カラーリストが表示され、色を選択 することができます。 ※色選択の使い方は、「テキストの色」でのそれと同じです。「テキストの色」の項をご参照 ください。 リンク、リンク解除 編集中の文書中で、選択されている範囲にリンクを設定します。リンクの設定は、テキストだけでなく、画 像にも設定することができます。 リンクの設定は４つのタブにまたがっており、詳細な設定ができます。 既にリンクを設定した領域内にカーソルがある状態で「リンク」アイコンをクリックした場合は、各種設定欄 にリンクの情報があらかじめ挿入され、上方修正を行うことができます。 同様に既にリンクを設定した領域内にカーソルがある状態で「リンク解除」アイコンをクリックすれば、リン クを解除することができます。 基本 リンクに関する基本設定を行います。 最低限ここの情報だけを設定すればリンクを設定することができます。 リンクURL リンク先のURLを入力します。 アンカー 編集中の文書内にアンカーが設置されている場合、ここにリストされます。リストからアンカー名 を選択すると、「リンクURL」の欄にアンカー名が自動的に挿入されます。 ターゲット リンクをクリックしたときに、リンク先を表示する対象を選択します。 表 タイトル リンクのタイトルを設定します。タイトルを設定することで、検索エンジン対策として有効であった り、ブラウザによってはマウスを乗せたときにタイトル文字が表示されることが期待できます。 クラス スタイルシートのクラスを設定します。 7 HTMLエディタ機能説明 HTML エディタ機能説明 ポップアップ リンクをポップアップウィンドウで開く場合の設定をします。 リンクをポップアップウィンドウで開く場合の設定をします ポップアップではなく、通常のウィンドウで開く場合は使用しま せん。 JavaScriptポップアップ ポップアップを使用するかどうかを設定します。ここにチェックを入れない場合、ポップアップを使 用しないことになり、以下の設定は全て無効となります。 ポップアップURL ポップアップウィンドウに表示するURLを入力します。 ウィンドウタイトル ポップアップウィンドウの名前を入力します。（JavaScriptで利用するためのものであり、画面上に 表示されるものではありません） サイズ ポップアップウィンドウのサイズ（「横」×「縦」）を入力します。 ポジション ポップアップウィンドウが表示されたときの初期位置（X 座標/ Y座標）を入力します。座標は画 面左上を基準として右方向への距離をx、下方向への距離をyとします。 ロケーションバーを表示 ポップアップウィンドウにロケーションバー（URL表示）をするかどうかを設定します。 表示する場合はチェックを入れます。 スクロールバーを表示 ポップアップウィンドウにスクロールバーを表示するかどうかを設定します。 表 す 場合 表示する場合はチェックを入れます。 クを入 す。 メニューバーを表示 ポップアップウィンドウにメニューバーを表示するかどうかを設定します。 表示する場合はチェックを入れます。 ウィンドウサイズ変更可能設 定 ポップアップウィンドウをサイズ変更可能にするかどうかを設定します。 可能にする場合はチェックを入れます。 ツールバーを表示 ポップアップウィンドウにツールバーを表示するかどうかを設定します。 表示する場合はチェックを入れます。 従属ウィンドウ 親ウィンドウを閉じたときに、ポップアップウィンドウも同時に閉じるかどうかを設定します。 ステータスバーを表示 ポップアップウィンドウにステータスバーを表示するかどうかを設定します。 表示する場合はチェックを入れます。 ‘return false’挿入 ポップアップウィンドウを表示するJavaScriptコードの後に、’return false’を実行するかどうかを設 定します。 「オプション」と表示された領域の「ロケーションバーを表示」～「‘return false’挿入」は、環境によって正常 に反映されない場合がありますのでご注意ください。 8 HTMLエディタ機能説明 HTML エディタ機能説明 イベント属性 リンクを領域に対して、JavaScriptのイベントハンドラを設定し リンクを領域に対して JavaScriptのイベントハンドラを設定し ます。 リスト上のかくイベントに対して、実行するJavaScriptコードを入 力します。 ※「ポップアップ」タブでポップアップウィンドウを表示する設定 をした場合、「onclick」イベントの欄に、自動的にポップアップ ウィンドウを開くコードが挿入されます。 詳細 リンクを領域に対して、付加的な詳細設定をおこないます。 ID IDを設定します。 を設定します Style スタイルシート属性を設定します。 クラス スタイルシートのクラスを指定します。「基本」タブの「クラス」欄で入力したものがあれば、あらか じめそれが挿入されます。 ターゲット名 リンク先のターゲットを指定します。「基本」タブの「ターゲット」欄で選択したものがあれば、あら かじめそれが挿入されます。 文字列の向き リンク部分の文字列の記述方向を設定します。（dir属性／例： ltr） 対象言語 リンク先の言語を設定します。（hreflang属性／例： ja） 言語コード リンク部分の言語を設定します。（lang属性／例： ja） 対象文字エンコーディング リンク先の文字エンコーディングを設定します。（charset属性／例： Shift_JIS） 対象MIMEタイプ リンク先のMIMEタイプを設定します。（type属性／例： text/html） rel指定 この文書から見たリンク先の文書との関係性を設定します。 rev指定 リンク先の文書から見たこの文書との関係性を設定します リンク先の文書から見たこの文書との関係性を設定します。 タブインデックス タブインデックスを設定します。タブインデックスとはキーボードのTabキーでフォーカスを移動し たときに、何番目にフォーカスが移動するかを決める数値です。 アクセスキー アクセスキーを設定します。アクセスキーとは、キーボードでAltキーを押しながら一緒に押すと リンク部分にフォーカスが移動するものです。 9 HTMLエディタ機能説明 HTML エディタ機能説明 アンカー 編集中の文書中で、カーソルがある場所にアンカーを設置します。 編集中の文書中で、カ ソルがある場所にアンカ を設置します。 アンカーは、ページ内リンクでリンク先を指定するために利用する マーキングのことです。 アイコンをクリックすると、アンカー名を入力するウィンドウが開きます。 アンカー名を入力して「挿入」ボタンをクリックすればアンカーが設置 されます。 アンカーに対してリンクを設定する際は、リンク先に「#アンカー名」を指定します。他ページのアンカーへリ ンクを設定する場合は、「リンク先のファイル名#アンカー名」とします。（例： example.html#imenu） ：ガイドの表示 また、アンカーは目に見えない要素ですが、編集時の利便性のため、 「ガイドの 表示」をオンにすることで、アイコン（ ）で表示されるようになります。アイコンを クリックすると周囲に四角いマークが表示され、選択状態になります。この状態 で「アンカー」アイコンをクリックすると、そのアンカーの情報を修正することがで きます。選択状態でキーボードの「Delete」キーを押せば、アンカーを削除するこ とができます。 イメージ挿入・修正 編集中の文書中で、カーソルがある場所にイメージ（画像）を挿入します。 アイコンをクリックすると、イメージを挿入するウィンドウが開きます。 イメージの設定は３つのタブにまたがっており、詳細な設定ができます。 基本 イメージに関する基本設定を行います。 最低限ここの情報だけを設定すればイメージを挿入することができます。 イメージURL イメ ジURL イメージのファイルのURLを入力します。 イメ ジのファイルのURLを入力します。 イメージ説明(alt) イメージの説明（代替テキスト／alt属性） タイトル イメージのタイトルを設定します。 クラス スタイルシートのクラスを指定します。クラスによって様々な装飾が付与されます。 プレビュー 「イメージURL」欄にURLを入力すると、すぐにここにイメージのプレビューが表示されます。 編集欄に配置されたイメージをクリックすると、周囲に四角いマークが表示され、選 択状態になります。この状態で「イメージの挿入・修正」アイコンをクリックすると、そ のイメージの情報を修正することができます。 また、周囲の四角いマークをドラッグすることで、サイズを変更することができます。 選択状態で、キーボードの「Delete」キーを押せば、イメージを削除することができま す。 10 HTMLエディタ機能説明 HTML エディタ機能説明 表示 イメージの表示に関する設定を行います。 イ ジ 表示 関する設定を行 ます。 配置 前後のテキストとの位置関係を設定します 前後のテキストとの位置関係を設定します。 サイズ イメージの表示サイズ（縦×横）を設定します。初期状態では、イメージのオリジナルサイズが挿 入されています。 すぐ下の「縦横比を固定する」のチェックを入れた状態であれば、縦または横の一方の数値を書 き換えた場合、オリジナルサイズの縦横比が保持されるよう、もう一方の数値が自動的に書き 換わるようになります。 縦の余白 イメージと隣接する上下のテキストとの余白を設定します。 横の余白 イメージと隣接する左右のテキストとの余白を設定します。 枠線 イメージの枠線の太さを設定します。 クラス スタイルシートのクラスを設定します。 Style スタイルシート属性を設定します。 詳細 イメージに対して、付加的な詳細設定をおこないます。 イメージスワップ マウスオーバー時に他のイメージに切り替えるかどうかを設定します。 マウスオーバー時 「イメージスワップ」にチェックが入っている場合、マウスオーバー時（マウスカーソルが乗った状 態）に表示するイメージのファイルのURLを入力します。 マウスアウト時 「イメージスワップ」にチェックが入っている場合、マウスアウト時（マウスカーソルが外れた状態） に表示するイメージのファイルのURLを入力します。 ID IDを設定します。 文字列 向き 文字列の向き リ ク部分 文字列 記述方向を設定します （ 属性／例 ltr）） リンク部分の文字列の記述方向を設定します。（dir属性／例： 言語コード リンク部分の言語を設定します。（lang属性／例： ja） イメージマップ イメージマップのマップ名を設定します。（usemap属性／例： #map1） 外部説明参照 イメージに対する外部説明ページのURLを設定します。（lngdesc属性） 11 HTMLエディタ機能説明 HTML エディタ機能説明 特殊文字 編集中の文書中で、カーソルがある場所に特殊文字を挿入します。 編集中の文書中で カ ソルがある場所に特殊文字を挿入します アイコンをクリックすると、特殊文字を挿入するウィンドウが開きます。 リストで特殊文字にマウスを乗せると、右に情報が表示され、クリックするとその文字が挿入されます。 （ソース上ではHTML-Codeで挿入されます） マルチメディアの挿入 編集中の文書中で、カーソルがある場所に様々なマルチメディアを挿入します。 アイコンをクリックすると、マルチメディアを挿入するウィンドウが開きます。 マルチメディアの設定は２つのタブにまたがっており、詳細な設定ができます。 一般 般 マルチメディアに関する基本設定を行います。 最低限ここの情報だけを設定すればマルチメディアを挿入することができ ます。 形式 挿入するマルチメディアの形式を選択します。 「Flash」「Quicktime」「Shockwave」「Windows Media」「Real Medi」 ファイル/URL マルチメディアのファイルのURLを入力します。 サイズ マルチメディアの表示サイズ（縦×横）を設定します。 マルチメディアの表示サイズ（縦×横）を設定します すぐ横の「縦横比を固定する」のチェックを入れた状態であれば、縦または横の一方の数値を書 き換えた場合、変更前のサイズの縦横比が保持されるよう、もう一方の数値が自動的に書き換 わるようになります。 プレビュー 「ファイル/URL」欄にURLを入力すると、すぐにここにマルチメディアのプレビューが表示されま す。 12 HTMLエディタ機能説明 HTML エディタ機能説明 詳細 マルチメディアに関する詳細設定を行います。 マルチメディアに関する詳細設定を行います 設定情報は、「一般」タブで設定した「形式」によって異なります。 各設定情報の詳細は、当該形式のマルチメディアのベンダーが提供する情 報をご参照ください。 顔文字の挿入 編集中の文書中で、カーソルがある場所に顔文字を挿入します。 アイコンをクリックすると、顔文字を挿入するウィンドウが開きます。 あらかじめ用意された16種類の顔文字から任意のものをクリックすると顔文字が挿入 されます。 CSSスタイル編集 CSS スタイル編集 編集中の文書中で、選択されている範囲に対してCSSのスタイルを設定します。 アイコンをクリックすると、CSSスタイルを設定するウィンドウが開きます。 CSSスタイルの設定は、属性ごとに7つのタブに分かれており、それぞれ設定を行うことができます。 テキスト 選択範囲のテキストに適用するスタイルを設定します。 フォント フォントを選択します。「(value)」を選択すると、 直接入力できます。 サイズ フォントサイズと単位を選択します。サイズは 「(value)」を選択すると、直接入力できます。 ウェイト フォントの太さを選択します。 スタイル フォントスタイル（斜体等）を選択します。 変体 大文字のスモールキャピタル表示を設定します。 行間 （アルファベットのみ有効） 行間のサイズと単位を選択します。サイズは 「(value)」を選択すると、直接入力できます。 大/小文字 大文字/小文字変換を選択します。 （アルファベットのみ有効） カラーを設定します。隣のアイコンをクリックす ると色選択ウィンドウから選択できます。 装飾 文字装飾を設定します。 適用する装飾のチェックボックスにチェックを入 れます。 カラー 13 HTMLエディタ機能説明 HTML エディタ機能説明 テキスト 選択範囲の背景に適用するスタイルを設定します。 選択範囲の背景に適用するスタイルを設定します 「選択範囲」は、カーソルがある段落またはブロックを単位として適用され ます。 背景色 背景のカラーを設定します。隣のアイコンをク リックすると色選択ウィンドウから選択できます。 背景イメー ジ 背景に適用する画像を設定します。画像ファイ ルのURLを入力します。 繰り返し 背景イメ ジの繰り返しパタ ンを選択します 背景イメージの繰り返しパターンを選択します。 配置形式 背景イメ ジの配置形式を選択します 背景イメージの配置形式を選択します。 水平位置 背景イメージの水平位置を選択します。 「(value)」を選択すると、数値を直接入力でき、 さらに隣のボックスで単位を選択します。 垂直位置 背景イメージの垂直位置を選択します。 「(value)」を選択すると、数値を直接入力でき、 さらに隣のボックスで単位を選択します。 ブロック 選択範囲のブロックに適用するスタイルを設定します。 単語間隔 ブロック内の単語間隔を選択します。 「(value)」を選択すると、数値を直接入力でき、 さらに隣のボックスで単位を選択します。 ※単語間隔は英文などの場合に有効です。 文字間隔 ブロック内の文字間隔を選択します。 「(value)」を選択すると、数値を直接入力でき、 さらに隣のボックスで単位を選択します。 垂直性列 位置 ブロックの垂直整列位置を選択します。 垂直性列位置は、イメージなど特定の種類の 要素にのみ有効になります。 テキスト整 列位置 ブロックのテキスト整列位置を選択します。 テキストイ ンデント ブロックのテキストのインデント（字下げ）を設 定します。一つ目のボックスに数値を入力し、 選択 す 二つ目のボックスから単位を選択します。 空白 ブロック内の空白の扱い方を選択します。 表示 ブロックの表示形式を選択します。 14 HTMLエディタ機能説明 HTML エディタ機能説明 ボックス 選択範囲の背景に適用するスタイルを設定します。 選択範囲の背景に適用するスタイルを設定します 「選択範囲」は、カーソルがある段落またはブロックを単位として適用され ます。 幅 ボックスの横幅を設定します。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 高さ ボックスの高さを設定します。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 フロート ボックスのフロート設定を選択します。 クリア ボックスのクリア（フロート解除）設定を選択し ます。 パディング ボックスのパディング（ボックスの外枠と中身と の間のスペース）を設定します。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 「すべて同じ」にチェックを入れると、「上」の欄 に設定したものが、「右」「下」「左」にも適用され ます。チェックを外せば、上下左右を別々に設 定することができます。 マージン ボックスのマージン（ボックスの外枠と周辺要 素との間のスペース）を設定します。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 「すべて同じ」にチェックを入れると、「上」の欄 に設定したものが、「右」「下」「左」にも適用され ます。チェックを外せば、上下左右を別々に設 定することができます。 ボーダー 選択範囲のボーダー（枠線）に適用するスタイルを設定します。 「選択範囲」は、カーソルがある段落またはブロックを単位として適用され ます ます。 タイプ リストデータの行頭記号のタイプを選択します。 ポジション リストデータの行頭記号の位置を選択します。 行頭記号 イメージ リストデータの行頭記号にイメージを使用する イメージのURLを入力します。 15 HTMLエディタ機能説明 HTML エディタ機能説明 リスト リスト（順序型リスト／ul、順不同型リスト／ol）に適用するスタイルを設定 リスト（順序型リスト／ul 順不同型リスト／ol）に適用するスタイルを設定 します。 カーソルがひとつリストデータ（li）の内部にある場合、そのリストデータに 対して設定され、リストデータすべてを選択した状態であれば、リスト自身 に対して設定されます。 タイプ 背景のカラーを設定します。隣のアイコンをク リックすると色選択ウィンドウから選択できます。 背景イメー ジ 背景に適用する画像を設定します。画像ファイ ルのURLを入力します。 繰り返し 背景イメ ジの繰り返しパタ ンを選択します 背景イメージの繰り返しパターンを選択します。 配置形式 背景イメ ジの配置形式を選択します 背景イメージの配置形式を選択します。 水平位置 背景イメージの水平位置を選択します。 「(value)」を選択すると、数値を直接入力でき、 さらに隣のボックスで単位を選択します。 垂直位置 背景イメージの垂直位置を選択します。 「(value)」を選択すると、数値を直接入力でき、 さらに隣のボックスで単位を選択します。 ポジショニング 選択範囲のボックスのポジショニングに適用するスタイルを設定します。 「選択範囲」は、カーソルがある段落またはブロックを単位として適用され ます。 タイプ ポジショニングのタイプを選択します。 可視性 ボックスの可視性を選択します。 幅 ボックスの横幅を設定します ボックスの横幅を設定します。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 ※この設定は「ボックス」で設定できる「幅」と同 一であり、一方に値を設定するともう一方には 自動的に反映されます。 Zインデッ クス ボックスの重なり順序を設定します。 ボックスの重なり順序を設定します 数値が大きいほど手前に表示されます。 この設定は「タイプ」で「absolute」を選択した場 合のみ有効です。 高さ ボックスの高さを設定します。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 ※ の設定は「ボ ク で設定できる「高さ と ※この設定は「ボックス」で設定できる「高さ」と 同一であり、一方に値を設定するともう一方に は自動的に反映されます オーバー フロー 内容のはみ出した部分の処理を選択します。 位置 ボックスの位置を設定します。 この設定は「タイプ」で「absolute」または 「relative」を選択した場合のみ有効です。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 「すべて同じ」にチェックを入れると、「上」の欄 に設定したものが、「右」「下」「左」にも適用され ます。チェックを外せば、上下左右を別々に設 定することができます。 ※通常は「上or下」「左or右」それぞれ、一方の み設定します。 クリップ ボックスのクリップ（切り抜き表示範囲指定）を 設定します。 この設定は「タイプ」で「absolute」を選択した場 合のみ有効です。 一つ目のボックスに数値を入力し、二つ目の ボックスから単位を選択します。 「すべて同じ」にチェックを入れると、「上」の欄 に設定したものが、「右」「下」「左」にも適用され ます。チェックを外せば、上下左右を別々に設 定することができます。 16 HTMLエディタ機能説明 HTML エディタ機能説明 表の挿入 編集中の文書中で、カーソルがある場所に表（テーブル）を挿入します。 編集中の文書中で カ ソルがある場所に表（テ ブル）を挿入します アイコンをクリックすると、表を挿入するウィンドウが開きます。 表の設定は２つのタブにまたがっており、詳細な設定ができます。 基本 表に関する基本設定を行います。 最低限ここの情報だけを設定すれば表を挿入することができます。 最低限ここの情報だけを設定すれば表を挿入することができます 列 表の列の数を入力します。 行 表の行の数を入力します。 セル内余 白 表のセル内余白（cellpadding）を入力します。 セル間隔 表のセル間隔（cellspacing）を入力します。 配置 表の配置方法を選択します。 枠線 表の枠線の太さを入力します。 幅 表の幅を入力します。 高さ 表の高さを入力します。 クラス スタイルシートのクラスを設定します。 キャプショ ン有 表のキャプション（表題）を使用するかどうかを 設定します。チェックを入れると、キャプション の入力欄が追加されます。 詳細 表に関する詳細設定を行います。 ID IDを設定します。 サマリー 表の要約説明を入力します。 Style スタイルシート属性を設定します。 言語コード 表の言語を設定します。（lang属性／例： ja） 背景イメージ 背景に適用する画像を設定します。画像 ファイルのURLを入力します。 ァイ を入力 ます。 セルの枠線 表の枠線の太さを入力します。 内側枠線の ルール 表の枠線の表示ルールを選択します。 （rules属性） 文字の向き 表の文字列の記述方向を設定します。（dir 属性） 境界線色 境界線のカラーを設定します。隣のアイコン をクリックすると色選択ウィンドウから選択で きます。 背景色 背景のカラーを設定します。隣のアイコンを クリックすると色選択ウィンドウから選択でき ます。 17 HTMLエディタ機能説明 HTML エディタ機能説明 枠線の無い表は通常セルの境界線が見えませんが、編集時の利便性のため 「ガイドの表示」をオンにすることで、点線で表示されるようになります。 ：ガイドの表示 テーブルの端をクリックすると、周囲に四角いマークが表示され、選択状態になります。この状態で「表の 挿入」アイコンをクリックすると、その表の情報を修正することができます。 また、周囲の四角いマークをドラッグすることで、サイズを変更することができます。 選択状態で、キーボードの「Delete」キーを押せば、表を削除することができます。 テーブルの行のプロパティ 編集中の表（テーブル）で現在カーソルがあるセルの設定を行います。 テーブルの行の設定は２つのタブにまたがっており、詳細な設定ができます。 設定を保存する際、適用する行の条件を選択でき、複数の行に一括で適用することができます。 基本 テーブルの行に関する基本設定を行います。 テーブル内で の行設定 この行がテーブル内のどこに配置されるか を選択します。 配置 この行のセルの内容の水平方向の配置方 法を選択します。 垂直方向の 配置 この行のセルの内容の垂直方向の配置方 法を選択します。 クラス スタイルシートのクラスを設定します。 高さ この行の高さを入力します。 詳細 テーブルの行に関する詳細設定を行います。 ID IDを設定します。 Style スタイルシート属性を設定します。 文字列の向き 文字列の記述方向を設定します。（dir属性） 言語コード 言語を設定します。（lang属性／例： ja） 背景イメージ 背景に適用する画像を設定します。画像 ファイルのURLを入力します。 背景色 背景のカラーを設定します。隣のアイコンを クリックすると色選択ウィンドウから選択でき ます。 18 HTMLエディタ機能説明 HTML エディタ機能説明 テーブルのセルのプロパティ 編集中の表（テーブル）で現在カーソルがあるセルの設定を行います。 編集中の表（テ ブル）で現在カ ソルがあるセルの設定を行います テーブルのセルの設定は２つのタブにまたがっており、詳細な設定ができます。 設定を保存する際、適用するセルの条件を選択でき、複数のセルに一括で適用することができます。 基本 テーブルのセルに関する基本設定を行います。 配置 このセルの内容の水平方向の配置方法を 選択します。 セルタイプ このセルのタイプを選択します。 垂直方向の 配置 このセルの内容の垂直方向の配置方法を 選択します。 スコープ セルのタイプがヘッダ(ｔｈ)の場合の見出しの ( ) 示す方向を選択します。 幅 このセルの幅を入力します。 高さ このセルの高さを入力します。 クラス スタイルシートのクラスを設定します。 詳細 テーブルのセルに関する基本設定を行います。 ID IDを設定します。 Style スタイルシート属性を設定します。 文字列の向き 文字列の記述方向を設定します。（dir属性） 言語コード 言語を設定します。（lang属性／例： ja） 背景イメージ 背景に適用する画像を設定します。画像 ファイルのURLを入力します。 背景色 背景のカラーを設定します。隣のアイコンを クリックすると色選択ウィンドウから選択でき ます。 19 HTMLエディタ機能説明 HTML エディタ機能説明 セルの結合 編集中の表（テーブル）で、複数のセルの結合をおこないます。 編集中の表（テ ブル）で 複数のセルの結合をおこないます 現在カーソルがあるセルを基準に、列（右方向）と行（下方向）の結合数 を入力して結合をおこないます。 結合前のセルにデータが含まれる場合は、結合後のセルに全てのデー タが結合されたものが入ります。 結合したセルを元の状態に分割するには、「セルの分割」をおこないま す。 新規レイヤー挿入 レイヤーとは、ページ上でスペースを占有せずに、浮いた状態で自由に配置することができるボックスです。 内部的にはポジショニングで「absolute」を指定した状態になります。 レイヤーの中にはテキストや画像等、通常のページと同じようにコンテンツを入れることができます。 ※レイヤーの位置指定は画面の左上が基準となります。編集時は編集欄の左上を基準としているため、実 位置指定 準 り す。編集時 編集欄 を 準 、実 際のページとは配置が異なる場合があります。編集時と同じ配置にする場合は、コンテンツ全体を<div>で 囲い、それに対してポジショニングを「relative」に設定してください。 ：ガイドの表示 ：前面へ移動 ：背面へ移動 背面 移動 枠線や背景を指定しないレイヤーは境界線が見えない状態ですが、編集時の利便 性のため、 「ガイドの表示」をオンにすることで、点線で表示されるようになります。 レイヤーの重なりは、後から追加したレイヤーが手前に配置されますが、「前面へ 移動」「背面へ移動」を利用することで順序を入れ替えることができます。 レイヤーをクリックすると、周囲に四角いマークが表示され、選択状態になります。こ の状態で「イメージの挿入・修正」アイコンをクリックすると、そのイメージの情報を修 正することができます。 また、周囲の四角いマークをドラッグすることで、サイズを変更することができます。 選択状態で、キーボードの「Delete」キーを押せば、アンカーを削除することができま す。 レイヤーを選択状態で内部をクリックすると、枠線が変わりカーソルがレイヤーの内 部に移動し、テキストの入力やイメージや表の挿入等、レイヤー内コンテンツを編集 することができまるようになります。 レイヤーの背景や枠線等のスタイルは「CSSスタイル編集」でおこないます。 レイヤーを選択した状態で「新規レイヤー挿入」をおこなうと、そのレイヤーと同じスタイルや中身を持つレ イヤ をコピ して挿入することができます （同じ場所に配置されるので ドラッグで移動させる必要があ イヤーをコピーして挿入することができます。（同じ場所に配置されるので、ドラッグで移動させる必要があ ります） ：絶対位置 （absolute）切り替え レイヤーを選択した状態で「絶対位置（absolute）切り替え」をクリック（オフにす る）すると、そのレイヤーの絶対位置指定が解除され、レイヤー状態でなくなり ます。レイヤー状態でなくなった後で再度「絶対位置（absolute）切り替え」をオン にするとレイヤーになりますが、以前の位置やサイズ設定は失われます。 20 HTMLエディタ機能説明 HTML エディタ機能説明 HTML表示 HTML 表示 編集中の文書のHTMLソースを表示します。 「HTMLモード」のタブが提供されている箇所では、これ を利用する場合と同じ機能です。 どちらのモードを使用しても、編集するソースは同じもの ですので、途中でモードを切り替えながら編集すること が可能です。 プレビュ プレビュー 編集中の文書の実際の表示を確認することができます。 ただし、ここでのプレビューは編集しているソースのみで の状態ですので、実際のページではCSSが適用される 等の影響により、このプレビューとは違った表示結果に なる場合があります。 21
© Copyright 2024 Paperzz
