スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- : スポンサー広告 :

CSSで見出し部分へ色をつけてみます。

超初心者の初めてのHTML&CSSを使ったHP作成。
前回はCSSでヘッダーとフッターの幅を変えました。
(過去の記事  CSSヘッダーとフッターの幅を変えてみました を参考にどうぞ(^-^))

今回は、見出しの部分の色を変えてみたいと思います☆

見出しは、
<h2>と<h3>の、
大きめの文字で表示されている部分です。

そこの色を変えます!

好みの色を選べるので
私はグレーっぽい色の『#999999』
にしたいと思います。

見出しはコンテンツ部分、の中にあるので
まず、HTMLの入力している部分に
コンテンツの記述をするという
宣言をします。

<!--コンテンツ--!>
<div id="content">


これがこれからコンテンツを入力しますという
合図になります。
これを
コンテンツ部分にしたい
<h2>の前に置きます。
そしてコンテンツ部分の終わにしたいところで
</div>
で閉じます。

HTMLにコンテンツ部分を指定したところで
次はCSSでコンテンツ部分の色を変える作業に入ります。

CSSの記述は
<style type="text/css">
</div>
の中にされているので
ヘッダーの後にコンテンツ部分の記述をします。

/*コンテンツ*/
div#content h2 {background-color:#999999}
div#content h3 {background-color:#999999}


↑こんな感じに!
#999999は、
色の指定の番号です。

見出しの色を変えたソースはこんな風になりました。


<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

<style type="text/css">

/*コンテナ*/

div#container {width:760px}

/*ヘッダー*/

div#header {background-color:#79aeae}

/*コンテンツ*/

div#content h2 {background-color:#999999}

div#content h3 {background-color:#999999}

</style>

</HEAD>

<BODY>

<!--コンテナ--!>

<div id="container">

<!--ヘッダー--!>

<div id="header">

<h1>HTMLとCSSで作る初心者のHP作成</h1>

</div>

<!--コンテンツ--!>

<div id="content">

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>

</div>

<div id="footer">

<address>

Copyright (C) 初心者HTML,All rights reserved.

</adress>

</div>

</div>

</BODY>

</HTML>


これが↑
こんな風に

ssaaaa.jpg

なります。
スポンサーサイト
2012-04-17 : CSS : コメント : 1 : トラックバック : 0 :
コメントの投稿
非公開コメント

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2012-05-09 08:49 : : 編集
« next  ホーム  prev »

QRコード

QR

検索フォーム

スポンサードリンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。