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

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

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

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

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

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

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

最新記事

チャーさん

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

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

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