Loading...
HTMLコピペ

【CSS】あると便利!コピペ用クラス設定【シンプル is BEST!!】HTML中級者向け~

HTML&CSSの技術者向きの記事です。HTML中級者以上~向け。

CSSを使って、文字の色やサイズの変更をしたい!

こんにちは。今日も元気にワードプレスと向き合ってますか!!!

今回は、CSSを使って文字の色やサイズの変更をする際に、使いやすい&解りやすいクラスの設定を紹介します。

・・・というか自分の防備録でもあります。

コピペで使えるように、サクサク記述しますので、某サルワカさんや某WEBクリエイターボックス(※某の意味)さんのように、コピペして使って頂ければと思います。

※とは言え、上記で紹介したサイトに比べて、デザイン性はほぼ皆無です!!!

必要最低限。CSSを作る際にベースとして使いやすいようなクラス設定です。

でも、みんな結構、こういったコピペ用のベース欲しいよね???(私は欲しい)

という事で、下記に記載しておきます。


文字色を変えるクラス設定

まずは、文字の色を変更するだけのClassです。
文字として読みやすいようなカラーコードを指定しています。

文字色:水色

sample サンプル こんなふうになるよ!

/*文字色:水色*/
.text_mizuiro{
color:#2E9AFE;
}

文字色:黄緑

sample サンプル こんなふうになるよ!

/*文字色:黄緑色*/
.text_kimidori{
color:#00FF40;
}

文字色:黄色

sample サンプル こんなふうになるよ!

/*文字色:黄色*/
.text_yellow{
color:#F3DB1E;
}

文字色:赤

sample サンプル こんなふうになるよ!

/*文字色:赤色*/
.text_red{
color:#FF0000;
}

文字色:青色

sample サンプル こんなふうになるよ!

/*文字色:水色*/
.text_ao{
color:#0101DF;
}

文字色:灰色

sample サンプル こんなふうになるよ!

/*文字色:灰色*/
.text_gray{
color:#BDBDBD;
}

使えそうなら:上の指定全部

改行が必要無いなら…こちらが便利です:改行・空白・タブ削除ツール

/*~ここから~文字色を指定するクラス*/
/*文字色:水色*/
.text_mizuiro{
color:#2E9AFE;
}

/*文字色:黄緑色*/
.text_kimidori{
color:#00FF40;
}

/*文字色:黄色*/
.text_yellow{
color:#F3DB1E;
}

/*文字色:赤色*/
.text_red{
color:#FF0000;
}

/*文字色:灰色*/
.text_gray{
color:#BDBDBD;
}
/*~ここまで~文字色を指定するクラス*/


↓次は、文字の背景色を変えるクラス設定です↓

文字の背景色を変えるクラス設定

続いて、文字の背景色を変更するClassです。
背景色を指定しても、文字は読みやすいように、文字(テキスト)のカラーコードも指定しています。

背景:水色

sample サンプル こんなふうになるよ!

/*文字の背景色:水色*/
.text_back_mizuiro{
background-color:#CEE3F6;
}

背景:黄緑

sample サンプル こんなふうになるよ!

/*文字の背景色:黄緑色*/
.text_back_kimidori{
background-color:#A9F5A9;
}

背景:黄色

sample サンプル こんなふうになるよ!

/*文字の背景色:黄色*/
.text_back_yellow{
background-color:#F4FA58;
}

背景:赤

sample サンプル こんなふうになるよ!

/*文字の背景色:赤色*/
.text_back_red{
background-color:#FF0000;
color:#FFFFFF;
}

背景:灰色

sample サンプル こんなふうになるよ!

/*文字の背景色:灰色*/
.text_back_gray{
background-color:#D8D8D8;
}

 

使えそうなら:上の指定全部

改行が必要無いなら…こちらが便利です:改行・空白・タブ削除ツール

/*~ここから~文字の背景色を指定するクラス*/
/*文字の背景色:水色*/
.text_back_mizuiro{
background-color:#CEE3F6;
}

/*文字の背景色:黄緑色*/
.text_back_kimidori{
background-color:#A9F5A9;
}

/*文字の背景色:黄色*/
.text_back_yellow{
background-color:#F4FA58;
}

/*文字の背景色:赤色*/
.text_back_red{
background-color:#FF0000;
color:#FFFFFF;
}

/*文字の背景色:灰色*/
.text_back_gray{
background-color:#D8D8D8;
}
/*~ここまで~文字の背景色を指定するクラス*/

コメントを残す

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