Step.5 HTMLファイルのWYSIWYG編集

WYSIWYGとは"What You See Is What You Get"の略で、つまり、画面で見ているものと同じ状態が手に入るという事ですが、この言葉はもともと印刷に関する用語として使われていました。しかし最近では、htmlファイルの作成について、エディタでマーク付けしていくやり方でなくワープロ感覚での編集ができるhtmlエディタの事も指すようになってきています。

そして、紙にもこのWYSIWYG方式でのhtmlファイル編集機能が搭載されています。

ワープロ感覚での編集が出来ますので、取り込んだ文書の不要部分削除など、多くの場面で役に立つでしょう。

紙でのWYSIWYG編集はhtmlファイルを「加工する」モードへ変更する事で有効となります。操作は主に画面上部のボタンから行いますので、まずは、各ボタンの役割について説明しましょう。

「名前」　

ここから、ファイル名を変更する。

「元に戻す」「やり直す」　

テキストファイルのときと同じ。編集操作を戻したり、やり直す。

「字+」「字-」　

文字の大きさを変更する。複数回押すたびに変化する。
タグ情報：Font size="n"で指定。

「色」　

文字の色を指定。"オリジナル色"で好きな色を指定可能。
タグ情報：Font color="#hheexx"で指定。

「背」　

文書の背景色を指定。"背景画像"の指定方法は「絵」を参照。
タグ情報：BODY bgColor="#hheexx" background="ファイル名"で指定。
色と画像両方指定してある時は、画像が優先。

「太」　

文字を強調表示する。押し下げられている時に再度押すと、解除される。
タグ情報：<strong>文字</strong>

「マーカ」　

テキストファイルの時と同様、htmlファイルにもマーカを塗る事が可能。
塗りたい部分を範囲選択してから押す。
消したい時は、範囲選択した状態で右端のボタンを押す。
タグ情報：<FONT style="BACKGROUND-COLOR: #ffff00">文</FONT>
　　　　　　<FONT style="BACKGROUND-COLOR: #ff00ff">文</FONT>
　　　　　　<FONT style="BACKGROUND-COLOR: #00ffff">文</FONT>

「段落指定」　

段落の位置を指定する。左から順に、左寄せ・センタリング・右寄せ。
タグ情報：それぞれ<P align="center">段落</P>で指定。

「絵」　

画像を貼り付け。このボタンを押すと今までに取り込んだ画像全てがサムネイル形式で表示されるので、貼り付けたい画像がその中にある場合は、目的の画像をマウスでクリックする。これでカーソル位置に画像が貼り付けられる。
もし、目的の画像が別フォルダにあるときは、「他から選ぶ」を選択する。
尚、「背」ボタンで背景画像を指定する時も同じ画面が出るが、一度設定した背景画像を削除したい時は、右上の「背景画像を消す」ボタンを押す。

通常テキストファイルの編集では[Enter]キーを押すと改行になりますが、htmlのWYSIWYG編集では[Enter]キーは段落(P要素)の挿入になります。もし改行（BR要素)を入れたい時は、"shift+[Enter]"キーを押して下さい。

画像を削除するには、マウスで選択してから[Delete]キーを押します。選択すると四隅にマークが表示されますので、その状態で好きな場所に移動する事も可能です。

表(TABLE)も同じように削除・移動が可能です。選択は端をクリックして行ってください。表内部の編集は、マウスで編集したい部分をクリックしてから行います。