005

いきなりなんですが、今回の完成イメージです。

ネギ色を基調とした美しいグラデーションですね(^o^)

でも、これを通常のブラウザで見ると「あら不思議♡」なことが起きるんです。 

今回のテーマは、
「高さ100%の枠を作る」お話しです。 
スポンサードリンク


今シリーズで作っているのはスクロールするページです。
でも、ペラサイト(1枚のポスターのようなページ)とは違います。

じゃあ、何が違うのか!?

考えました・・・
すごく考えました・・・
そして見つけました。

スクロールページは、画面ごとにストーリーがあります。
例えるなら、紙芝居をバラしてから縦に繋げた感じです。

そうなると、1画面という単位(枠=div)が必要になるわけですね?

そんなわけで今回のテーマというわけです。

まぁ、ウンチクばかり並べてもわからないので、実際に作って確かめてみましょう。


1.css.cssを編集する

毎度おなじみにcss.cssですが、まずは”おまじない”を2個入力したいと思います。

入れるのは、一番上―。 2行目あたりですかね。コレ、トテモ、タイセーツ!

/* CSS レイアウト */
html{
height: 100%;
}

body{
height: 100% ;
}

#masthead {
}
※黒字は既存部分 赤字が入力部分

自己流で勧めているとこれを書き忘れる方が多く「あれ・・・できない」ってことになりやすいと聞きます。
詳しくは「div height 100%」って感じで検索するといろいろ成功をGETできます。

続いて#page_content の中にも大切な事を書き入れておきます。
#page_content {
width: 80%; 
height: 100%;
}

※黒字は既存部分 赤字が入力部分

これも、自己流で勧めているとこれを書き忘れる方が多く「あれ・・・できない」ってことになりやすいと聞きます。

一応復習ですが、heightは高さ。widthは幅を決めています。

トドメに、新しい宣言を追加します。さきほどの#page_contentの下に追加です。
#page_content {
width: 80%; 
height: 100%;
}
#space{
min-height: 100%;
}

※黒字は既存部分 赤字が入力部分

初めて出てきた「space」ですが、これは1画面分の枠の色々を決める部分になります。もちろん、space以外の名前にしてくれてもかまいませんよ?


2.index.htmlを編集する

cssが終わったら今後はhtmlです。ここはほとんどコピー・アンド・ペーストでいけるのが嬉しいですね。

では早速、<div id="page_content">~</div>の間に次のコードを入れましょう。

<div id="page_content">
<div id="space" style="background-color: #003300">
◯◯◯
</div>
</div>

※黒字は既存部分 赤字が入力部分


ここでも新たにstyle="background-color: #003300"というのがでていますが、これは枠内の背景色を決めています。書かなくてもいいんですが「ちゃんとできているか」を感じるためにも入れるのがオススメです。
(◯◯◯の部分は適当に文字でも入れてみてください)

つづいて、上の赤い部分をコックピットしていきます。最終的には。

<div id="page_content">
<div id="space" style="background-color: #003300">
トップ
</div>
<div id="space" style="background-color: #009900">
ヒストリー
</div>
<div id="space" style="background-color: #00CC00">
種類
</div>
<div id="space" style="background-color: #00FF00">
クッキング
</div>
<div id="space" style="background-color:  #CCFF33">
食べに出かけよう!
</div>
</div>

※黒字は既存部分 赤字が入力部分

となればOKです。#003300の部分を変えているのにも注目ですよ?


3.確認
ここまで完成したら、デザイン画面で確認してみましょう。
005
 こんな感じになっていると思います。

「えっ!?なんで高さ100%なのにちゃんと表示されないんだよ!!」 

そういう方も少なく無いと思いますが、Chromeとか普通のブラウザで見ると・・・ 
006

枠が広がってますね?

しかも、ブラウザの大きさに応じて高さが変わるんです。

これはなかなか嬉しいですよね??

こんな感じに5画面つながったことを確認したら、今回の部分は終了です(`・ω・´)ゞ