2014年04月09日

文字装飾

文字装飾

「Word」や「マイワード」などのワープロソフトを使ったことのある人はご存知でしょうが、ワープロには「文字装飾」という機能があります。文字の線を太くしたり、色を付けたりする機能です。
それと同じように、ブラウザ上に表示される文字を装飾するタグがあります。

見出しとは別に、本文の中で特に協調したい部分は、太字・斜体・下線などの文字装飾のタグを その部分に付けます。
ただし、あまり多用すると うるさくなり、見づらくなりますので、注意して下さい。

また、本来は、HTML文書にはページの構造(見出しや段落・表・など)だけを記述し、文字の装飾やページのレイアウトなどは スタイルシート(CSS)に記述するよう推奨されているため、ここでは最小限の説明にとどめます。

■太字

太字タグは、タグで囲まれた部分の文字を太字にして表示します。
太字タグは、見出しタグと違って、改行されません。文字のまとまりではなく、単なる装飾の目的で使われるためです。

<b> ここから太字
</b> ここまで太字

というふうに指定します。

<b>の b は、boldFaceTypeの B です。略して「ボールド」と呼ばれます。ワープロなんかでも指定のメニューがありますね。

■HTMLタグの入力支援メニュー 

太字タグは、メニューの「文字装飾」のサブメニューの中にあります。
ここでEnterKeyを押すと、太字タグが、指定した場所に挿入されます。
太字にしたい文字を範囲選択してから実行すると、文字の前後にタグが挿入されます。

■文字サイズ・文字色

太字タグの他に、文字のサイズや色を変えて、その部分の文字列だけ強調して表示させることも出来ます。

また、そのページの全ての文字のサイズや色を指定することも出来ますが、あまりおすすめ出来ません。

ホームページを閲覧する人は、様々な環境で閲覧しています。ディスプレイの大きさも、ブラウザの種類・表示設定も人それぞれです。
ページ全体の文字サイズを指定すると、環境によっては、ページのレイアウトが崩れて、非情に読みづらくなる可能性があります。

そこで、ここでは 基本的な文字のサイズと色に関しては、ブラウザの設定に任せて、その中で強調したい部分だけ、文字サイズと色を変更する方法を説明することにします。

■文字サイズ 

文字サイズを指定するには、次のようにします。

<p>
太字タグの他に、

<font size="+1">
文字のサイズや色を変えて、
</font>

その部分の文字列だけ強調して表示させることが出来ます。
</p>

<font size="+1"> ここから フォントサイズを一段階大きく 
</font> ここまで フォントサイズを一段階大きく 

※終了タグ </font> には、サイズなどの指定を記述する必要はありません。

■HTMLタグの入力支援メニューの操作

メニューの中の「文字装飾」にカーソルを合わせて、右矢印キーでサブメニューを開きます。

上下矢印キーで「フォントのサイズ」を選んで、右矢印キーでサブメニューを開きます。

上矢印キーで、サイズをどのくらい大きくするか、または小さくするかを選んでEnterキーを押します。
カーソル位置にタグが挿入されます。

※指定したい部分の文字を範囲選択してから実行すると、選択した文字の前後にタグが挿入されます。

指定することの出来るサイズは、プラス つまり大きくするのが3段階、マイナス つまり小さくするのが3段階、合わせて6段階あります。

相対サイズ +3 基準サイズより3段階大きい 
相対サイズ +2 基準サイズより2段階大きい 
 …… 
相対サイズ −3 基準サイズより3段階小さい 

■文字色

ワープロなどでも、協調したい部分を赤い文字にしたりしますが、HTML文書でも、この文字色の指定が出来ます。

例:

<p>
HTML文書でも、この

<font color="#ff0000">
文字色の指定(赤)
</font>

が出来ます。
</p>

<font color="#ff0000"> 文字色タグ ここから 
</font> 文字色タグ ここまで 

" と " の間の #ff0000 が色名です。

■タグの挿入の仕方 

HTMLタグの入力支援のメニューには、直接この<font color="#ff0000">を入力する項目がありません。
コピー&ペーストで挿入するか、または 次の方法で挿入して下さい。

まず、フォントサイズのタグ(大きさの指定は何でもよい)を挿入します。

<font size="+3">
 (指定したい文字) 
</font>

次に、サイズの部分 size="+3" を削除します。font と size の間の半角スペースは削除しないで残しておいて下さい。

カーソルを > の上に置きます。

「文字装飾」のサブメニューから、「色の値」を選んでEnterキーを押します。

ダイアログボックスが開いたら、矢印キーで色を選択して、Tabキーを押します。

「16進数で挿入」にチェックをつけて、Tabキーを押します。

「属性の名前」のラジオボタンで COLOR =を選択します。

Tabキーで「OK」のボタンに移動してEnterキーを押します。

カーソル位置に色名 color="#ff0000" が挿入されます。

<font color="#ff0000">
 (指定したい文字) 
</font>

■指定できる色

ホームページでは、どんな色を指定してもいいわけではありません。基本16色と、セーフカラーと呼ばれる色の中から指定するよう推奨されています。パソコンやブラウザの種類・バージョンによっては、表示されない色があるためです。
MyEditのHTMLタグの入力支援メニューでは、上記の基本16色が あらかじめ設定されています。
この基本16色とセーフカラーについては、ここでは説明を省略します。ネットで検索して、詳しい説明をお読み下さい。

例:

基本色16色見本
http://pega.littlestar.jp/tagunooheya/color-1.html

代表的な色見本
http://pega.littlestar.jp/tagunooheya/color-2.html
posted by yanikun at 06:33| Comment(0) | 日記