ゼミI実習


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

HTML実習(その4)CSS(その2)


前回はCSSについて練習しました。引き続き今回も練習してみましょう。

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

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
* {background-color:#ff4500}
-->
</style>
</head>
<body>
<center>
<hr>
<br><br>
<p>
HTMLにはもう慣れましたか。<br>
<i>HTMLにはもう慣れましたか。</i><br>
<span>HTMLにはもう慣れましたか。</span><br>
<i><span>HTMLにはもう慣れましたか。</span></i><br>
</p>
<br><br>
<p>
次はスタイルシートの練習です。<br>
<i>次はスタイルシートの練習です。</i><br>
<span>次はスタイルシートの練習です。</span><br>
<i><span>次はスタイルシートの練習です。</span></i><br>
</p>
<br><br>
<p>
スタイルシートを勉強しておくと<br>
<i>スタイルシートを勉強しておくと</i><br>
<span>スタイルシートを勉強しておくと</span><br>
<i><span>スタイルシートを勉強しておくと</span></i><br>
</p>
<br><br>
<p>
XMLも比較的楽に学べるでしょう。<br>
<i>XMLも比較的楽に学べるでしょう。</i><br>
<span>XMLも比較的楽に学べるでしょう。</span><br>
<i><span>XMLも比較的楽に学べるでしょう。</span></i><br>
</p>
<hr>
</center>
</body>
</html>

今回はCSSの適用範囲について考えていきます。CSSのコードの部分は以下の通りです。

<style type="text/css">
<!--
* {background-color:#ff4500}
-->
</style>

ここで*を使用すると{ }内の属性と属性値がすべてのタグ(あるいは要素)に作用します。従って全体の背景色がオレンジとなります。

次のように変更してみましょう。

p * {background-color:#ff4500}

この場合にはpタグではさまれた部分に{ }内の属性と属性値が作用します。ただし、はさまれた部分のうちタグで囲まれた部分だけとなります。

練習1.次のように変更した場合どのように表示されるでしょうか。試してみなさい。

p span{background-color:#ff4500}

css_test2.htmを次のように書き替えてください。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
i,u{background-color:#ff4500}
#bgg{background-color:#00ff00}
-->
</style>
</head>
<body>
<center>
<hr>
<br><br>
<p>
HTMLにはもう慣れましたか。<br>
<i>HTMLにはもう慣れましたか。</i><br>
<span>HTMLにはもう慣れましたか。</span><br>
<i><span>HTMLにはもう慣れましたか。</span></i><br>
<span><i id="bgg">HTMLにはもう慣れましたか。</i></span><br>
<b><span>HTMLにはもう慣れましたか。</span></b><br>
<u><span>HTMLにはもう慣れましたか。</span></u><br>
</p>
<br><br>
<p>
次はスタイルシートの練習です。<br>
<i>次はスタイルシートの練習です。</i><br>
<span>次はスタイルシートの練習です。</span><br>
<i><span>次はスタイルシートの練習です。</span></i><br>
<span><i>次はスタイルシートの練習です。</i></span><br>
<b><span>次はスタイルシートの練習です。</span></b><br>
<u><span>次はスタイルシートの練習です。</span></u><br>
</p>
<br><br>
<hr>
</center>
</body>
</html>

CSSの部分は以下の通りです。

<style type="text/css">
<!--
i,u{background-color:#ff4500}
#bgg{background-color:#00ff00}
-->
</style>

最初の行は{ }内の効果を複数のタグに与える書き方です。タグを、で区切っています。

次の行はワンポイントでCSSの効果を与える時に使います。#bggとして名前bggを{ }の効果につけることができます。

それから次のようにidを使ってbggの名前を指定することで該当のタグに効果を与えます。

<span><i id="bgg">HTMLにはもう慣れましたか。</i></span><br>

練習2.idを使った例をいくつか試してみなさい。

次にCSSを使ったページのレイアウトについて考えてみます。基本的に表関連のタグやフレームを使用してページのレイアウトを行うことができます。CSSを利用した場合、データ部分とデザイン部分を分離させることができます。つまり、デザインの変更はCSSの部分だけで行うことができるようになります。

次の例をためしてみましょう。次のプログラムを入力しcss_test3.htmとして保存してください。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
body{background-color:#ff4500}
-->
</style>
</head>
<body>
<div>
CSSについて考えていきます。
</div>
<div>
今度はページのレイアウトに応用してみます。
</div>
</body>
</html>

bodyタグに対して背景色をオレンジに設定しています。

次に、属性を追加してみます。追加する時は;を使用します。

body{background-color:#ff4500;margin-left:10%;margin-right:10%}

このようにすることで左右のマージン(余白)を10%取ることができます。しかし、全体がオレンジなのでよくわかりません。

練習3.bodyの背景色はそのままで、divの背景色を白に設定しなさい。

css_test3.htmのプログラムを次のように書き替えなさい。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
body{background-color:#ff4500;margin-left:10%;margin-right:10%}
div{background-color:#ffffff}
#left{
  margin-top:0;
  padding-top:0;
  float:left;
  width:60%;
  margin-right:1em;
  border-right:1px solid black;
  padding-right:1em;
  padding-bottom:20px;
}
#right{
  padding-left:2em;
  margin-top:0;
  padding-top:0;
  padding-bottom:20px;
}
-->
</style>
</head>
<body>
<div id="left">
CSSについて考えていきます。
</div>
<div id="right">
今度はページのレイアウトに応用してみます。
</div>
</body>
</html>

これを試してみると左右二つに分割されます。divタグで属性idを使用しています。

まず左側の部分のスタイルシートは以下の通りです。

#left{
  margin-top:0;
  padding-top:0;
  float:left;
  width:60%;
  margin-right:1em;
  border-right:1px solid black;
  padding-right:1em;
  padding-bottom:20px;
}

この中で重要なのがfloatです。これは回り込みとも呼ばれ、左に寄せて配置します。後続のdivタグで囲まれた部分は自動的に右側に回りこみます。そして、widthで幅が決定されます。

marginは余白で、top、bottom、left、rightは上、下、左、右の部分を指定しています。paddingはmarginが外枠に余白を設定するのに対し、内側に設定するものと考えてください。emという単位はフォントサイズに関連するサイズです。

borderは枠に対して線を引きます、rightで右側だけに線を引きます。1pxは幅が1ピクセル、solidは実線、blackで色を指定しています。

右側の部分も同様に考えます。

練習4.divタグの文章を何度かコピーし貼り付けて字数を多くして効果を試しなさい。また、スタイルシートの属性の値を変化させて効果がどのように変わるか試してみなさい。

練習5.CSSを使用してページを3分割してみなさい。