初心者スタイルシートcssで色を変えよう

スポンサーリンク

cssを使って文字色を変更する方法

カラーネームで色を変更する

head 要素内に style タグを書いてあげてその中に書いていく方法

pタグのこんにちはを赤色に変更する場合は
 p と書いた後に {} (波括弧)を書いて、その中に color: red; と書きます。

<!DOCTYPEhtml>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ころすけのブログ</title>
<style>
p{
color:red;    
 }
</style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
こんにちは

カラーネームは他にもblue、greenやblack、whiteなどがあります。
しかし、これだけの色では、ブログなどを作成するには色が足りません。

なので、カラーコード(16進法)で色の変更をします。

カラーコード(16進法)で色の変更

head 要素内に style タグを書いてあげてその中に書いていく方法

pタグのこんにちはを青色に変更する場合は
p と書いた後に {} (波括弧)を書いて、その中に color: #0000ff;  と
カラーコード(16進法)を書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ころすけのブログ</title>
<style>
p{
   color: #0000ff;    
 }
</style>
</head>
<body>
<p>こんにちは</p>
     
</body>
 
</html>
こんにちは

RGB値で色の変更

head 要素内に style タグを書いてあげてその中に書いていく方法

pタグのこんにちはを赤色に変更する場合は
p と書いた後に {} (波括弧)を書いて、その中に color:rgb(255, 0, 0);  と
書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ころすけのブログ</title>
<style>
p{
   color:rgb(255,0,0);    
 }
</style>
</head>
<body>
<p>こんにちは</p>
     
</body>
 
</html>
こんにちは

style タグにどんどん書いていってもいいのですが、記述が長くなってくると見にくいので、
別ファイルで管理することもできます。

cssフォルダーを作って、cssファイル(styles.css)を作ります。

まずは、head 要素内に

<link rel="stylesheet" href="css/styles.css">と書きます。

link タグを作って、 rel 属性が stylesheet だよ、ファイルの場所は href 属性を使ってあげて css フォルダの中の styles.css だよという指示です。

cssファイルで管理
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ころすけのブログ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<p>こんにちは</p>
     
</body>
 
</html>

styles.cssの中身
カラーネームでpタグの文字色を赤に変更する場合は
p {
 color:red;
}
カラーコード(16進法)でpタグの文字色を赤色に変更する場合は
p{
   color:#ff0000;    
 }
RGB値でpタグ文字色を赤色に変更する場合は
p{
   color:rgb(255,0,0);    
 }

こんにちはの色が赤になります。

cssで文字の背景色をmarkタグを使って変更する方法

HTMLのmarkタグを使用することで文中の<mark>・・・</mark>で囲った箇所を背景色で表示できます。
markタグは初期設定では黄色(background-color:yellow)となっています。


文字の背景色を変えたい場合は
markタグにbackground-color:(変更したいカラーコード)で
希望の色を指定します。

CSSで文字の背景色を例えば青に変更するには

mark {
  background-color:#0000ff
}

文字の背景色変更

HTMLでは

<p><mark>柴犬ころすけ12歳です</mark> よろしく</p>

柴犬ころすけ12歳です。 よろしく

CSSで背景色を青に変更すると

mark {
  background-color:#0000ff
}

柴犬ころすけ12歳です。よろしく

まとめ

HTMLだけだと、1ページづつ変更しなければならないのですが
CSSだと

一度に複数ページの編集が可能になります。


ブログのページが100ページあろうが1000ページあろうがCSSを変更するだけで、
すべてのページの変更ができます。


CSSを使用することにより、HTMLだけでは表現しきれない細部までの
レイアウト表現が可能になり、HTMLもすっきりして見やすくなります。

スポンサーリンク
おすすめの記事