Comments
Description
Transcript
第2章 フォントの設定と改行
第２章 フォントの設定と改行 １.color.html を新規作成 ファイルメニューから新規作成 を選択します。 「color.html」と名前を付けて保 存します。ファイル名は全て半角 英数で入力します。 ２.ページタイトルをつける 既にあるタイトルタグ、<TITLE>と</TITLE>の間に「色見本と改行について」と入力 します。 ３.見出しタグの挿入 <H>∼</H> <BODY> の 次 の 行 で 一 回 ク リックし、カーソルを移動 し、「色見本」と入力しま す。 色見本という文字を選択 し（選択すると青色に反転 します）、タグ挟み込みメ ニューから「ヘッダー」を 選択します。 14 「ヘッダー」ダイアログボックスが出 ます。ここでヘッダータグ<H>の設定を ① します。 ② ③ ① <H>にはレベルが 6 つあります。 レベルは全部で 1∼6 までです。 <h1>が一番大きく、<h6>が一番小さい 見出しになります。 ③ 今回はレベルを「1」に設定します。 ② 位置を設定します。 ページ内で左寄せ・中央揃え・右寄せ が設定できます。位置を設定しないと、 左寄せになります。今回は「位置を設 定する」のチェックを外します。 ③ 「↓」ボタンをクリックすると フォントサイズ、色、背景の色など、 さらに詳細な設定ができます。 ④ 今回は設定しないのでもう一度「↑」 ボタンをクリックして閉じます。 ④レベルが 1、位置を設定するのチェックが外れていることを確認してから OK ボタン をクリックします。 色見本という文字 を囲むようにヘッ ダータグが入りま した。 15 ４.ブラウザで確認 上書き保存し、編集メニューか ら「ブラウザで表示」を選択し、 確認します。 右図のように、先ほど編集した タイトルと本文の見出しが表 示されます。確認したらブラウ ザを閉じます。 ５.改行タグを挿入する <BR> 見出しの行の後で改行したい ので</h1>の直後でクリックし てカーソルを入れます。タグ挿 入メニューから「改行」を選択 します。 改 行 タ グ <BR> が 挿 入 さ れました。 16 ６.赤字の設定 「赤色」と入力します。 「赤色」という文字を選 択し、タグ挟み込みメニ ューから「フォント」を 選択します。 「文字のサイズと色」ダ イアログボックスが表示 されます。 ①「設定する項目」で「文 字の色」にチェックがつ いていることを確認しま す。今回は書体を設定し ないので、 「フォントの種 ② 類」はチェックを外しま す。 ① ②文字色選択ボタンをク リックします。 色を選択します パレットの中から赤を選ん で OK ボタンをクリックしま す。 17 サンプルを確認して OK ボタ ンをクリックします。 上書き保存 タグが追加されます。 フォントタグのカラー属性 で、赤色を表す「#ff0000」 が指定されています。 ツールボタンで「上書き保 存」 「ブラウザで表示」して、 文字が赤色になっているこ とを確認します。 確認したらブラウザを閉じ ます。 18 ブラウザで表示 ■フォントタグ <font>∼</font> <font>と</font>で囲まれた範囲に、フォントの設定をします。 属性で、大きさ size=" (1∼7) "、色 color="#rrggbb"が指定できます。 特にフォントサイズを指定しない場合、基準のフォントサイズは 3 です。 ・サイズ属性 【表記例 1】 <font size="1">フォントサイズ 1（最小）を設定します。</font> サイズは相対値で指定（±1∼7）することもできます。 【表記例 2】 <font size="+1">基準のサイズより+1 大きくなります。</font> ・カラー属性 テキストの色を部分的に変更したいときに使います。 #の後、赤、緑、青の値をそれぞれ 00∼ff の 16 進数で表します。（光の 3 原色） 【表記例 1】 <font color="#0000ff">文字の色を青にします</font> 赤 緑 青 6 桁の数字で指定する以外にも、色名で指定することもできます。 【表記例 2】 <font size="7" color="yellow">文字サイズ 7、黄色にします。</font> ■代表的な色 赤 #ff0000 または red ピンク #ff00ff または fuchsia 青 #0000ff または blue 水色 #00ffff または aqua 緑 #008000 または green ライム #00ff00 または lime 黄 #ffff00 または yellow 紺 #000080 または navy 茶 #800000 または maroon グレー #808080 または gray 白 #ffffff または white 黒 #000000 または black 19 ７.コピーと貼り付け 赤色の指定をした行を選択し、「編集」メニューから「コピー」を選択します。 ★Ctrl＋C でも、コピー できます。 改行して次の行にカーソルを入れ、 「編集」メニューから「貼り付け」を選択します。 ★Ctrl＋V でも貼り付け できます。 貼り付けられたことを確認します。 20 ８.赤字の設定 2 カラー属性の値を「red」に、サイズ属性を追加し「1」と設定します。 フォントの属性を「COLOR="red" SIZE="1"」と書き直します。 ★属性と属性の間には 半角スペースを入れま す。 上書き保存し、ブラウザで表示します。 最初に書いた赤色の横に小さ い文字で赤色と追加されまし た。カラー属性の値が "#ff0000"でも"red"でも 同じ赤色になっています。文字 サイズも一番小さくなってい ます。確認したらブラウザを閉 じます。 ★一つ目の「赤色」の後、ソース内では改行していますが、ブラウザ上では並んで 表示されました。 （上図）ソースの中で改行しても、改行タグ<BR>を挿入しない限り ブラウザ上には反映されません。 改行 一つ目の「赤色」の行の最後に カーソルを入れ、タグ挿入メニ ューから「改行」を選択します。 21 ソースに改行タグ<BR>が挿入されました。 ★改行タグには終了タグがありません。 上書き保存し、ブラウザで 確認します。ブラウザを閉 じます。 ９.太字 <B>∼</B> 二つ目の「赤色」の後ろに タグ挿入から「改行タグ」 を入れます。 次に、タグ挟み込みメニュ ーから「太字」を選択しま す。 22 太字タグ<B></B>が挿入 されます。 開始タグと終了タグの間 に「太字にします」と入 力します。 改行や入力をするときに は、余計なスペースが入 らないように注意します。 10.斜体 <I>∼</I> </B>の すぐ後ろ にカー ソルを起き、タグ挿入メ ニューから「改行タグ」 を挿入します。 次に、タグ挟み込みメニ ューから「斜体」を選択 し、開始タグと終了タグ の間に「斜体にします」 と入力します。 11.下線 <U>∼</U> 改行タグを挿入し、タグ挟み込みメニューから「下線」を選択し、開始タグと終了 タグの間に「下線を引きます」と入力します。 23 12.等幅 <TT>∼</TT> 改行タグを挿入し、タグ挟み 込みメニューから「その他」 を選択し、その中から「等幅」 をクリックします。 <TT>と</TT>の間に「等幅フ ォントにします」と入力しま す。 13.取り消し線 <STRIKE>∼</STRIKE> 改行タグを挿入し、タグ挟み 込みメニューから「その他」 を選択し、その中から「取り 消し線」をクリックします。 <STRIKE>と</STRIKE>の間に 「取り消し線を引きます」と 入力します。 14.確認 上書き保存し、ブラウザで確認します。 HTML writer を終了します。 24