◆第８回　ページらしきものを？（１）・行間を空ける　◆

その１

材料のダウンロードと基本ページの作成

今まで学習したことと、ちょいとプラスするかもしれんが、ここらで、webページらしきものを作ってみようと思う。

にこにこ顔の助手

いいですね、それ。単純にスタイルシート書いてるよりやる気がでそうですよ！

やる気は、その人の心がけぢゃが・・・まー、それでも一応ページらしきものの方がやる気は出るかもしれんな。視覚に訴えるからの。
ということで、ちょいとした絵本のページを作ってみようと思う。
まず、材料のＤ／Ｌぢゃ。下の画像１と画像２をクリックして、表示された画像の上でマウスを右クリックして、名前をつけて自分のＰＣに保存してくだされ。

［画像１］［画像２］

で、おそらくwebページは、ソフトで作ってるぢゃろうから、ソフトで下のsample1のようなページを作ってくだされ。［sample1.html］

ソフトがない人は、下のhtmlをメモ帳かテキストエディタにコピーペーストして作ってくだされや。
画像をダウンロードしたフォルダの中にsample1.htmlと名前をつけて保存すれば、見本と同じページができるはずぢゃ。

<html>

<head>
<title></title>
</head>

<body>

創作絵本／うさぎさんと少女 
 
 

［その１］出会い　　 
 
<img border="0" src="ikkenya2.jpg" width="300" height="200">ある日、近くの森を散歩していたアンジーは、道に迷ってしまい、森の奥へと入ってしまいました。 
小川のほとりに見つけた小さなお家。そこで洋服を着て人間のように歩いているウサギに出会いました。 
 
「お嬢さんの名前は？」 
「アンジー。でもみんなは私のことをアンって呼んでるわ。」 
「アン・・・気に入った。その名前をもらおう。」 
「え？もらうって？」 
「でも、私は男だから、そうだな、アンドリューを正式名としようか。通称アン。」 

［その２］レースは始まった 
 
 
 
<img border="0" src="ikkenya3.jpg" width="300" height="200">
ウサギと一緒にその夜は、その家で泊まったアン。 
翌朝、ウサギはアンの寝ている間に出かけてしまいました。 
「大変だよ！名前を返してもらわないとお家に帰れないよ。だって、今頃みんな君の事など忘れてるよ。」 
「ええっ？それってママもパパも？」 
「そうだよ。早く返してもらわないと、あのウサギが君ん家の子供になっちゃうよ。」 
「そ、そんなの困るわ。」 
 
ウサギが向かった次の家の場所を聞き、女の子はウサギを追いかけ始めました。 

</body>

</html>

で、このページをスタイルシート搭載型に改造し、webページらしく整えていくぞい。

その２

・作成したwebページをスタイルシートに連携させる

まずは、その６で作成したスタイルシートの構成でやってみようかの？
どんなページ構成だったか忘れた人は、ここをクリックしてみてくだされ。
一応、その時のスタイルシートは、下のぢゃ。

body {
background-color: white;
color: black;
}

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";

}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

htmlそのままだといくらスタイルシートファイルと一緒に置いても、ページにはスタイルシートの設定は反映されない。
まずは、そのスタイルシートへのリンク表記ぢゃ。
ソフトで作成した人は、htmlモードとか、タグ表示とかいうコマンド（ツール）があると思うんぢゃ。それで、そのページをhtmlタグ表示させてくだされ。
上のhtmlをコピーした人は、それを改造していくぞい。

赤いところを追加＆改造箇所ぢゃ。青い文字は解説ぢゃ。書かなくてもいいぞい。
ソフトで作成した人は、<html><head>のあとにあれこれ勝手に自動で書き込まれておるぢゃろうが、そこは無視しておいてくれ。

大切なのは、必ず　<head></head>内に書くということぢゃ。位置は前後してもいいがの。

例として、わしはfrontpageを使っておるんぢゃが、head内にはこんなに勝手に書き込まれておる。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>

ちなみに、<title></title>の間にはそのページのタイトルを入れておけばいいのぢゃ。
下のhtmlには、わしも書いておこうかの。
で、じゃ、まー、そうぢゃのぉ・・</head>の前というか上の行にスタイルシートの呼び出し（リンク）タグを書いておこうかの。

それから というのは、改行の記号（タグ）なんぢゃが、大見出し、小見出しの後は、これがなくとも改行されるんで削除したぞい。

