htmlタグとcss−すぐに使えるサンプルと小技集

■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま

---

スポンサード リンク

---

◆HTML&CSS◆ 文字装飾を自作する

---

文字装飾というのはhtmlの中でも非常に簡単な部類に入ります。 仕組みさえ気にしなければすぐにでも作れるくらいです。

文字装飾で最も基本的なのは文字の大きさを変える。 書体を変える。文字の太さを変える。文字に色を付ける。

この4つです。

ここでは、すこし工夫をして上記の文字にフィルターをかける方法を説明します。



filter

---

 filterの例1(glow) <font style="filter:glow(color=#222222);width:100%; font-size:35px" color="#EEEEEE"> filterの例1(glow)</font>

 filterの例2(wave) <font style="filter:wave(add=1,freq=1,phase=180,strength=40,lightstrength=50);width:100%; font-size:35px" color="#A3661F"> filterの例2(wave)</font>

 filterの例3(blur) <font style="filter:blur(add=1,direction=235,strength=20); width:100%; font-size:35px" color="#7F5431"> filterの例3(blur)</font>

 filterの例4(shadow) <font style="filter:shadow(color=#48635F,direction=135);width:100%; font-size:35px" color="#7766FF"> filterの例4(shadow)</font>

 filterの例5(dropshadow) <font style="filter:dropshadow(color=#F8AF0A,offx=10,offy=5);width:100%; font-size:35px" color="#CACF5F"> filterの例5(dropshadow)</font>

---

filterとは基本的に上記のようなもので、 通常の文字に影やぼかし、透過、歪みなどを追加できるのが特徴です。

上記のソースコードをコピペして文章を変更するだけでも使えますが、 自分の好きなように変更してみるのも一興です。

例として、一番上のfilterの例1(glow)の装飾にちょいと手を加えてみます。

(手を加える場所は赤字で表記)

---

 filterの例1(glow) <font style="filter:glow(color=#222222);width:100%; font-size:35px" color="#EEEEEE"> filterの例1(glow)</font>

color=#222222をcolor=#EEEEEEに変更してみる。

 filterの例1(glow) <font style="filter:glow(color=#EEEEEE);width:100%; font-size:35px" color="#EEEEEE"> filterの例1(glow)</font>

なにやら･･････、読みにくいものになってしまった。影と文字の色が同色なのはマズイようだ。

color="#EEEEEE"をcolor="#222222"に変更。

 filterの例1(glow) <font style="filter:glow(color=#EEEEEE);width:100%; font-size:35px" color="#222222"> filterの例1(glow)</font>

･･････、今度は影が薄すぎて付けた意味がない事が判明。修正。

color=#EEEEEEをcolor=#0000FF,color="#222222"をcolor="#FF8800"に変更。

 filterの例1(glow) <font style="filter:glow(color=#0000FF);width:100%; font-size:35px" color="#FF8800"> filterの例1(glow)</font>

及第点。

color=#0000FFをcolor=#34FF21,color="#FF8800"をcolor="green",font-size:35pxをfont-size:30px,文章をふぁるる.webに変更。

 ふぁるる.web <font style="filter:glow(color=#34FF21);width:100%; font-size:30px" color="green"> ふぁるる.web</font>

このように数値を変更するだけで簡単に文字装飾が変化します。

ここに載せている文字装飾はほんの一握りの範囲ですので、まだまだ色々と装飾方法は存在します。



htmlタグで文字装飾。

---

• 文字装飾サンプル396
• 文字装飾を自作する

スポンサード リンク

---