【サイト構築 】配色によるCSSスニペット【HTML&CSS;】

webサイト・ブログ記事を作成する際に文章を装飾したいことって多々あります。
今回は、文章を装飾する際にあらかじめCSSに記述しておくと便利なCSSをまとめたいと思います。

オールマイティな色まとめ

まずは全部の色を入れたいという方に。

147色まとめました!*web標準カラーチャートに属しています。

class名はこちらのサイトカラーチャート/カラーネーム 147色 – TAG index Webサイトを参考にしてください。

同名で制作しています。

ダウンロードはこちら

Download: color.css

こちらはサイズ縮小したものです。3.56kbと少々大きいかも

Download: color.min.css

その他クラスと併用してさらに便利に!

ほかにもシャドウなどのクラスを指定しておけば便利ですね。

Layman’s web creation.

[css]
.shadow {
-moz-text-shadow: 0 3px 5px rgba(0, 0, 0, .3);
-webkit-text-shadow: 0 3px 5px rgba(0, 0, 0, .3);
text-shadow:0 3px 5px rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=0, strength=3, enabled=true);
}
[/css]

Layman’s web creation.

[css]
.lightning {
color:#fff;
text-shadow:
0px 0px 10px #FFD700,
0px 0px 20px #FFD700,
0px 0px 30px #FFD700,
0px 0px 40px #FFD700,
0px 0px 50px #FFD700,
0px 0px 60px #FFD700;
}
[/css]

Layman’s web creation.

[css]
.first-letter:first-letter {
font-size:2.0em;
}
[/css]

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です