モックン☆彡の部屋

文字背景（色）と（境界）線

文字背景（色）と（境界）線

● 文字背景（色）

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

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

Web Safe Color	Web Safe Color以外の色１
Web Safe Color以外の色２	Web Safe Color以外の色３

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

《例題１》

 モックン☆彡の部屋 

↓

モックン☆彡の部屋

どうですか、意外に簡単でしょう？　 φ（．．）カキカキ

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

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

《例題２》


 モックン☆彡   の部屋

↓

モックン☆彡 の部屋

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

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

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

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

《例題３》

実際に書くもの

｜

結果


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


→

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

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

背景色を

行単位

で変える場合は  タグで

挟み、  タグを使うと右のようになります。

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

また、   タグは文字などを改行させる役割があります。

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

《例題４》

実際に書くもの

｜

結果

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


→

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

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

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

画像のアドレス

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

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

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

ちなみに、  タグを使うと

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

背景が付くようになります。

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

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

● （境界）線

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

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

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

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

《例題５》

< 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 " 』と書いても書かなくても

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

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

《例題６》 その１

< HR color=" red " >

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

《例題６》 その２

< HR style="border-style: solid ;border-color: red ;" >

『 border-style: solid 』は線の種類を表し、

１本線

である事を意味します。

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

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

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

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

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

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

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

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

今後の事を考えると、 《例題６》 その２が役に立つかも！？

((o(^-^)o))わくワク枠１へ

ジャンル別一覧