スポンサーサイト

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

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 :
コメントの投稿
非公開コメント

« next  ホーム  prev »

QRコード

QR

検索フォーム

スポンサードリンク

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