文字や文章の編集

「楽天広場」ですぐ使える
 超初心者向けタグ講座

1.　文字や文章の編集
● 改行する 　<br>
● 文字を太くする 　<b>
● 文字の色の変える 　<font>
● 文字の大きさを変える 　<font>
● 下線を引く 　<u>
● 取り消し線を引く 　<s>
● 文字を中央に寄せる 　<center>
new01.gif
● 背景色付き文字 　<font style>

トップページに戻る

それでは実際にタグを使ってページの編集をしてみましょう。
□■□ 　改行　 □■□
タグを使って 　[ 改行 ]　 してみましょう。
使用タグ＝ <br>
■　編集画面 ■　ホームページの表示
ようこそ <br> 私のホームページへ ようこそ
私のホームページへ
<br>を貼り付けた所で改行されます。
■　編集画面 ■　ホームページの表示
ようこそ <br><br> 私のホームページへ。 ようこそ

私のホームページへ。
<br><br>と2つで2段、<br><br><br>で3段改行されます。

 文字や文章の編集トップに戻る
□■□ 　太字　 □■□
タグを使って 　[ 太字 ]　 にしてみましょう。
使用タグ＝ <b> ～ </b>
■　編集画面 ■　ホームページの表示
<b> ようこそ私のホームページへ。 </b> ようこそ私のホームページへ。
<b>～</b>で挟んだ部分を太字にします。
■　編集画面 ■　ホームページの表示
ようこそ <b> 私のホームページ </b> へ。 ようこそ 私のホームページ へ。
部分的に太字にする場合は太字にしたい範囲を<b>～</b>で囲みます。

 文字や文章の編集トップに戻る
□■□ 　文字色の変更　 □■□
タグを使って 　[ 文字の色 ]　 を変更してみましょう。
使用タグ＝ <font color=○○> ～ </font>
■　編集画面 ■　ホームページの表示
<font color= blue > ようこそ私のホームページへ。 </font> ようこそ私のホームページへ。
<font color=○○>～</font>で挟んだ部分の色を変更します。
○○の部分は色の名前を指定して自由に変更できます。
■　編集画面 ■　ホームページの表示
ようこそ <font color= fuchsia > 私のホームページ </font> へ。 ようこそ 私のホームページ へ。
部分的に色を変更する場合は変更する範囲をタグで囲みます。
指定する色の名前は、下を参照してください。
□ black ■ gray ■ silver ■ white ■ red ■ yellow ■ lime ■ aqua ■ blue ■ fuchsia ■ maroon ■ olive ■ green ■ teal ■ navy ■ purple
更に詳細に色を指定するには
こちらの「色見本」 をご覧ください。

文字や文章の編集トップに戻る
□■□ 　文字サイズの変更　 □■□
タグを使って 　[ 文字の大きさ ]　 を変更してみましょう。
使用タグ＝ <font size=○> ～ </font>
■　編集画面 ■　ホームページの表示
<font size= 5 > ようこそ私のホームページへ。 </font> ようこそ私のホームページへ。
<font size=○>～</font>で挟んだ部分の文字サイズを変更します。
○の部分は１～７の範囲でサイズを指定して変更できます。
■　編集画面 ■　ホームページの表示
ようこそ <font size= 2 > 私のホームページ </font> へ。 ようこそ 私のホームページ へ。
部分的にサイズを変更する場合は、変更する範囲をタグで囲みます。
指定する文字のサイズは、下を参照してください。
<font size=7> あ <font size=6> あ <font size=5> あ <font size=4> あ <font size=3> あ <font size=2> あ <font size=1> あ

