Home / Index / Prev / Next

6.保存する

■ 保存

ここで1回保存しておきましょう。
構成ツールバーにある、保存ボタンをクリックすると、 [名前を付けて保存] ダイアログボックスが開きます。
名前をつけて保存ダイアログ
ファイル名には、デフォルトでページのタイトル(ここでは、「スキー大好きっ!」)がつけられています。HTML ファイルなので、ファイルの拡張子は「.html」です。

ファイルの保存場所はわかりやすいように、デスクトップやマイドキュメントなどに、ホームページ用のフォルダを作って、その中に保存しましょう。

[名前を付けて保存] ダイアログボックスの右上にある [新しいフォルダの作成] ボタンをクリックするとフォルダを作られるので、フォルダにわかりやすい名 前をつけます。
新しいフォルダの作成ボタン新しいフォルダに名前をつける
マイドキュメントの中に、「ski」という名前のフォルダを作りました。

次に、新しく作ったフォルダをクリックして、その中に作成したファイルを保存します。
ファイル名は、「スキー大好きっ!.html」となっていますが、ホームページを置くスペース(Web サーバ)を借りているところ(プロバイダ、レンタルサーバ屋さんなど)から特に指定がない限り、トップページのファイル名は、 「index.html」とします。
ファイル名デフォルト
                   ↓
ファイル名index
ファイル名を変えたら、[保存(S)]ボタンをク リックします。
保存ボタンをクリック

■ 保存したファイルを開く

保存したファイルを開きます。
Mozilla を起動して、コンポーネントバーから Composer を開きます。コンポーネントバーからコンポーザーを開く
構成ツールバーの開くボタンをクリックすると、 [HTML ファイルを開く] ダイアログボックスが開きます。
HTMLファイルを開くダイアログ
表示されているファイルの中から開きたいファイルを探してクリックするか、[ファイル名(N)] にファイル名を入力して、[開く(O)] をクリックすれば、ファイルを開くことができます。今 は1つしかありませんので、探す必要はない ですね。
ここでは、さっき保存したばかりなので、自動的にフォルダ「ski」が表示されていますが、ほかのフォルダが表示されている場合には、フォルダ「ski」 を開いてから、目的のファイルを開くことになります。

最近使ったファイルを開くには、[ファイル(F)] メニューから、[最近使用したページ(R)] を選 択し、リストから目的のファイルをクリックすれば、ファイルを探すことなくすばやく開くことができます。
最近使用したページを開く
最近使用したページのリストに表示するファイル数は、[編集(E)] → [設定(E)] で、[設定] ダイアログボックス を 開き、[Composer] カテゴリ の[表示する最大ページ数(N)] で、変更するこ とができます。

親要素と子要素
これは、トップページのタイトル(見出し)部分の HTML ソースです。
<h1 style="text-align: center; font-style: italic; color: rgb(51, 102, 255); text-decoration: underline;">スキー<span style="color: rgb(255, 0, 0);">大好きっ!</span></h1>
全体は<h1>要素ですが、その中で、「大好きっ!」の部分は<span>タグに囲まれているので、<span>要 素ということになります。この場合の、<h1>要素を親要素、<span>要素を子 要素と呼びます。画面に表示される部分は<body>要素なので、<body>要素の中にあ る<h1>要素は、<body>要素を親要素とする子要素になります。また、HTML ファイル全体は、<html>要素です。
このように、HTML ファイルは、要素の中に要素があって、その中にまた要素があるというような階層構造になっており、パソコンの中にあるフォルダのツリー型構造と同じような イメージになります。
親要素で指定したプロパティは子要素にも適用されます。これを継承と言います。親要素のプロパティを 子要素が継承するので、子要素は親要素のプロパティのうち、変えたいプロパティだけを指定します。上の例では、<span>要素で文字色だけ を指定し ているので、<h1>要素のそのほかのプロパティ(中央寄せ、斜体文字、アンダーライン)は継承されています。
また、アンダーラインは文字色と同じ色になる性質があるので、<h1>要素で指定したアンダーラインの色は<span>要素に 継承されています。<span>要素にもアンダーラインのプロパティを挿入すれば、<h1>要素のアンダーラインは継承されない ので、「大好きっ!」のアンダーラ インは文字色と同じ赤になります。
<h1 style="text-align: center; font-style:italic; color: rgb(51, 102, 255); text-decoration:underline;">スキー<span style="color: rgb(255, 0, 0); text-decoration: underline;"> 大好きっ!</span></h1>

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