フォントスタイルについて

はじめに

書式設定ツールバー の一番左側にある、「フォントスタイル」について紹介します。

HTML（HyperText Markup Language）タグは本当にたくさんの種類があります。その中でWordでもスタイル設定できるものを紹介します。

「見出し１」～「見出し６」

これはWord文書作成と同じです。HTMLタグ記述では、ただ単にフォントのサイズが変わるだけです。
しかし、大きさを変えるためのモノではありません。あくまでも「この段落は見出しを定義しますよ」という意味です。

Address

ページに署名をするためのタグ、<ADDRESS> </ADDRESS>でくくられます。
ただイタリック体にするためのものではなく、ここに署名があるとページの著者が宣言するためのタグとして使われています。

Blockquote

文章を引用するためのタグ、<BLOCKQUOTE> </BLOCKQUOTE>でくくられます。
左右のインデントが通常よりも大きくなります。つまり左右の隙間が空く、というわけですね。

CITE

文書に意味を持たせるためのタグの一種、<CITE> </CITE>でくくられます。
このタグは引用を意味し、一般的なブラウザではイタリック体で表現されます。
しかし、装飾の種類を直接指定しているわけではないので、ブラウザによって異なりますが(^_^;)

CODE

これも文書に意味を持たせるためのタグの一種で、<CODE> </CODE>でくくられます。
このタグはプログラムコードを意味し、一般的なブラウザでは等間隔に文字列が配置されます。

Comment

コメントをつけるためのタグ、<!--コメント内容-->でくくられます。
すると、ブラウザ画面上では一切表示されません。しかしソース編集するときにコメントをつけておくと注意事項などを書きこむことができるので役に立ちますよ！使い方は、コメント内容部分を範囲指定してCommentを選択すればOKです！

Definition

文書に意味を持たせるためのタグのひとつで、<DFN> </DFN>でくくられます。
これは、定義を意味し、一般的なブラウザではイタリック体で表現されます。

Definition List

箇条書きの説明文を定義するためのタグ、<DL><DD>文字列</DD></DL>でくくられます。
Definition Listを設定すると、インデントが右よりになります。
通常次のDefinition Termと組み合わせて使います。

Definition Term

箇条書きのタグで用語定義するためのタグ、<DL><DT>文字列</DT></DL>が使われます。
ちなみに、Definition ListとDefinition Termの組み合わせによって次のように表示されます。

おすすめその①（Definition Termを使用）

とても役に立つサイトです。要チェック！（Definition Listを使用）

おすすめその②（Definition Termを使用）

とても面白いサイトです。十分楽しめます(^^) （Definition Listを使用）

ソースをのぞいてみると…

―――――――――――――――――――――――――――――――――――――

<DL>
<DT>おすすめその①（Definition Termを使用）</DT>
<DD>とても役に立つサイトです。要チェック！（Definition Listを使用）</DD>
<DT>おすすめその②（Definition Termを使用）</DT>
<DD>とても面白いサイトです。十分楽しめます(^^) （Definition Listを使用）</DD>
</DL>

―――――――――――――――――――――――――――――――――――――

※まず、行頭にDefinition Termを設定しておき、入力後、普通にEnterキーを押すと、
　自動的にDefinition TermとDefinition Listの切り替えをしてくれます。便利ですね。

「H1」～「H6」

HTML Markup

手動でハイパーリンクを設定するために使われるものです。
メニューバーから[ツール]→[オートコレクト]において、[入力オートフォーマット]タグ内に《インターネットとネットワークのアドレスをハイパーリンクに変更する》の項目にチェックボックスがオフになっている場合に有効となります。
インターネットアドレスなどを入力し、その文字列を範囲選択した後、書式設定ツールバーの左端にあるフォントスタイル設定リストの中からHTML Markupを選択すると設定可能となります。
―――――――――――――――――――――――――――――――――――――――
まず、Webページ作成モードでタグの記述をします。（ソース表示画面ではないよ！）
<A HREF="http://village.infoweb.ne.jp/~wanichan/">クリックしてね</A>
そのあと、タグの記述部分を範囲選択して、HTML Markupを選択して上書き保存します。
すると「あれ～？　隠れちゃった」と思われるかも知れませんが、ちゃんと設定されているので、
ブラウザで確認してみてください。
↓以下のようになるはずです。
クリックしてね
―――――――――――――――――――――――――――――――――――――――

Keyboard

文書に意味を持たせるためのタグのひとつで、<KBD> </KBD>でくくられます。
これは、キーボード入力を意味し、一般的なブラウザではその文字列が等間隔に表示されます。
すると、このようになります。

Sample

文書に意味を持たせるためのタグの一種で、<SAMP> </SAMP>でくくられます。
これはサンプルを意味し、一般的なブラウザではその文字列が等間隔に表示されます。
すると、このようになります。

Variable

文書に意味を持たせるためのタグの一種で、<VAR> </VAR>でくくられます。
これは、変数を意味し、一般的なブラウザではイタリック体で表示されます。
すると、このようになります。

ハイパーリンク

ホームページアドレス等を直接入力後、範囲選択して「ハイパーリンク」を選択すると設定されます。この場合も、オートコレクトで入力オートフォーマットにおいて、自動的にハイパーリンクに変更されないように設定している場合のみに有効ですね。

強調斜体

文字列をイタリックにするためのタグ、<EM> </EM>でくくられます。
設定しておくと、このようになります。

強調文字

さらに強調させるためのタグ、<STRONG> </STRONG>でくくられます。
すると、このようになります。

その他の箇条書きスタイルについて

Word文書で使われる箇条書きは、Webページではタグがどのようになるか紹介します。

まず、箇条書きスタイルには、段落番号、箇条書きの2種類ありますね？

段落番号のついた箇条書きは、タグでは<OL><LI> </LI></OL>でくくられます。

1. ホームページ作成に役立つページ
   ホームページを作ってみたい方にオススメのサイトです！
2. 地域情報満載のページ
   各地域情報について詳しく載っています！
3. かわいいペットのページ
   生まれたての動物の赤ちゃんを紹介しているホームページです！

――――――――――――――――――――――――――――――――――――
<OL>
<LI>ホームページ作成に役立つページ<BR>
ホームページを作ってみたい方にオススメのサイトです！</LI>
<LI>地域情報満載のページ<BR>
各地域情報について詳しく載っています！</LI>
<LI>かわいいペットのページ<BR>
生まれたての動物の赤ちゃんを紹介しているホームページです！</LI></OL>
――――――――――――――――――――――――――――――――――――

普通の箇条書きは、<UL><LI> </LI></UL>です。

• ホームページ作成に役立つページ
  ホームページを作ってみたい方にオススメのサイトです！
• 地域情報満載のページ
  各地域情報について詳しく載っています！
• かわいいペットのページ
  生まれたての動物の赤ちゃんを紹介しているホームページです！

――――――――――――――――――――――――――――――――――――
<UL>
<LI>ホームページ作成に役立つページ<BR>
ホームページを作ってみたい方にオススメのサイトです！ </LI>
<LI>地域情報満載のページ<BR>
各地域情報について詳しく載っています！ </LI>
<LI>かわいいペットのページ<BR>
生まれたての動物の赤ちゃんを紹介しているホームページです！</LI>
</UL>
―――――――――――――――――――――――――――――――――――――

▲Page TOP

コメント

このページに関する技術的なご質問には一切お答え致しません。フリーソフトになったExpression Web 4に移行してください！

▲このページのトップへ