モックン☆彡の部屋

モックン☆彡の部屋

文字背景(色)と(境界)線

文字背景(色)と(境界)線


文字背景(色)

文字に背景色を付けるのには『 style="background-color: ;" 』を使います。

には『 #FFFF00 』や『 yellow 』などが入りますが、詳しくは下のページを参照して下さい。

Web Safe Color Web Safe Color以外の色1
Web Safe Color以外の色2 Web Safe Color以外の色3

ではさっそく実際に使ってみましょう♪  ε=ε=ε=(ノ^∇^)ノ


《例題1》
< FONT style="background-color: blue ;" > モックン☆彡の部屋 </ FONT >



モックン☆彡の部屋

どうですか、意外に簡単でしょう?  φ(..)カキカキ

この書き方は、文字の好きな部分に背景色を付ける事ができます。

少し色気をつけてあげると下のような感じですかね。


《例題2》
< FONT style="background-color: blue ;color: orange ;" >
< B > モックン☆彡 </ B > </ FONT > の部屋



モックン☆彡 の部屋

今度は文字の色がオレンジになっていますね。

やり方は、上の例題のように『 color: ; 』を追加するだけです。

< B ></ B > は挟んだ文字を太くする役割があります。

詳しくは、『 文字の装飾とカーソル 』を参考にして下さい。


《例題3》
実際に書くもの
結果

< P style="background-color: blue ;" >
モックン☆彡の部屋へようこそ! < BR >
楽天流のHTML講座なので、 < BR >
通常使わないような説明もあります。

</ P >

モックン☆彡の部屋へようこそ!
楽天流のHTML講座なので、
通常使わないような説明もあります。


《例題1》 では特定の文字へ背景色をつけるために < FONT > タグで挟みましたが、

背景色を
行単位
で変える場合は < P > タグで

挟み、 < FONT > タグを使うと右のようになります。
モックン☆彡の部屋へようこそ!
楽天流のHTML講座なので、
通常使わないような説明もあります。
また、 < BR > タグは文字などを改行させる役割があります。

次は書いた文字に画像の背景をつけてみましょう。


《例題4》
実際に書くもの
結果

< P style="background-image:
url( 画像のアドレス );"
>

モックン☆彡の部屋へようこそ! < BR >
楽天流のHTML講座なので、 < BR >
通常使わないような説明もあります。 < BR >
お見苦しい所などあると思いますが、 < BR >
よろしくお付き合い下さい。

</ P >

モックン☆彡の部屋へようこそ!
楽天流のHTML講座なので、
通常使わないような説明もあります。
お見苦しい所などあると思いますが、
よろしくお付き合い下さい。

[注意] 画像のアドレス
    『
http://plaza.rakuten.co.jp/img/user/87/20/1128720/117.jpg 』を使っています。


背景に画像を付ける場合は、『 background-image:url( 画像のアドレス );" 』を使います。

画像のアドレス
については、『 画像を表示する 』を参考にして下さい。

よくありがちな罠なのですが、『 ( 』や『 ) 』は必ず必要なので、

例題のタグをコピーして貼り付ける方法をオススメします。

ちなみに、 < FONT > タグを使うと

右のようになり、文字を書いた部分だけ

背景が付くようになります。
モックン☆彡の部屋へようこそ!
楽天流のHTML講座なので、
通常使わないような説明もあります。
お見苦しい所などあると思いますが、
よろしくお付き合い下さい。


[注意]
 画像を背景にして日記を書く場合は、 < A href="http://" ></ A > をどこかに追加して下さい。

 記入し忘れると、文字の羅列が表示される場合があります。


(境界)線

単純に境界線を表示させるには < HR > というタグを使います。


結果は上のような線ができ、これは改行をする < BR > タグなどと同じで、

</ HR > というような終わりを示すタグは無く、単独で効果を発揮します。

線の長さは指定しない限り画面一杯に広がり、指定した場合は標準で中央に表示されます。


《例題5》
< HR >

< HR width="100" >

< HR width="100" align=" left " >

< HR width="100" align=" center " >

< HR width="100" align=" right " >


上の 点線 で囲った部分を画面とすると、何も指定しない場合は

線が画面一杯に広がっていますよね。

また、長さを指定するには『 width=" 数字 " 』を使い、 数字 が大きいほど線が長くなります。

線の場所を指定するには『 align=" left or center or right " 』を使います。

長さを指定した場合は、『 align=" center " 』と書いても書かなくても

《例題5》 の通り、結果は同じです。

最後に線へ をつけてみましょう!


《例題6》 その1
< HR color=" red " >


color="" 』へ を指定して入れるだけですね。めちゃくちゃ簡単です。


《例題6》 その2
< HR style="border-style: solid ;border-color: red ;" >


border-style: solid 』は線の種類を表し、
1本線
である事を意味します。

線の種類については、『 ((o(^-^)o))わくワク枠1 』を参照して下さい。

色に関係するのは、『 border-color: ; 』だけなのですが、

上の『 border-style: solid ; 』が無いと正しく表示されません。

線にはいくつもの種類があって、形を指定しないと色を付けれないのです。


今回は文字の背景(色)と(境界)線について書いてきましたが、

(境界)線はまだ様々なバリエーション(種類)があります

興味のある方は右下のボタンからどうぞ。

ちなみに、境界線に色を付ける場合は、 《例題6》 その1 のタグでも大丈夫ですが、

今後の事を考えると、 《例題6》 その2 が役に立つかも!?











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