さゆぼうの部屋トップに戻る
Netscape Composer講座トップに戻る
Netscape Composer操作講座メニュー

ページの内容を作る

1,文字を入れる

新しいページに文字を入力していきます。

1-1,タイトル

最初はやっぱりタイトルですね。書式ツールバーの一番左の【本文のテキスト】と書かれているところの右側の▼をクリックして【見出し1】を選んでみましょう。
何だかカーソルが大きくなりました。文字を入力すると大きく表示されます。大きすぎますか?なら【見出し2】を選んでみましょう。ちょっと小さくなりました。他にも【見出し3】〜【見出し6】まであります。各サイズはNavigatorでは右の画像のようになります。

タイトルが【見出し1】ならサブタイトルは【見出し2】、タイトルが【見出し2】ならサブタイトルは【見出し3】のように指定していきます。まだこの段階では色を変えたりすることは考えないで下さい。「見出しだから見出しのタグを使うこと」が重要です。
ここで設定したHTML
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

1-2,段落

タイトルとサブタイトルを入れたら次は文章を入れていきます。
書式のツールバーの一番左を(さっき【見出し】に変えたところです。)【段落】にします。
そして文章をどんどん入力していって下さい。文章を区切りたいときはEnterキーで改行できます。
ここで設定したHTML
<p>段落</p>
<悪い例・スペースを改行に使う>
改行するつもりでスペースを画面端まで入れてしまう方をたまに見かけますが、パソコンの画面の大きさはそのパソコンによってまちまちです。自分のパソコンで綺麗に揃っているつもりが他のパソコンで見るとぐちゃぐちゃになってしまいます。


基本的にはこのように見出しと段落を繰り返してページを作成していきます。

!覚えておこう

ちょっと操作を間違えてしまったとき、元に戻す操作のアイコンがComposerにはありません。メニューバーの【編集】にはあるのですがいちいち【編集】→【元に戻す】とやるのは面倒です。
それを簡単にできる方法があります。メニューバーの【編集】をクリックすると【元に戻す】の後に【Ctrl+Z】と書いてありますね。これはショートカットキーといって、キーボードで同じ操作ができるのです。この場合はキーボードのCtrlキーを押しながらZキーを押すと元に戻す操作ができます。
他にもメニューバーの中にショートカットキーが書かれてあるものがたくさんあります。全部覚えるのは大変ですが、よく使う操作は覚えておくと便利です。

1-3,文字の配置を変える

【HTMLタグ】モードで作業します。

見出し部分の文頭に、H1のマークがあります。これをクリックすると見出し全体が選択されます。

その状態で、「書式ツールバー」の中央揃え、または右寄せのアイコンをクリックします。
段落の配置を換えるときはPのアイコンをクリックして段落を選択します。
ここで設定したHTML(インラインスタイルシート)
style="text-align: center;"
style="text-align: right;"

1-4,インデント(字下げ)の設定

【HTMLタグ】モードで作業します。

段落の文頭のPのアイコンをクリックして段落を選択します。
書式ツールバー」の【文字列をインデント】アイコン(またはメニューバーの【書式】→【インデント挿入】)をクリックします。一度クリックする毎に段落全体が右に40px移動します。インデントを解除するときは「書式ツールバー」の【文字列のインデント解除】アイコン(またはメニューバーの【書式】→【インデント削除】)をクリックします。
ここで設定したHTML(スタイルシート)
style="margin-left: **px;"

1-5,文字を強調する

●斜体で強調

強調したい文字をドラッグして選択します。
メニューバー【書式】→【文字列のスタイル】を選びます。
その中から【強調】を選ぶと、文字が斜体になります。
ここで設定したHTML
<em>強調</em>

●太字で強調

強調したい文字をドラッグして選択します。
メニューバー【書式】→【文字列のスタイル】を選びます。
その中から【太字強調】を選ぶと、文字が太字になります。
ここで設定したHTML
<strong>太字強調</strong>

1-6,引用元を明示する

引用文をドラッグして選択します。
メニューバー【書式】→【文字列のスタイル】を選びます。
その中から【引用】を選びます。
ここで設定したHTML
<cite>引用</cite>

1-7,プログラムコード

●プログラムコードをホームページに載せる

プログラムコードの文字列をドラッグして選択します。
メニューバー【書式】→【文字列のスタイル】を選びます。
その中から【コード】を選びます。
※IE、NNで等幅フォントで表示されます。
ここで設定したHTML
<code>コード</code>

●プログラムコードの結果

プログラムコードの出力結果の文字列をドラッグして選択します。
メニューバー【書式】→【文字列のスタイル】を選びます。
その中から【サンプル出力】を選びます。
※IE,NNで等幅フォントで表示されます。
ここで設定したHTML
<samp>サンプル出力</samp>

●変数や引数を明示する

変数(引数)の文字列をドラッグして選択します。
メニューバー【書式】→【文字列のスタイル】を選びます。
その中から【変数】を選びます。
※IE,NNで斜体で表示されます。
ここで設定したHTML
<var>変数</var>
ここでの説明は、単に文字を斜体にする、太字にするということではなく、ホームページの作り手の意図を読み手に伝えるHTMLを使うことを推奨するものです。例えば強調したい文字を赤くしたとして、色弱な方や音声ブラウザを使っている方にはそれは強調したこととしては伝わりません。Composerには他にもいくつか文字のスタイルが設定できますが、一般的でないものは省略しています。

Next: 文字の装飾色々>>

協力:札幌市のホームページ・ネットショップ制作 OFFICE-KIE.COM
2004©さゆぼう