Home / Index / Prev / Next

3.Mozilla Composer を設定する

Composer を開いたら、ホームページをつくるための設定を行います。
最初に設定すれば、設定後に作成する全てのページに適用されます。

 メニューバーの [編集(E)] → [設定(E)] から [設定] ダイアログ ボックスを開きます。
設定画面の選択設定ダイアログボックス

■ Composer の設定

カテゴリの選択
[設定] ダイアログボックスでは、Composer の設定だけではなく、Navigator や Mail の設定もすることができます。
もちろんここでは Composer の設定をします。

[最近使用したページメニュー]
最近使用したページメニュー
・表示する最大ページ数
メニューバーの [ファイル(F)] → [最近使用したページ(R)] で表示される最近使ったページの最大数を指定します。
特に変更することはありません。

[ページを保存、出版するとき]
ページを保存、出版するとき
・元のソースの形式を維持する
HTML ソースにおける元の書式を維持します。

・HTML ソースを再整形する
改行とインデントを使って、HTML ソースを読みやすくします。 自分で HTML ソースを読みやすくするために空白やタブなどを挿入される方は、元の形式を維持する方にチェックしてください。HTML がわからない方はそのまま(再整形)でよいです。

・ページを保存するときに、画像と他の関連するファイルを保存する
ここにチェックをすると、ページを保存するときページに関連している画像や CSS ファイル、JavaScript ファイルなども一緒に保存されます。チェックをしない(はずす)と、HTML ファイルだけが保存されます。
ということですが、試したけどよくわかりませんでした。ローカル(自分のパソコン)で作ってるときには、影響はないようです。

・ページを出版するときに、常に、出版ダイアログを表示する
ここにチェックをすると、ページを出版(Web サーバーにアップロードすること)するときに、出版ダイアログボックスが表示されます。チェックをしない(はずす)と、ページを出版するために追加情報が 必要な場合にのみ出版ダイアログボックスが表示されます。
チェックはしてもしなくてもよいです。Composer の出版機能はあまりおすすめできません。

[表の編集]
表の編集
・セルの挿入、削除の際に、表(<table>)のレイアウトを維持する
ここにチェックをすると、表にセルを挿入したり、削除し たときでも四角形の形状を保つことができます。チェックをしない(はずす)と、セルを削除したときにセルの枠線も削除されるため、表の中に空白ができた り、表の形が不規則になる場合があります。
ということですので、チェックをしておきましょう。

[カスケーディングスタイルシート(CSS)の編集]
CSSの編集
・HTML 要素と属性の代わりに CSS スタイルを使う
ここにチェックをすると CSS スタイルの書式が作成されます。チェックをしない(はずす)と、CSS は使用されません。
チェックをしてもしなくてもよいのですが、チェックをしないと書式ツールバーの [テキストの背景色を選択]テキストの背景色を選択ボタンが使えなくなりますので、一応チェックをしておきましょう。
テキストの背景色を選択/テキストの背景色を選択/テキストの背景色を選択

ちなみに、実際にチェックをしたときと、しなかったときの<HTML>ソースを並べるとこうなります。
画面表示
チェック
<HTML> ソース
王様の耳はロバの耳
しない(HTML)
<font color="#cc66cc">王様の耳はロバの耳</font>
する(CSS)
<span style="color: rgb(204, 102, 204);">王様 の耳はロバの耳</span>

※このホームページでは、ときどき HTML ソースではどのように表示されるかを参考に記載していますが、私は CSS を使っていますので、ソースの一部は CSS で書いています。ソースの中で、「style="~"」 の部分が CSS です。

■ 新しいページの設定

次に [設定] ダイアログボックスのカテゴリから、[新しいページの設定] を選択します。
新しいページの設定
新しいページの設定ダイアログ
[作成者(U)]
作成者
・作成者
ページを作る人(あなた)の名前を入力します。作成する新規ページで、HTML ソースに作成者名が入ります。
著作権を主張したい人、目立ちたい人など、入れたい人は入力してください。入力するとしても、趣味の範囲でホームページを作る人は、HN(ハンドルネー ム)が無難でしょう。画面には表示されませんが、ソースにはこのように表示されます。
<meta content="作成者" name="author">

