■飾り文字＆影を付ける
ＨＴＭＬのタグだけを使って、飾り文字を書いてみましょう。
まずは、普通に<font > タグを使って表示してみます。
Welcome to My グルメの館
これはこのように書いています。
< font color=red size=6 FACE="Comic Sans MS" >
Welcome to My グルメの館
: --☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:
★スタイルシートを使って、FONTに属性を持たせると、
飾り文字を色々指定する事が出来ます。
スタイルシートで、書いて見るとこのようになります。
Welcome to My グルメの館
これは↓ように書いています。
< font style="width:350px;color:red;font-size:30px;" >
Welcome to My グルメの館
< /font >
スタイルシートとは、
WEBページ上の「見栄え」をよくするための新しい技術です。
「HTML は元々文書の意味だけを表示するべきで
文書の見栄えはするべきではない。
見栄えは HTML ではなく、スタイルシートで記述しよう」
というのがスタイルシート開発の理由です。
専門的に知りたい方は、
で、勉強してください。
●color:"色の指定"
カラーネームでもカラーコードでもＯＫです。
●font-size:"文字の大きさ"
fontタグの１が５pxぐらいだと思ってください。
●width:100%
これはこのまま１００％でＯＫです。触らないで下さいね。
＜結果＞ 全く同じになりますね。
・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--:・:☆--:・:
★ では、上のタグに、色々飾りを付けて行きましょう。
楽天で使える、４種類の飾り文字を紹介します。
（１）【文字の縁を光ったようにみせよう】 filter:glow
Welcome to My グルメの館
< FONT FACE="Comic Sans MS" > < P style="filter:glow(color:yellow) ;width:100%;color:red;font-size:30ｐｘ;" >
Welcome to My グルメの館 < /P > < /font >
（２）【文字を立体的にして見ましょう】 filter:shadow
Welcome to My グルメの館
< FONT FACE="Comic Sans MS" > < P style="filter:shadow(color:black) ;width:100%;font-size:30px;color:red;" >
Welcome to My グルメの館 < /P > < /font >
（３）【文字に影をおとしてみましょう】filter:dropshadow
Welcome to My グルメの館
< FONT FACE="Comic Sans MS" > < P style="filter:dropshadow(color:black) ;width:100%;font-size:30px;color:red;" >
Welcome to My グルメの館 < /P > < /font >
（４）【文字をぼかしてみましょう】 filter:blur
Welcome to My グルメの館
< FONT FACE="Comic Sans MS" > < P style="filter:blur(strength:20);width:100%;font-size:30;color:red;" >
Welcome to My グルメの館 < /P > < /font >
★ 文字を重ねる ★
こんなロゴを作ってみてはどうですか～？
このままでも使えるけれど
テーブルをあわせて使って、タイトルにいいかも♪
<P Style ="line-height:50%;"><font size="★" color="○"><b>ココに文字</b> </font><BR><font size="★" color="○"><b>ココに文字</b></font><BR><font size="★" color="○"><b>ココに文字</b></font> </P>
■詳細■
line-heightの数字を変えると、
文字の重なり具合が変わります。
文字の色(○）や大きさ（★）も変えられますよ。
★ 見本 ★
anotherberry
anoterberry
anotherbeyyy
★おまけ★
ここでは書きませんが、説明がいる方は、聞いてくださいね。
きなこのママ
<div style="width:100%;filter:dropshadow(color=#ff0000,offx=10,offy=5,positive=0);">きなこのママ</div>
<div style="background-color:#FFB5B5;width:300px;"> <img src="http://画像アドレス" style="filter:alpha(style=3,opacity=5,finishopacity=95);"> </div>
style=1・style=2・style=3 スタイル番号を変えて試してくださいね。
画像＆テキストに陰
フィルター効果ＮＯ１へ フィルター効果ＮＯ２へ
ジャンル別一覧
人気のクチコミテーマ
-
-
- モバイルよもやま
- ［ウイルスバスター クラウド］「お…
- (2025-10-31 06:43:08)
-
-
-
- デジタル一眼レフカメラ
- 大人のリカ活&ミニカメラ サウンド…
- (2025-11-14 10:36:31)
-
-
-
- アイフォン・アイポッドの必需品
- スティーブ・ジョブズの死に際に発し…
- (2025-07-14 03:41:24)
-
© Rakuten Group, Inc.
