Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssで文字色をつける方法とコードを紹介

投稿日:2019年2月11日 更新日:

Pocket

うも、チャーさん(@chaa___san)です。

 

あなたはcssで文字色を変えたい。

そう思っていませんか?

 

この記事では、cssで文字色をつける方法を、

まとめましたので、cssで文字色を変えたい場合、

下にスクロールして読むようにしてください。

 

スポンサードサーチ

cssで文字色をつけるコード

 

さて、結論からいきます。

cssで文字色をつけるコードは以下です。

 

color:色の名前;

でできます。

 

これをかけばcssで文字色を好きに設定することができます。

 

 

とはいえこれだけだとわかりにくい。

そう思ったあなたのために具体例に入ります。

 

まずは文字の色を青色に変えてみようと思います。

 

 

文字色を青色に変える場合は、

color:blue;

と記述すれば変えれます。

 

さて、そのように記述して実行すると、

以下のようになります。

 

 

ちゃんと青色になってますね!

 

 

ついでなので試しに他の色もやってみましょう。

 

という訳で赤色にもしたいので、

赤文字にしてみます。

 

そうするには、

color:red;

と記述しましょう。

 

すると。

 

赤になりましたね。

 

このように文字色を変えるのは、

簡単で、color:のコロンの後に、

表示させたい色の名前を書くだけです。

 

 

ということで、cssで文字色をつけるには

color:色のコード;

になり、これでcssで文字色を決めれるのです。

 

 

スポンサードサーチ

cssで文字色を変更する手順:初学者むけ

 

で、これで大まかにcssで文字色を変える方法は、

わかったと思いますので、手順など少し補足していきます。

 

 

手順1:元の文章を用意しよう

 

まずcssで文字色をつけるには、

当然ながら元になる文章を書きましょう。

 

これがないと文字に色をつけれません。

 

具体的には、僕の出した例でいうと、

この文の色を変えます。

の部分がそれに相当します。

 

手順2:cssの適用方法を決めよう

 

次に、cssの適用の仕方を決めましょう。

タグにstyle属性をつけるか、

 

<style></style>タグの中で、

タグやクラスを指定してcssを適用できるので、

あなたにとって便利な方法で適用しましょう。

 

直接タグに続けて書く方法

 

で、直接タグに続けて書く場合は、

以下のように書きましょう。

 

<p style=”color:blue;”>この文の色が変わります。</p>

 

 

ちゃんと文字色が変わってますね。

 

<style>内に書く方法

 

で<style></style>内で、

タグを指定して書く場合には、

以下の構文を参考に書きましょう。

 

文字をつけたいタグ名 {

color:あなたがつけたい色の名前;

}

 

ということでサンプルを出すと、

 

p {

color:blue;

}

 

と書いたとすると、

 

ちゃんと文字色付いてますね。

 

なのでどちらかの方法で文字色を

つけましょう。

 

書き方による違いの補足

 

一応違いを補足すると、

タグに直接書き込む(p style=”color:・・・”>)

の場合だと、そのタグ内だけ色がつきます。

 

また、<style></style>内に、

pタグを指定して、

 

p{

color:blue;

}

などのようにすると、全てのpタグに

青色がつきます。

 

なのであなたが表示したいものに合わせて、

使い分けましょう。

 

スポンサードサーチ

cssで多彩な文字色を使いたい場合

 

またこれでcssで文字色をつけることは

できますが、より多くの色を扱いたい、

cssで文字色をつけたい。

 

その場合には、16進数で表示できる、

文字色コードを使いましょう。

 

 

どういうものかというと、

以下のようなものです。

 

color:#33FFFF;

 

で、これを実行するとどうなるかというと、

 

 

という風になりまして、

青色ですがさっきのblueと違う色に

なりましたね。(背景白だと見えないので黒にしました)

 

このように16進数ですと、

同じ青でも濃い青や薄い青や緑がかった青、

など色んな文字色が設定できます。

 

 

blueとかだけでは表現できない、

多彩な色が使えますので、

使いたい場合は16進数のコードを書くようにしましょう。

 

またそのコードの一覧は、

css文字色コード とぐぐりますと、

カラーコードの一覧のサイトが出ます。

 

なのでそこを参考に文字色のコードを使うように

しましょう。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

cssで文字色をつけたい場合は、

color:色のコード;

を記述しましょう。

 

こうすればcssで文字色をあなたの自由に、

変更し表示させることができるようになります。

 

 

またあなたのプログラミング力アップのために、

早速、この記事を参考にしながら、

color:色のコード;を記入して文字色を変更してみてください。

 

それでは、読んでもらってありがとうございました。

 

チャーさん(@chaa___san)

-css

スポンサードサーチ

関連記事

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。