★ ポイント ★
　ここで説明した<font color=○○>と<font size=○>は、実は同じ　<font>　というタグに、
color=　size=　という 「属性」 と、色名や数字の 「属性値」 が組み合わされて出来ています
このように同じタグで、複数の属性を指定する場合は、半角スペースで属性同士を区切ることによって1つのタグにまとめて記述することが出来ます。
（例）
　文字サイズ5で赤を指定 <font size=5 color=red>おはよう</font>　 おはよう
　文字サイズ2で青を指定 <font size=2 color=blue>おはよう</font>　 おはよう
□　この属性と属性値は、文字の装飾では<font>で使うのみですが、後の画像の貼り付けや、 テーブルを使う等の説明で必要ですので、しっかり覚えておいてくださいね。
文字や文章の編集トップに戻る
□■□ 　下線を引く　 □■□
タグを使って 　[ 下線 ]　 を引いてみましょう。
使用タグ＝ <u> ～ </u>
■　編集画面 ■　ホームページの表示
<u> ようこそ私のホームページへ。 </u> ようこそ私のホームページへ。
<u>～</u>で挟んだ部分に下線を引きます。
■　編集画面 ■　ホームページの表示
ようこそ <u> 私のホームページ </u> へ。 ようこそ 私のホームページ へ。
部分的に下線を引く場合は、下線を引く範囲をタグで囲みます。

 文字や文章の編集トップに戻る
□■□ 　取り消し線　 □■□
タグを使って 　[ 取り消し線 ]　 を引いてみましょう。
使用タグ＝ <s> ～ </s>
■　編集画面 ■　ホームページの表示
<s> ようこそ私のホームページへ。 </s> ようこそ私のホームページへ。
<s>～</s>で挟んだ部分に取り消し線を引きます。
■　編集画面 ■　ホームページの表示
ようこそ <s> 私のホームページ </s> へ。 ようこそ 私のホームページ へ。
部分的に取り消し線を引く場合は、取り消し線を引く範囲をタグで囲みます。

 文字や文章の編集トップに戻る
□■□ 　中央寄せ　 □■□
タグを使って 　[ 中央寄せ ]　 してみましょう。
使用タグ＝ <center> ～ </center>
■　編集画面 ■　ホームページの表示
<center> ようこそ私のホームページへ。 </center>
ようこそ私のホームページへ。
<center>～</center>で挟んだ部分が中央寄せされます。
■　編集画面 ■　ホームページの表示
ようこそ <center> 私のホームページ </center> へ。 ようこそ
私のホームページ
へ。
(注） <center>タグは、 改行を伴う ので部分的に使用すると上のようにレイアウトが崩れてしまうので注意しましょう。

 文字や文章の編集トップに戻る
□■□ 　背景色付きの文字　 □■□
タグを使って 　[ 背景色付きの文字 ]　 を表示しましょう。
使用タグ＝ <font> ～ </font>
■　編集画面 ■　ホームページの表示
<font style=background-color: blue ;color: red >
ようこそ私のホームページへ。
</font> 		ようこそ私のホームページへ。
背景色と文字色を同時に指定します。
<font> タグに、属性「style=」属性値「background-color:○○」で背景色　「color:○○」で文字色をそれぞれ指定します
他のタグと違い「：」「；」を使用します、編集画面の例をよく見て位置をまちがえ無いようにしましょう。
■　編集画面 ■　ホームページの表示
ようこそ
<font style=background-color: blue ;color: red >
私のホームページ
</font>
へ。 		ようこそ 私のホームページ へ。
部分的にタグを反映させるには、反映させたい部分をタグで囲みます。

■　編集画面 ■　ホームページの表示
<font style=background-color:blue;color:red size=2 >
ようこそ私のホームページへ。
</font> 		ようこそ私のホームページへ。
長すぎて分かりづらいかもしれませんが 「style=」 が属性で 「background-color:blue;color:red」 の部分が属性値です。
同じ<font>タグなので、もちろん属性 「size=」 も同時に指定できます。

 文字や文章の編集トップに戻る

★ ポイント ★
ページを実際に作る上で必要な「タグ同士の関係」について簡単に説明します。
タグ同士の関係
左図のようなhtml文書があるとします タグ同士の関係は次のような関係になっています
赤線の部分が全体の文字色とサイズの指定
青線の部分が範囲を限定した文字色とサイズの指定
桃色の部分がこの範囲を中央寄せ
 このように、
開始タグ<○○>～終了タグ</○○>
は他の
開始タグ<○○>～終了タグ</○○>
の 完全に内側か、完全に外側 のどちらか でなくてはなりません



BACK
TOP
NEXT

© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: