SeaMonkey教室 - Composer の使い方 (2) 基本操作

Last updated 2023/06/05

Composer の使い方 (2) 基本操作

	win	mac
編集	Ctrl + E	Command + E
保存	Ctrl + S	Command + S
右クリック	右クリック	Ctrl + クリック

通常はブラウザとして使える SeaMonkey ですが、簡単な操作で、Composer に切り替わり、Web 編集を開始できます。しかも、編集画面は４つもあって、ソースなどもすぐに編集できます。ここでは、こうした切り替えから、文書や画像の入れ方など、基本操作を説明します。

なお、このサイトは windows 版 SeaMonkey での使い方を紹介しています。mac 版使用の際には、右のような読み替えをお願いします。

■１．Composer の呼び出し

１．ブラウザ画面で、「ファイル」→「ページを編集」でエディタ画面（Composer）に切り替わる。[CTRL]+[E] でもよい。
２．エディタ画面（Composer 画面）はモード切替で４つの画面を切り替えられる（下記参照）。

インターネットオプション

３．４つの切り替えのうち、標準画面と<HTML>ソース画面は必須。

標準画面	HTMLの文法をよく分からなくても大丈夫。この画面だけでかなりのことができます。画像の挿入や表の挿入も覚えましょう。
HTMLタグ画面	これはあまり使いませんね。タグの配置を確認するときに使いますが。
<HTML>ソース画面	ソースを直接編集できます。混みいったHTML編集をする時、トラブル発生時やスクリプト埋め込みの時には必須です。ヘッダーの編集にはこれが必要です。＊より詳しくは、Composer の使い方（3）ソース編集へ。
プレビュー画面	作ったウェブをチェックするのに使います。ただ、普通はブラウザで読み込み直すことが多いです。

■２．編集の開始と保存

１．今ある Web ページを編集するなら、そのまま。新たなページを作るなら、「ファイル」→「新規作成」→「ページを作成」。ショートカットは、Ctrl + N です。
２．編集が終わったら、「ファイル」→「保存」もしくは「名前をつけて保存」。自分のPC上のHDDなどに保存してください。ショートカットは、Ctrl + S もしくは Ctrl + A です。

＊ショートカット一覧は、Composer の使い方（4）ショートカットへ。

■３．文字の入力

１．普通に文字を入れていけば、文章が作れます。
２．「書式」→「サイズ」、「書式」→「フォント」などで、文字の大きさや色などは自由に替えられます。
３．「書式」→「配置」で、左寄せ、右寄せ、中央なども可能。表の中の文字をどちらに寄せるかなどの時によく使います。
４．アクセント記号付きの欧文文字（à á å など）や、特殊記号は「挿入」→「文字や記号」で入力できます。
５．「挿入」→「水平線」で段落区切りの線を引けます。

＊特殊文字は、文字について（5）肩字添字欧文文字へ。

■４．リンクの挿入

１．リンクを貼りたい一文をカーソル操作（shift キー＋矢印キー）または、マウス操作（ドラッグ）で選ぶ。
２．「挿入」→「リンク」でリンクプロパティを出す（下記左）。
３．リンクテキストのところには、１で選んだ一文がはいっているはず。入っていなければ、入力する。
４．リンク URL のところには、リンクしたいウェブのURLを絶対アドレスでいれるか、「ファイルを選択」でファイルを選ぶ。
５．ファイルを選ぶ時には、「URLをページの場所に相対的にする」という項目にマークを入れる（下記丸印）。

＊より詳しくは、いろいろな技（2）リンクへ。

リンクプロパティ

■５．画像の挿入　（相対アドレスの指定）

１．挿入したい場所にカーソルを移動しておいて、挿入→画像。下記のウィンドウが出る。
２．「画像の場所」のところに相対アドレスを入力する。または、「ファイルを選択」ボタンを押してファイルを選ぶ。
３．「URLをページの場所に相対的にする」という項目にマークを入れる（下記丸印）。
４．代替テキストのところに文字情報を入れる。これは、画像が表示されない時（読み上げブラウザなど含む）に示される文字。
５．「表示」タブを開き、「画像周りの文字列配列」のボタンを押すと挿入する画像の配置方法を指定できる。

＊より詳しくは、画像の入れ方（1）レイアウトへ。

相対アドレスの指定

■６．表の挿入

１．挿入したい場所にカーソルを移動しておいて、挿入→表。下記のウィンドウが出る。
２．行数と列数を考えて入力。ただし、あとから、簡単に増減できるので、適当でもよい。
３．幅は、普通100％となっているが、ここを空欄にしておくと (0 はダメ)、文字数に応じ最小サイズの表が出来るので重宝する。
４．枠線は普通 1px (ピクセル)になっているが、ここを 0 にしておくと（空欄はダメ）、透明枠の表が出来るのでこれも重宝。

＊より詳しくは、いろいろな技（1）表へ。

表のプロパティ画面

■７．タイトルとヘッダー部の入力

１．書式→ページのタイトルとプロパティ　で下記のウィンドウが開く。
２．タイトル（title）、作成者(author)、説明(description) を記入する。
３．キーワード(keywords)は、ソース画面で入力する

＊より詳しくは、 Web の心得 (3) SEO対策へ。

タイトルの入力画面

■８．アンカーの挿入とリンク

１．長い文章になるときなどは、ファイルの中にアンカーを挿入しておきます。
２．アンカーを打ちたい場所にカーソルを移動しておいて、「挿入」→「アンカー」。
３．「名前付きアンカーのプロパティ」が開くので、ここにアンカー名を入れます。内容がわかるようなアンカー名を入力します。
４．アンカーへとジャンプしたいところからは、リンクの挿入を行います（→■4）。ファイル名のところに「ファイル名#アンカー名」という形式で入力すれば、アンカー部位にリンクされることになります。

＊より詳しくは、いろいろな技（3）その他へ。

とびらへ

前へ　次へ

↑　トップへ