[デフォルトのページ設定/デフォルト色]
デフォルト色の設定
・読者のデフォルト色
ここにチェックをすると、文字の色やリンク部分の色について、ホームページの訪問者のブラウザの設定で表示されるように します。Mozilla で読者のデフォルト色は、[編集(E)] → [設定(E)] で「設定」ダイアログ ボックスを開いて、カテゴリか ら[表示 ] →[配色] で設定することができます。

・カスタム配色を使用
ここにチェックをすると、文字の色、リンク部分の色、ページの背景色について、自分で好きな色を指定することができます。指定したい色ボ タンをクリックすると、カラーパレットが表示されるので、その中から好きな色を選択して[OK] をクリックします。
カスタム色の設定
[デフォルトのページ設定/背景画像(M)]
背景画像の設定
・背景画像
画像ファイルの場所と名前を入力するか、[ファイルを選択(O)] をクリックして、画像ファイルを指定します。背景画像 は背景色より優先され、並べて表示されます。
背景画像見本←この画像ファイルを背景画像にするには…
[ファイルを選択(O)] をクリックすると、[画像ファイルを選択] ダイアログボックス開くので、背景画像にしたい画像ファイルを選択して、[開く(O)] をクリックし、背景画像のURL が入ったことを確認したら、[OK] をクリックして [設定] ダイアログボックスを閉じます。
画像ファイルを選択するボタン
画像ファイルを選択してOK10
Composer ウィンドウに戻り、新規作成ボタンをクリックすると、指定した画像ファイルが背景画像となった新しい Composer ウィンドウが開きます。
背景が入ったComposer
指定した画像ファイルが画面に並べて表示されていますね。
ホームページ内のすべてのページに同じ背景画像を使いたいときには便利です。ちなみに、背景画像を指定する場合には、背景色も背景画像と同系色を指定して おいたほうがよいです。画像ファイルは読み込みに時間がかかるため、背景画像が表示される前でも、ページのイメージがわかるようにするためです。

■ ツールバーの設定

次に [設定] ダイアログボックスのカテゴリから、[ツールバー] を選択します。
ツールバーの設定 ツールバーの設定ダイアログ
[構成ツールバーに表示するボタンの選択]
表示されていたほうが便利なので、全部にチェックを入れましょう。慣れてきたら使わないもののチェックをはずせばよいです。

[書式ツールバーに表示するボタンの選択]
表示されていたほうが便利なので、全部にチェックを入れましょう。慣れてきたら使わないもののチェックをはずせばよいです。

これで、Composer の設定ができました。

HTML と CSS で色を指定する方法
HTML で色を指定するには、red、pink、Yellow といったカ ラー ネームで指定する方法と、赤(red)、緑(green)、青(blue)の3色をそれぞれ 00〜ff の16進数6桁で表す #rrggbb で指定する方法があります。
CSS で色を指定するには、カラーネーム、#rrggbb のほか、#rrggbb の2桁を1桁で表す #rgb で指定する方法、 red、green、blue の3色をそれぞれ 0〜255 の10進数で表す rgb(n,n,n) で指定する方法、さらに、red、green、blue の3色をそれぞれパーセントで表す rgb(n%,n%,n%) で指定する方法があります。
Composer では、HTML は #rrggbb、CSS は rgb(n,n,n) で色を指定しています。
black
#000000
#000
rgb(0,0,0)
rgb(0%,0%,0%)

red
#ff0000
#f00
rgb(255,0,0) rgb(100%,0%,0%)

blue
#0000ff
#00f
rgb(0,0,255)
rgb(0%,0%,100%)

yellow
#ffff00
#ff0
rgb(255,255,0)
rgb(100%,100%,0%)

white
#ffffff
#fff
rgb(255,255,255) rgb(100%,100%,100%)

Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座