ホームページの作成(ホームページビルダー6)
前へ 目次へ 次へ

 6.文字の装飾等(タグと属性)


(1) 文字の装飾(太字や斜体など)を設定する。

@設定したい部分を範囲指定する。
 
Aメニューから[書式(O)] → [文字装飾(M)]を選択すると、さらにサブメニュー(左図)が表示されるので、この中から必要な装飾を選択する。
 
 メニューの文字の左側にアイコンが表示されているものは、同じアイコンをメニューバーの下から選択してもよい。
 アイコンがなければ、メニューから[表示(V)] → [ツールバー(T)]を選択し、サブメニューの[書式(F)]にチェックを入れる。

 

(2) 文字のフォント、サイズや色を設定する。

@設定したい部分を範囲指定する。
 
Aメニューから[書式(O)] → [フォント(E)]を選択すると右図のようなダイアログが開く。
 ここで、(a)文字のサイズ、(b)文字の色、(c)文字の書体(フォント)の設定ができる。
 
 
(a)文字のサイズ  ポイント単位ではなく、次の数字で指定する。
 1 〜 7 : 数字が大きくなると文字も大きくなる。
 -2 〜 +0 〜 +4 : 現在の文字サイズからの相対で表す。
(b)文字の色  グレーのボタンをクリックすると色の表(右図)が開くので、この中から選択する。
 この表にない色は[その他]をクリックすることですべての色が利用できる。
 グレーのボタンの右に #rrggbb の形式で色を入力することもできる。(色の指定
(c)文字の書体  コンピュータで利用できる書体のすべてが利用できる。ただし、指定した書体がページを見る側のコンピュータにない場合は、正しく表示されないので注意が必要である。

 

(3) 文字の配置を設定する。

 文字の配置は段落ごとに設定する。つまり、<P>〜</P>ではさまれた単位に設定される。ホームページビルダーでは薄いピンクの四角で囲まれた範囲である。

@設定したい段落にカーソルを移動する。
 
Aメニューから[書式(O)] → [位置揃え(A)]を選択する。
  位置揃えには、左揃え(L)、中央揃え(E)、右揃え(R)がある。
  位置揃え設定後、同じ設定を選択すると解除される。

 

 書式の解除
 ここで設定した書式を解除するには、メニューから[書式(O)] → [書式解除(R)]を選択する。

 

 タグと属性のダイアログ

 ホームページビルダーでは、必要なタグは自動的に挿入される。また、タグの属性(色や大きさなど)についてもダイアログ(ウィンドウ)が開き、その中で設定できる。
 カーソル位置の有効なタグについてその属性を設定するには、ウインドウ右上の部分(左図、「属性の変更ボタン」と呼ぶことにする)をクリックして選択すると設定用のダイアログが表示される。左図の場合、有効なタグのひとつとして H1 が表示されている。ここをクリックするとほかのタグがあればそのタグもリストで表示される。
 

 


 トップページを次のように編集してみよう。

 編集後のHTMLソースは次のようになる。(改行位置などは違う場合がある。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>最初のページ</TITLE>
</HEAD>
<BODY>
<H1 align="center">ようこそ 最初のページです</H1>
<P><B>初めて</B><I>作る</I><U>最初の</U>ホームページです。<BR>
<FONT size="1">基本的な</FONT><FONT size="2">タグ</FONT><FONT size="3">だけで</FONT>
<FONT size="4">作成</FONT><FONT size="5">して</FONT><FONT size="6">います。</FONT><BR>
<IMG src="fig/Sharjah.png" width="305" height="164" border="0" hspace="10" vspace="10">
次にイメージを貼り付けます。<BR>
<FONT color="#ff0000">次の</FONT><FONT color="#00ff00">行は</FONT>この位置にきます。</P>
<P><A href="file:hpage2.html">次のページへ</A></P>
</BODY>
</HTML>


前へ 目次へ 次へ
 ホームページの作成(ホームページビルダー6) Copyright © 2002 Hiroshi Masuda

 

 

inserted by FC2 system