東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.5 文字と背景に色をつける

文字と背景に色をつける

演習1.5 文字と背景に色をつける

ここで学ぶ内容

☑文字に色をつける <font color= “カラー名 またはRGB値 “>文字</font>
☑背景色を変える <body bgcolor= “カラー名 またはRGB値 “>文字</body>

文字に色をつけると情報が整理されて全体がみやすくなり、また、見た目が楽しくなります。また、強調したい特定の部分だけに色をつけることも効果的です。そして、文字だけではなく、ページ全体の背景の色を変えると、印象に大きな変化を与えます。

1. 文字に色をつける

色を付けたい文字には、<font>タグのcolor属性で色を指定し、</font>で文字を挟んでみましょう。

以下のように、ソースコードの記述を変更してください。

①ソース・フォルダー :html/ch06
②ファイル名     :index.html

➢ index.htmll

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子猫と子犬の部屋</title>
<body>
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1>
<h3><font color="red">かわいい動物たちの写真館</font></h3>
<font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ!</strong></font><br>
<strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。<br><br>
今後も色々と紹介していきますので、楽しんでください。<br>
<hr width="540">
</body>
</html>
        

3箇所の文字の色を付けました。

2. 背景に色をつける

続いて、ページ全体の背景に色を付けます。背景の色は、<body>タグのbgcolor属性に色を指定します。

5行目の<body>タグを、以下のように修正してください。

	~前略~
< body bgcolor="#FFFFCC">
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1> 
        

3. HTMLファイルを保存

記述が終わったら、上書き保存をしてください。

4. ブラウザで表示

では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。

図 1.5.1

一部の文字が緑と赤色になり、また、ページの背景の色は、薄い緑色になりました。

◉色の指定方法

HTMLでの色の指定方法は、2通りあります。

color=”カラー名”
color=”#RGB値”

「カラー名」はWebブラウザが内蔵している予約名で、直感的に色がイメージできます。
「RGB値」は光の3原色である赤、緑、青の順に並べて指定します。
Webでよく利用する色のRGB値は、「Webカラー見本」などの言葉でインターネット検索すると、色々なページが出てきますので、参考にしてみましょう。

NEXT>> 演習1.6 画像を挿入する

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.