(1) 文章が改行されない
|
↓こう書いているのに
SRC=1-1.html
ブラウザで表示されると
こうじゃありませんか?
テキストエディタで改行をちゃんと入れているのに
思ったところで改行されていません。
それは何故でしょう?
それはhtml文書で改行を入れるには、
わざわざ改行命令の<br>タグを書かないといけないからです。
|
<br>:改行する。
|
それでは先ほどのソースに書き込んでみましょう!
改行したいところに<br>を書き込みます。
SRC=1-2.html
こんな感じにちゃんと改行されました。
ちなみに下のソースのものとも比べてみてください。
エディタでの改行位置がめちゃくちゃにしたものです。
SRC=1-3.html
こんな感じに同じですよね?
てなところで
html文書で改行する方法がわかって頂けたでしょうか?
つまり
|
ポイント
|
テキストエディタの改行は無意味!
|
基本的に<br>タグを書かないと改行されません。
改行されてもブラウザの右端で折り返される形になります。
た・だ・し!
|
<pre>〜</pre>:エディタのイメージまま出力
|
このタグを使った場合は違います。
試しにやってみると
SRC=1-4.html
こんな感じにエディタで打ったイメージになります。
※僕はこのタグはあまり好きではありません。
|
(2) 文字を強調したい。
|
前項までで文章を打てる様になりました。
そうなるとやっぱ文字を強調してみたりしたくなりますよね?
では文字強調の次の3つのタグについて説明します。
|
<i>〜</i>:イタリック文字
<b>〜</b>:Bold(太字)
<u>〜</u>:アンダーライン
|
使い方は簡単です。
強調したい文字or単語をこのタグで囲えばOKです。
では 1-2.html に以下の強調を足してみましょう!
(1)「今日」→イタリック文字
(2)「天気が良い」→太字
(3)「元気にがんばるぞ!」→アンダーライン
(4)「気持ち」→イタリック文字、太字、アンダーライン
答えは
(1-ans) <i>今日</i>
(2-ans) <b>天気が良い</b>
(3-ans) <u>元気にがんばるぞ!</u>
(4-ans) <i><b><u>気持ち</u></b></i>
となります。
※(4)について <i>、<b>、<u> は特に順番規則はありません。
※好きなように並べてください。
ソースは↓こんな感じになります。
SRC=1-5.html
こんな感じに表示されましたでしょうか?
閉じタグ</XXX>を忘れると酷いことになります。
これでいろんな強調が出来るようになりました。
|
ポイント
|
文を書いてから強調タグを足していきましょう!
|
文を書いちゃってから、強調したいところに
タグを書き加えていくと
閉じタグを忘れることが少ないです。
|
(3) 文字の大きさや色を変えたい。
|
文字の大きさや色を変えるには次のタグを使います。
|
<font>〜</font>:フォントの設定を行う。
size=(size):大きさを指定する。
color=(color):色を指定する。
|
(size)は1〜7または相対サイズ(±値)を指定します。
数値を指定した場合
<font size=7>7</font>---7
<font size=6>6</font>---6
<font size=5>5</font>---5
<font size=4>4</font>---4
<font size=3>3</font>---3
<font size=2>2</font>---2
<font size=1>1</font>---1
相対サイズの場合
<font size=+4>7</font>---7
<font size=+3>6</font>---6
<font size=+2>5</font>---5
<font size=+1>4</font>---4
<font size=+0>3</font>---3
<font size=-1>2</font>---2
<font size=-2>1</font>---1
※相対の場合は<basefont>で指定したサイズが基準になります。
※<basefont> タグに関しては後の章で書く予定です。
※デフォルトでは size=3 が基準になります。
※相対サイズと言えども size=7 より大きいサイズにはなりません。
(color)は全章で学んだ<body>タグの
bgcolorとかtextと同じで
カラーネームまたはRGB値を指定します。
ちなみに僕が使うのはこんな感じ。
例えば
<font color=red>red</font>---red
<font color=blue>blue</font>---blue
<font color=yellow>yellow</font>---yellow
↑こんな感じです。
では、
の所々のフォントのサイズと色を変えてみましょう!
(1)「今日」→サイズ6
(2)「天気が良い」→赤色
(3)「元気にがんばるぞ!」→サイズ2
(4)「気持ち」→サイズ5+青色
答えは
(1-ans) <font size=6>今日</font>
(2-ans) <font color=red>天気が良い</font>
(3-ans) <font size=2>元気にがんばるぞ!</font>
(4-ans) <font size=5 color=blue>気持ち</font>
こんな感じです。
ソースは↓こうなります。
SRC=1-6.html
こんな感じで表示されます。
こんなところで<font>タグの使い方をわかって頂けたでしょうか?
|
ポイント
|
サイズと色を変えるところだけを
<font>〜</font>で囲うようにしましょう!
|
必要以上に<font>〜</font>を使用すると
どこまでがどのサイズか?どの色か?
わからなくなってしまうので
必要最小限にしましょう!
特に文字の基本の色は前の章で学んだ
<body text=XXX> で指定しておきましょう!
|
ポイント
|
文字強調との組み合わせもOK!
|
例えば
<font size=7 color=red><u><i>こんな感じ</i></u></font>
こんな感じ
となります。
|