コンピュータと情報教育のためのHelpfulnotes
コンピュータと情報教育のためのHelpfulnotes
 
 
 

高校入試問題工房Manavi

 

 

 

 

 

 

 

 


第3章 レイアウトと編集(2)
■第5回 文字の入力(フォント設定・段落等)


◆すでに ”第2回 文字の設定(スタイル設定)” で、
ベースフォントの設定の仕方を紹介しました。 ここでは、
個別の範囲指定によるフォントの設定および段落等について紹介いたします。

◆文字などの入力で注意しなければいけないのは、多機能なWord上のあらゆる機能が、
そのままHTMLのWeb形式に、すべてがあてはまりサポートされているわけではないので、
その点をご注意ください。
 HTMLの書式について、自信がないような場合は、そのサポートの有無を見分ける一つの目安として、

Wordのメニューの[ファイル]⇒[ブラウザでプレビュー]で確認してみてください。
 その際、効果がうまく表示されないか、おかしな具合になっていれば、
それは、Wordだけの機能で、
現時点でまだHTMLの書式
で標準でサポートされていない機能だと判断して差し支えないでしょう。
ただし中には、JavaScriptやCSSスタイルなどのプログラムを使用して可能にできるものもあります。
詳細は、関係書籍などで、確認してください。


●個別の範囲指定によるフォントの設定

図:1のような任意の文章がWebページ作成画面上にある場合。
仮に1行目”コンピュータと情報教育のためのHelpfulnotes”と表記された部分の
フォントの書体・サイズ・色・スタイルなどを任意に変えてみます。

※これは、”第4回 背景色とタイトル文字の作成 ”の中で行った
画像化によるタイトル文字の作成をしない場合の
――ワードアートとは別の手段にもなります。

(図:1)

@変更する文字の範囲指定のためにマウスでドラッグ(図:2)してアクティブにします。

(図:2)

AWordのメニューの[書式]⇒[フォント]を選択し、Clickします。

(図:3

Bフォント設定のダイアローグが表示されたら、以下のように変更してみます。
日本語のフォント: (MS ゴシック)⇒MS P明朝
スタイル: (標準)⇒斜体
サイズ: (10pt)⇒36pt
フォントの色: (黒)⇒緑色系 。

(図:4


上記の設定変更が以下(図5)のようになります。設定の仕方で、
充分タイトルの代わりにもなります。

(図:5)


●見出しフォント

これは上記(●個別の範囲指定によるフォントの設定 )の直接版だといえます。
(図:6)のように、ツール・バーの[標準]のプルダウンメニューから、
見出しに使用できるような見出しフォントの選定を行います。任意Clickします 。
ただちに、アクティブになっている箇所が見出しとして使用できるサイズに変更されます。

(図:6)


図:7は見出しで変更された箇所を、
さらに”MS ゴシック”から”MS 明朝”へと書体を変え、太字に
加えて任意の
色に変えようとしているサンプルです。

(図:7)


以下(図:8)は、見出しフォントで変更し強調した箇所のサンプルです。

(図:8)



●段落(行間・インデント・位置

間は、デフォルトで設定されています(=スタイル設定の初期の段階で変更はできます。)。
ただし、デフォルトのままでは、行間が少し空けすぎのような気がします(※あくまでも筆者の印象)。
また作成の流れで、デザイン上などの想定外の理由で、
後で”行間”を余儀なく変更する場合もあります。 そんな場合に合わせて、以下に紹介します。

(図:9)

上記(図:9)のような本文が対象のとき、行間を詰める場合は以下のようになります。
@Wordのメニュー[書式]⇒[段落]を選択します。

(図:10

 

A上記(図:10)で、[段落]を実行すると、ダイアローグが開きます(図:11)。
ダイアローグ内の[行間]は「最小値」を選択し、[間隔]には[0pt]を入力します 。


 

[間隔]に 0 ptを入力。

(図:11

 

A行間だけでなく、左右のマージンをとって見栄えを良くするため、
インデントに数値を入力します。(以下図:12)。行間・間隔・インデント等に入力すると、下欄のサンプルにそのイメージが表示されます。これを目安にバランスをとります。

※Webページ作成上では、行間が即座に詰まりますが。メニューの[ファイル]⇒[Webのプレビュー]でチェックした場合は、[行間]の変化は確認できないようです(調査中)。但しHTML保存したファイルで確認すると、ちゃんと行間が詰まっていることが確認できます。


(図:12

 

B行間やインデントで調整したサンプル表示が以下の図:13です。

(図:13

 

●文字の位置

以下図:14のように、赤囲みした部分で、文字の位置合わせを行うことができます。
サンプルは、「真ん中」で合わせた例です。

(図:14

 

 

●マイコン/電子電気エンジニア育成教材販売
革新的な教育システムを創造する株式会社アドウィンのマイコン/電子電気エンジニア育成教材販売をHelpfulnotesで代行販売を開始しました。
●キットで遊ぼう電子回路【全10シリーズ】 および 解説CDシリーズ
●キットで学ぶ!FPGAチャレンジャー入門編
●キットで学ぶ!ARMチャレンジャー入門編
●キットで学ぶ!ARMチャレンジャー応用編

 

 




Copyright (C) 2005 Helpfulnotes. All Rights Reserved.

 

 

GIF89a!,L;