![]() ![]() |
![]() ![]() ![]()
|
ページの内容を作る1,文字を入れる![]() 1-1,タイトル最初はやっぱりタイトルですね。書式ツールバーの一番左の【本文のテキスト】と書かれているところの右側の▼をクリックして【見出し1】を選んでみましょう。何だかカーソルが大きくなりました。文字を入力すると大きく表示されます。大きすぎますか?なら【見出し2】を選んでみましょう。ちょっと小さくなりました。他にも【見出し3】〜【見出し6】まであります。各サイズはNavigatorでは右の画像のようになります。 タイトルが【見出し1】ならサブタイトルは【見出し2】、タイトルが【見出し2】ならサブタイトルは【見出し3】のように指定していきます。まだこの段階では色を変えたりすることは考えないで下さい。「見出しだから見出しのタグを使うこと」が重要です。 1-2,段落タイトルとサブタイトルを入れたら次は文章を入れていきます。書式のツールバーの一番左を(さっき【見出し】に変えたところです。)【段落】にします。 そして文章をどんどん入力していって下さい。文章を区切りたいときはEnterキーで改行できます。 ![]() <p>段落</p> 改行するつもりでスペースを画面端まで入れてしまう方をたまに見かけますが、パソコンの画面の大きさはそのパソコンによってまちまちです。自分のパソコンで綺麗に揃っているつもりが他のパソコンで見るとぐちゃぐちゃになってしまいます。 ![]() ![]() 基本的にはこのように見出しと段落を繰り返してページを作成していきます。 !覚えておこうちょっと操作を間違えてしまったとき、元に戻す操作のアイコンがComposerにはありません。メニューバーの【編集】にはあるのですがいちいち【編集】→【元に戻す】とやるのは面倒です。それを簡単にできる方法があります。メニューバーの【編集】をクリックすると【元に戻す】の後に【Ctrl+Z】と書いてありますね。これはショートカットキーといって、キーボードで同じ操作ができるのです。この場合はキーボードのCtrlキーを押しながらZキーを押すと元に戻す操作ができます。 他にもメニューバーの中にショートカットキーが書かれてあるものがたくさんあります。全部覚えるのは大変ですが、よく使う操作は覚えておくと便利です。 1-3,文字の配置を変える【HTMLタグ】モードで作業します。![]() 見出し部分の文頭に、 ![]() ![]() その状態で、「書式ツールバー」の中央揃え、または右寄せのアイコンをクリックします。 段落の配置を換えるときは ![]() ![]() style="text-align: center;" style="text-align: right;" 1-4,インデント(字下げ)の設定【HTMLタグ】モードで作業します。![]() 段落の文頭の ![]() 「書式ツールバー」の【文字列をインデント】アイコン(またはメニューバーの【書式】→【インデント挿入】)をクリックします。一度クリックする毎に段落全体が右に40px移動します。インデントを解除するときは「書式ツールバー」の【文字列のインデント解除】アイコン(またはメニューバーの【書式】→【インデント削除】)をクリックします。 ![]() style="margin-left: **px;" 1-5,文字を強調する●斜体で強調強調したい文字をドラッグして選択します。メニューバーの【書式】→【文字列のスタイル】を選びます。 その中から【強調】を選ぶと、文字が斜体になります。 ![]() <em>強調</em> ●太字で強調強調したい文字をドラッグして選択します。メニューバーの【書式】→【文字列のスタイル】を選びます。 その中から【太字強調】を選ぶと、文字が太字になります。 ![]() <strong>太字強調</strong> 1-6,引用元を明示する引用文をドラッグして選択します。メニューバーの【書式】→【文字列のスタイル】を選びます。 その中から【引用】を選びます。 ![]() <cite>引用</cite> 1-7,プログラムコード●プログラムコードをホームページに載せるプログラムコードの文字列をドラッグして選択します。メニューバーの【書式】→【文字列のスタイル】を選びます。 その中から【コード】を選びます。 ※IE、NNで等幅フォントで表示されます。 ![]() <code> コード </code>●プログラムコードの結果プログラムコードの出力結果の文字列をドラッグして選択します。メニューバーの【書式】→【文字列のスタイル】を選びます。 その中から【サンプル出力】を選びます。 ※IE,NNで等幅フォントで表示されます。 ![]() <samp>サンプル出力</samp> ●変数や引数を明示する変数(引数)の文字列をドラッグして選択します。メニューバーの【書式】→【文字列のスタイル】を選びます。 その中から【変数】を選びます。 ※IE,NNで斜体で表示されます。 ![]() <var>変数</var> ここでの説明は、単に文字を斜体にする、太字にするということではなく、ホームページの作り手の意図を読み手に伝えるHTMLを使うことを推奨するものです。例えば強調したい文字を赤くしたとして、色弱な方や音声ブラウザを使っている方にはそれは強調したこととしては伝わりません。Composerには他にもいくつか文字のスタイルが設定できますが、一般的でないものは省略しています。
|
協力:札幌市のホームページ・ネットショップ制作 OFFICE-KIE.COM |
2004©さゆぼう |
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>