スポンサーサイト

上記の広告は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 :

CSSでヘッダーとフッターの幅を変えてみる。

超初心者が初めて作るHP作成。
CSSを使って、
ヘッダーとフッターの
横幅を変えてみたいと思います。

前回には
タイトル背景に色をつけるところまで
進みました。

過去の記事  CSSでタイトル背景に色をつける方法 』

なんだか
↑横幅を縮めないと、とっても横長な感じのHPになっています。
これに
横幅を変える記述をしていきたいと思います!

ヘッダーとフッターって何?
気になる!

日本語で
ヘッダーは頭、
フッターは足、
と、いうことで
上の部分(タイトルあたり)がヘッダーで
下の部分(コピーライトをいれているあたり)がフッター
と、いうことみたいです!
なるほどねぇ~


CSSでヘッダーとフッターの横幅を変える方法
まず、HTMLでヘッダーとフッターを
コンテナ部分としてまとめます。
コンテナとは
日本語で入れ物や箱などの意味があるみたいなので
ヘッダーとフッターをでかい箱に、
まとめて入れるイメージでしょうか・・・

↓それがその記述方法!


<!--コンテナ--!>
<div id="container">
</div>


BODY、の後につけて、
/BODY
の前でdivを閉じます。
大きく、くくる感じで。

そしてコンテナであることを記述した後に、
CSSで幅を変えます。

/*コンテナ*/
div#container {width:760px}

<style type="text/css">
のすぐ後に入力します。


全体のHTMLとCSSのソースは
こんな感じですっ(^-^)

-----------------------------------------------------
<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

<style type="text/css">

/*コンテナ*/div#container {width:760px}

/*ヘッダー*/div#header {background-color:#79aeae}

</style>



</HEAD>

<BODY>

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

<div id="container">

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

<div id="header">

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

</div>

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

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

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

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

<div id="footer">

<address>

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

</adress>

</div>

</div>

</BODY>

</HTML>
---------------------------------------------------
だんだんややこしい感じになってきましたね~
でも、昔は暗号?って感じにしか見えなかったのが
解読できるのがなんだかうれしい☆

ssyosinsya2.jpg


これをブラウザ上で表示すると
↑こうなります♪

以上、CSSで横幅を変える、でした☆


HP作成 初心者すぎて超基本からのスタート TOPへ戻る




2012-04-08 : CSS : コメント : 0 : トラックバック : 0 :

CSSでHPのタイトルの背景に色をつけます

初心者が挑戦する
HTMLとCSSで作成中のHPに
CSSにて
(CSSって何?という方は 過去の記事 CSSとは を参考にどうぞ♪
参考になるかどうかは謎ですが・・・(^ー^))
ホームページのタイトル部分の背景の色をつけてみます!

HTMLで
↓このように入力し
(これがHPのタイトル部分に表示されるタイトルになります。)

<!--ヘッダー--!>
<div id="header">
<h1>HTMLとCSSで作る初心者のHP作成</h1>
</div>



CSSでこのように入力します

/*ヘッダー*/
div#header {back-ground-color:#79AEAE}



(これが色の指定をする部分です。
div#headrとありますが
HTMLで入力した
div id="header"に対して
CSSが
div#header {back-ground-color:#79AEAE}
と、なるみたいです。
CSSの#(シャープ)は、HTMLの id=(アイディーイコール) のことなのかな?)

どこに入力するかというと、

---------------------------------------------
<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

<style type="text/css">

/*ヘッダー*/

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

</style>

</HEAD>

<BODY>

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

<div id="header">

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

</div>

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

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

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

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

<div id="footer">

<address>

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

</adress>

</div>



</BODY>

</HTML>
-----------------------------------------------------------


どこに入力するかというと
HTMLの入力は、
<BODY>~</BODY>の間へ!

CSSの入力は
<style type="text/css">~</style>

の間へ。入力するみたいです。

基本、HTMLは
<BODY>~</BODY>の中に入っていて
CSSは
の中に入っているみたいです。


すると、こんな感じになります♪
↓タイトル部分に青い色がつきました♪
syosinsya.jpg
2012-04-07 : CSS : コメント : 0 : トラックバック : 0 :

CSSとHTMLの簡単な区別方法。

HTMLとCSS。違い?って何?
見て分かるものなの?
と思っていましたが
なんか、よく見ると、HTMLとCSS、
確実に違う!

初心者目線でHTMLとCSSで出来たソースを
じっくり見てみると
HTMLは、
<>←マーク
が使われていて
CSSは
{}←マーク

が、使われてるではありませんか!

これは分かりやすい。
HTMLが<>で
CSSが{}。
本でも、こういの、
教えて欲しかった!
超初心者だと、こういうの
大発見!!

♪♪♪
がんばろ。
2012-04-01 : CSS : コメント : 0 : トラックバック : 0 :

HTMLにいよいよCSSを付け加えたいと思います!

CSSって何?
いったい、何なの?
そんな風に
ずっと思っていました。
実際にHPを作り始めてみるまでは!
なにはともあれ、
実際にやってみるのが一番!かも!

『CSSとは、Cascading Style Sheet(カスケーディングスタイルシート)の略称です。』

・・・って、嫌!難しい!
なんとか日本語でカスケーディングスタイルシートの意味を
教えて欲しいところですが
なんだか、カスケーディングを日本語で表すのが難しいみたいです。
そこを何とか!って感じですが。
翻訳機能でCascading Style Sheetで訳してみたら
カタカナで
カスケーディングスタイルシートって出た。
うーん。意味を理解しようとするのはやめよう・・・

CSSとは、HTMLを飾っていくもの。
HTMLが顔ならCSSは化粧。
見栄えよくするもの。

さて、次回から、いままで作ったHTMLのページを
CSSで装飾していきます!



2012-03-25 : CSS : コメント : 0 : トラックバック : 0 :
ホーム

QRコード

QR

検索フォーム

スポンサードリンク

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