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


スポンサードサーチ

関連記事

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

cssで上下左右に中央寄せする簡単で便利な方法

どうも、チャーさんです。   あなたはcssで上下左右、両方とも 中央寄せしたいと思っていませんか?   左右ならtext-alignやmargin:autoで できるけど上下って …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

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

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

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

最新記事

チャーさん

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

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

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