<html>

<head>
<title>ページ見本１</title>
<link rel="stylesheet" type="text/css" href="style6.css">
</head>

<body>

<h1>創作絵本／うさぎさんと少女</h1>
 
 

<h2>［その１］出会い</h2>
<img border="0" src="ikkenya2.jpg" width="300" height="200">ある日、近くの森を散歩していたアンジーは、道に迷ってしまい、森の奥へと入ってしまいました。 
小川のほとりに見つけた小さなお家。そこで洋服を着て人間のように歩いているウサギに出会いました。 
 
「お嬢さんの名前は？」 
「アンジー。でもみんなは私のことをアンって呼んでるわ。」 
「アン・・・気に入った。その名前をもらおう。」 
「え？もらうって？」 
「でも、私は男だから、そうだな、アンドリューを正式名としようか。通称アン。」 

<h2>［その２］レースは始まった</h2>
<img border="0" src="ikkenya3.jpg" width="300" height="200">
ウサギと一緒にその夜は、その家で泊まったアン。 ?
翌朝、ウサギはアンの寝ている間に出かけてしまいました。 
「大変だよ！名前を返してもらわないとお家に帰れないよ。だって、今頃みんな君の事など忘れてるよ。」 
「ええっ？それってママもパパも？」 
「そうだよ。早く返してもらわないと、あのウサギが君ん家の子供になっちゃうよ。」 
「そ、そんなの困るわ。」 
 
ウサギが向かった次の家の場所を聞き、女の子はウサギを追いかけ始めました。 

</body>

</html>

無事style6.cssを読み込んで、こうなったかの？
で、ここからまたまた改造していくぞい！

その３

段落設定／行間を空ける

この講座のページもそうなんぢゃが（汗っ
見出しはいいが、文章の部分、行間が全く空いてないからここに余裕を持たせようと思う。

ソフトでページを作ると勝手に入っているかもしれないが、というタグぢゃ。
文章の部分をこれで囲んでくだされ。
そして、cssファイルの方に、今までの　body、h1、h2への設定をしたように今度はpの設定を追記するぞい。

<html>

<head>
<title>ページ見本１</title>
<link rel="stylesheet" type="text/css" href="style6.css">
</head>

<body>

<h1>創作絵本／うさぎさんと少女</h1>
 
 

<h2>［その１］出会い</h2>
<img border="0" src="ikkenya2.jpg" width="300" height="200">ある日、近くの森を散歩していたアンジーは、道に迷ってしまい、森の奥へと入ってしまいました。 
小川のほとりに見つけた小さなお家。そこで洋服を着て人間のように歩いているウサギに出会いました。 
 
「お嬢さんの名前は？」 
「アンジー。でもみんなは私のことをアンって呼んでるわ。」 
「アン・・・気に入った。その名前をもらおう。」 
「え？もらうって？」 
「でも、私は男だから、そうだな、アンドリューを正式名としようか。通称アン。」 

<h2>［その２］レースは始まった</h2>
<img border="0" src="ikkenya3.jpg" width="300" height="200">
ウサギと一緒にその夜は、その家で泊まったアン。 ?
翌朝、ウサギはアンの寝ている間に出かけてしまいました。 
「大変だよ！名前を返してもらわないとお家に帰れないよ。だって、今頃みんな君の事など忘れてるよ。」 
「ええっ？それってママもパパも？」 
「そうだよ。早く返してもらわないと、あのウサギが君ん家の子供になっちゃうよ。」 
「そ、そんなの困るわ。」 
 
ウサギが向かった次の家の場所を聞き、女の子はウサギを追いかけ始めました。 

</body>

</html>

スタイルシートも、そのままstyle6に追加でいいのぉ。

にこにこ顔の助手スタイルシートのpタグの指定の中の、1.5emというのは、文字の大きさを変えたのと同じですよね？
つまり、そこに表示されている文字の大きさの1.5倍の間隔を開ける（文字の大きさも含めて１.５）という意味ですよね？

そうぢゃ！そうぢゃ。
そこの数値はいろいろ変えて、どんな風に変化するか実際に見てくだされや。
一応、上の改造で、こうなっておるはずぢゃ。

さて、次に画像の回り込みをしたいんぢゃが、ちょいと時間がないんでの。
次回と言うことで、まだまだこのページは改造途中ぢゃ。
それでは、次回、また会えることを楽しみにしておりますぞ。　