ゼミI実習


ゼミIで使用しているテキストがあります

HTML実習(その5)CSS(その3)


今回もCSSを使って、Webページのレイアウトについて考えてみましょう。

まず、次のプログラムを入力しcss_test4.htmとして保存してください。ezHTMLの操作に慣れたと思います。まだ、自信のない方は前のテキストを参考にしてください。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
body{background-color:#ffffff;margin-left:10%;margin-right:10%}
#header{
  margin: 0;
  padding: 10px 0px;
  border-bottom: 1px solid #cccccc;
  width: 100%;
  background-color: #ff4500;
}
#left{
  float:left;
  width: 25%;
  font-size: 80%;
  margin: 0 3% 0 0;
  padding: 0px;
  background-color: #eeeeee;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
#right{
  margin: 0;
  padding: 3% 3% 0 0;
  font-size: 80%;
  font-family: Arial,sans-serif;
  color: #333333;
  line-height: 1.166;	
}
#footer{
  font-size: 80%;
  clear:both;
  border-top: 1px solid #cccccc;
  padding: 10px 0 0 0;
  margin-top: 3%;
}
-->
</style>
</head>
<body>
<div id="header">
見出しなんか入れるといいな。
</div>
<div id="left">
リンクのために利用しましょう。<br><br>
<a href="page1.htm">一ページ目</a><br>
<a href="page2.htm">二ページ目</a>
</div>
<div id="right">
今度はページのレイアウトに応用してみます。
</div>
<div id="footer">
ここで分割したものを解除し、付けたしの情報などを書きます。
</div>
</body>
</html>

入力したら保存してブラウザで確認してみましょう。割とすっきりとしたWebページに仕上がります。

CSSで新しく出てきた表現について見てみます。

まず#headerと#footerは画面を4分割した時に、頭の部分がheaderに、その下にleftとrightが2列で並び、最後にfooterがこの2列にまたがった構成となります。

marginやpaddingとだけ指定がある時、属性値が一つの時は上下左右に対して、二つの時には上下と左右、三つで上と左右と下、4つの時はそれぞれ、上、右、下、左に対する値となります。

px(ピクセル)で指定すると固定した値で、%で指定すると全体の割合で指定することになるので、前者の場合はWebページの表示の大きさをブラウザで変えると固定しているのでページの構成が変化します。後者の場合、全体の構成が保たれます。

widthで表示されるパートの幅を決定しています。

font-sizeで文字の大きさの割合を指定しています。

font-familyで書体などを設定しています。

line-heightで行間を指定します。

そしてfooterのところでclearでbothをしようしてfloatで指定した回り込みを解除しています。

またWebページの部分で初めてリンクが出てきました。

<a href="page1.htm">一ページ目</a><br>

特に難しいことはありません。aタグを使用します。aタグではさんだ部分をクリックした時に次のWebページがブラウザに表示されます。そしてそのWebページはaタグの属性hrefにWebページのファイル名を指定します。

元のWebページと同じフォルダに入っている時にはこのように書きますが、別のフォルダにある時には注意が必要です。

元のページのフォルダの中にフォルダpagesがあってそ中にWebページがある時には

<a href="pages/page1.htm">一ページ目</a><br>

と書きます。

次に、元のページが入っているフォルダと同じ場所にWebページがある時には

<a href="../page1.htm">一ページ目</a><br>

と書きます。

次に、元のページが入っているフォルダと同じ場所にフォルダpagesがあってそ中にWebページがある時には

<a href="../pages/page1.htm">一ページ目</a><br>

と書きます。

従って、リンクを用意した場合、飛び先のWebページを用意する必要があります。

また、このようにしてWebページが増えていった場合、Webページに統一性のあるデザインを持たせたいことがあります。このような時には、ezHTMLなどを使って、スタイルシートの部分を外部CSSファイルとして書き出します。

そして、それぞれのWebページからlinkタグを使って、その外部CSSファイルを参照します。

練習1.それでは今まで練習してきたことを総動員してindex.htmを作成してください。このindex.htmというファイルは特別な意味があります。一般にデフォールトでトップのWebページと定められています。つまり、サイトにアクセスした時に最初に開くページということです。これは別名ホームページと呼ばれます。

index.htmはワールドカップ2006のページとします。headerではその趣旨のページであることを示すために見出しや画像を入れるとよいでしょう。font-sizeやcolorを使って、文字のサイズや色を設定してみるのもおもしろいでしょう。

leftの部分は次週以降で指定します。rightの部分では以前ダウンロードしたファイルを使って、国旗、国名、戦績をグループ別に表にしてください。footerの部分は一般に管理者のメールのアドレスやちょっとしたコメントなどを書きます。