919476 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

モックン☆彡の部屋

モックン☆彡の部屋

((o(^-^)o))わくワク枠３

((o(^-^)o))わくワク枠３


前回は枠の幅や太さについて紹介してきましたが、今回は枠の色を変えてみましょう。

色を変えるには太さの時と同様に２つの方法があります。


●　順番に色を指定する


《例題１》
<P style="border-style:solid;border-color:red;">色が１つ</P>

色が１つ

上下左右の色の枠を指定します
<P style="border-style:solid;border-color:red lightblue;">色が２つ</P>

色が２つ

１番目の色は上下、２番目の色は左右の線の色を指定します
<P style="border-style:solid;border-color:red lightblue yellow;">色が３つ</P>

色が３つ

１番目の色は上、２番目の色は左右、３番目の色は下の線の色を指定します
<P style="border-style:solid;border-color:red blue yellow salmon;">色が４つ</P>

色が４つ

１番目の色は上、２番目の色は右、３番目の色は下、４番目の色は左の線の色を指定します

ここ以降の例題も分かりやすくするために線を太くしてますが、

『border-color:』の後は次のようになります。

色を１つ指定した場合…[上下左右]がその色になります。
色を２つ指定した場合…書いた順に[上下][左右]の色になります。
色を３つ指定した場合…書いた順に[上][左右][下]の色になります。
色を４つ指定した場合…書いた順に[上][右][下][左]の色になります。（時計回り）
[注意]：色と色の間は例題のように半角スペースを空けて下さい。

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

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

以上のように、『border-color:』の後に色を記入すると

記入した数によって各辺の色を指定できますが、特定の辺の色のみ指定する事もできます。


●　特定の場所に色を指定する


《例題２》
<P style="border-style:solid;border-top-color:lightblue;">上</P>

上

枠線上側の線の色を指定します
<P style="border-style:solid;border-right-color:red;">右</P>

右

枠線右側の線の色を指定します
<P style="border-style:solid;border-bottom-color:gold;">下</P>

下

枠線下側の線の色を指定します
<P style="border-style:solid;border-left-color:pink;">左</P>

左

枠線左側の線の色を指定します

例題では分かりやすくするために線の太さを変えています。

説明は《例題２》の通りですが、それぞれを組み合わせる事もできます。

書き方は下のようになりますので、参考にして下さい。


《例題３》
<P style="border-style:solid;border-top-color:lightblue;border-right-color:red;">上右</P>

上右

<P style="border-style:solid;border-bottom-color:gold;border-left-color:pink;">下左</P>

下左


上では２つずつ組み合わせていますが、３つ、４つの組み合わせもできます。

もちろん、４つ組み合わせた時は１周しますので《例題１》の４番目の方法でも書けますね。

以上、３ページに渡って枠について説明してきましたが、

『文字背景（色）と（境界）線』を組み合わせると下のような装飾もできますので、参考にして下さい。

何度も注意をしていますが、『(』や『"』などは必ず必要ですので、
間違わないためにも例題のタグをコピーして使うことをオススメします。
また、日記の背景に画像を使う場合は、先頭または最後へ
『<A href="http://"></A>』を追加して下さい。



《お手本１》　　　：ページ用タグ、　　：日記用タグ、　　：コメント
<P style="background-image:url(画像アドレス);border-style:groove;width:400px;height:150px;border-color:yellow blue red green;border-width:10px">
<MARQUEE direction="up" scrollamount="2" height="150">
<CENTER>
適当な文章１<BR><BR>
適当な文章２<BR><BR>
適当な文章３<BR><BR>
</CENTER></MARQUEE></P>
<A href="http://"></A><P style="background-image:url(画像アドレス);border-style:groove;width:400px;height:150px;border-color:yellow blue red green;border-width:10px"><MARQUEE direction="up" scrollamount="2" height="150"><CENTER>適当な文章１

適当な文章２

適当な文章３
</CENTER></MARQUEE></P>

モックン☆彡の部屋へようこそ！

楽天流のＨＴＭＬ講座なので、

通常使わないような説明もあります。

お見苦しい所などあると思いますが、

よろしくお付き合い下さい。

文字を動かす早さや方向は『文字を動かしてみる？（低）』を参照してください。
『width:400px;』は横幅を表し、『height:150px;』は縦幅を表します。
また、<CENTER>タグは文字を中央に表示します。



《お手本２》　　　：ページ用タグ、　　：日記用タグ、　　：コメント
<P style="background-image:url(画像アドレス);border-style:dashed;border-color:yellow blue red green;border-width:10px;writing-mode:tb-rl;">
<MARQUEE direction="up" scrollamount="2" width="600" height=250>
適当な文章１<BR><BR>
適当な文章２<BR><BR>
適当な文章３<BR><BR>
</MARQUEE></P>
<A href="http://"></A><P style="background-image:url(画像アドレス);border-style:dashed;border-color:yellow blue red green;border-width:10px;writing-mode:tb-rl;"><MARQUEE direction="up" scrollamount="2" width="600" height=250>適当な文章１

適当な文章２

適当な文章３
</MARQUEE></P>

モックン☆彡の部屋へようこそ！

楽天流のＨＴＭＬ講座なので、

通常使わないような説明もあります。

お見苦しい所などあると思いますが、

よろしくお付き合い下さい。

この縦書きは
Internet Explorer限定
です。
『tb-rl』はテキストを縦書きで表示させることができ、『Top to Bottom - Right to Left』という意味です。つまり文章の流れる方向を上から下に、右から左にという風に日本語や中国語などの縦書きと同じにできます。
このお手本のポイントは『width="600"』で文字の出てくる場所を指定し、『height="250"』で文字の高さを決めてあげます。横幅の調節が難しいので、日記には不向きかもしれません。





((o(^-^)o))わくワク枠２へ ((o(^-^)o))わくワク枠４へ





バズーカー発射なのだぁ ご意見・ご感想・告白メールお待ちしております ヾ(☆▽☆)/ moonlightshine@mail.goo.ne.jp メール頂戴♪



© Rakuten Group, Inc.
X