2006年11月28日

作業2 CSSその9  #footer 内の pタグ について

「#footer」の領域を調整してみましょう。

「style1.css」ファイルの「#footer」のところを探して下さい。

#footer {
width: 763px;
}


以下のように記述足して下さい。太字の部分です。

#footer {
width: 763px;
background-color:#c07000;
height:35px;
}


この「#footer」という領域は必ず必要な領域ではありませんが「著作権」の表示や、1ページの表示がが長くなってしまった時などナビゲーションを配置したりと何かと便利な領域です。

今回は「#honbun」領域と違う設定をしてみましょう。

まず、背景色を茶系の色、高さを35ピクセルに指定してあります。

「part1.html」ファイルをブラウザで確認して下さい。

「#footer」部分のhtmlソースを見てみましょう。

*************************************************************

<div id="footer"><!--ここからはフッターというid-->

<p>Copyright (C) 2006 1-spc.com. All Rights Reserved</p>

</div><!--footer領域の終わり-->

*************************************************************

上記の太字<p>タグの部分は「style1.css」ファイルの「p」が効いているのです。

そこで、「#footer」部分の段落の<p>タグに対してだけ「CSS」を記述してみましょう。

この場合、新たな<p>の命令文が必要です。以下のように記述します。赤字の部分です。

#footer p{
color:#ffffff;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}



解説すると、「#footer」の領域の<p>については、文字色を「白色」にし、上下の余白スペースを10ピクセル取り、文字列をセンター揃えにしなさい。

と、いう命令になるのです。

何回もこのブログで説明していますが、このように<div>領域を設定しておくと、その領域だけに効く「CSS」が記述できるということで大変便利です。

マークアップ作業が大事ということですね。

次回は「#honbun」領域の<p>の上下の調整です。

それでは  (@^^)/~~~

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 10:44 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。