|
第３章 レイアウトと編集(２)
■第５回 文字の入力（フォント設定・段落等）
◆すでに ”第２回 文字の設定（スタイル設定）” で、
ベースフォントの設定の仕方を紹介しました。 ここでは、
個別の範囲指定によるフォントの設定および段落等について紹介いたします。
◆文字などの入力で注意しなければいけないのは、多機能なＷｏｒｄ上のあらゆる機能が、
そのままＨＴＭＬのＷｅｂ形式に、すべてがあてはまりサポートされているわけではないので、
その点をご注意ください。
ＨＴＭＬの書式について、自信がないような場合は、そのサポートの有無を見分ける一つの目安として、
Ｗｏｒｄのメニューの[ファイル]⇒[ブラウザでプレビュー]で確認してみてください。
その際、効果がうまく表示されないか、おかしな具合になっていれば、
それは、Ｗｏｒｄだけの機能で、
現時点でまだＨＴＭＬの書式で標準でサポートされていない機能だと判断して差し支えないでしょう。
ただし中には、ＪａｖａＳｃｒｉｐｔやＣＳＳスタイルなどのプログラムを使用して可能にできるものもあります。
詳細は、関係書籍などで、確認してください。
●個別の範囲指定によるフォントの設定
図：１のような任意の文章がWebページ作成画面上にある場合。
仮に１行目”コンピュータと情報教育のためのHelpfulnotes”と表記された部分の
フォントの書体・サイズ・色・スタイルなどを任意に変えてみます。
※これは、”第４回 背景色とタイトル文字の作成 ”の中で行った
画像化によるタイトル文字の作成をしない場合の
――ワードアートとは別の手段にもなります。
（図：１）
①変更する文字の範囲指定のためにマウスでドラッグ(図：２）してアクティブにします。
（図：２）
②Wordのメニューの[書式]⇒[フォント]を選択し、Ｃｌｉｃｋします。
 （図：３）
③フォント設定のダイアローグが表示されたら、以下のように変更してみます。
日本語のフォント： （ＭＳ ゴシック）⇒ＭＳ Ｐ明朝
スタイル： （標準）⇒斜体
サイズ： （１０ｐｔ）⇒３６ｐｔ
フォントの色： （黒）⇒緑色系 。
（図：４）
上記の設定変更が以下（図５）のようになります。設定の仕方で、
充分タイトルの代わりにもなります。
 （図：５）
●見出しフォント
これは上記（●個別の範囲指定によるフォントの設定
）の直接版だといえます。
(図：６)のように、ツール・バーの[標準]のプルダウンメニューから、
見出しに使用できるような見出しフォントの選定を行います。任意Clickします 。
ただちに、アクティブになっている箇所が見出しとして使用できるサイズに変更されます。
 （図：６）
図：７は見出しで変更された箇所を、
さらに”ＭＳ ゴシック”から”ＭＳ 明朝”へと書体を変え、太字に。
加えて任意の色に変えようとしているサンプルです。
 （図：７）
以下（図：８）は、見出しフォントで変更し強調した箇所のサンプルです。
 （図：８）
●段落（行間・インデント・位置）
行間は、デフォルトで設定されています（＝スタイル設定の初期の段階で変更はできます。）。
ただし、デフォルトのままでは、行間が少し空けすぎのような気がします（※あくまでも筆者の印象）。
また作成の流れで、デザイン上などの想定外の理由で、
後で”行間”を余儀なく変更する場合もあります。 そんな場合に合わせて、以下に紹介します。
 （図：９）
上記（図：９）のような本文が対象のとき、行間を詰める場合は以下のようになります。
①Wordのメニュー[書式]⇒[段落]を選択します。
 （図：１０）
②上記（図：１０）で、[段落]を実行すると、ダイアローグが開きます（図：１１）。
ダイアローグ内の[行間]は「最小値」を選択し、[間隔]には[0pt]を入力します 。
 |
⇒
|
[間隔]に 0 ｐｔを入力。
|
（図：１１
）
②行間だけでなく、左右のマージンをとって見栄えを良くするため、
インデントに数値を入力します。（以下図：１２）。行間・間隔・インデント等に入力すると、下欄のサンプルにそのイメージが表示されます。これを目安にバランスをとります。
※Ｗｅｂページ作成上では、行間が即座に詰まりますが。メニューの[ファイル]⇒[Ｗｅｂのプレビュー]でチェックした場合は、[行間]の変化は確認できないようです（調査中）。但しHTML保存したファイルで確認すると、ちゃんと行間が詰まっていることが確認できます。
（図：１２
）
③行間やインデントで調整したサンプル表示が以下の図：１３です。
（図：１３
）
●文字の位置
以下図：１４のように、赤囲みした部分で、文字の位置合わせを行うことができます。
サンプルは、「真ん中」で合わせた例です。
（図：１４
）
|
