いきなりなんですが、今回の完成イメージです。
ネギ色を基調とした美しいグラデーションですね(^o^)
でも、これを通常のブラウザで見ると「あら不思議♡」なことが起きるんです。
今回のテーマは、
「高さ100%の枠を作る」お話しです。
スポンサードリンク
今シリーズで作っているのはスクロールするページです。
でも、ペラサイト(1枚のポスターのようなページ)とは違います。
じゃあ、何が違うのか!?
考えました・・・
すごく考えました・・・
そして見つけました。
スクロールページは、画面ごとにストーリーがあります。
例えるなら、紙芝居をバラしてから縦に繋げた感じです。
そうなると、1画面という単位(枠=div)が必要になるわけですね?
そんなわけで今回のテーマというわけです。
まぁ、ウンチクばかり並べてもわからないので、実際に作って確かめてみましょう。
1.css.cssを編集する
毎度おなじみにcss.cssですが、まずは”おまじない”を2個入力したいと思います。
入れるのは、一番上―。 2行目あたりですかね。コレ、トテモ、タイセーツ!
※黒字は既存部分 赤字が入力部分
これも、自己流で勧めているとこれを書き忘れる方が多く「あれ・・・できない」ってことになりやすいと聞きます。
一応復習ですが、heightは高さ。widthは幅を決めています。
トドメに、新しい宣言を追加します。さきほどの#page_contentの下に追加です。
※黒字は既存部分 赤字が入力部分
初めて出てきた「space」ですが、これは1画面分の枠の色々を決める部分になります。もちろん、space以外の名前にしてくれてもかまいませんよ?
2.index.htmlを編集する
cssが終わったら今後はhtmlです。ここはほとんどコピー・アンド・ペーストでいけるのが嬉しいですね。
では早速、<div id="page_content">~</div>の間に次のコードを入れましょう。
※黒字は既存部分 赤字が入力部分
ここでも新たにstyle="background-color: #003300"というのがでていますが、これは枠内の背景色を決めています。書かなくてもいいんですが「ちゃんとできているか」を感じるためにも入れるのがオススメです。
(◯◯◯の部分は適当に文字でも入れてみてください)
つづいて、上の赤い部分をコックピットしていきます。最終的には。
※黒字は既存部分 赤字が入力部分
となればOKです。#003300の部分を変えているのにも注目ですよ?
3.確認
ここまで完成したら、デザイン画面で確認してみましょう。
こんな感じになっていると思います。
「えっ!?なんで高さ100%なのにちゃんと表示されないんだよ!!」
そういう方も少なく無いと思いますが、Chromeとか普通のブラウザで見ると・・・
枠が広がってますね?
しかも、ブラウザの大きさに応じて高さが変わるんです。
これはなかなか嬉しいですよね??
こんな感じに5画面つながったことを確認したら、今回の部分は終了です(`・ω・´)ゞ
今シリーズで作っているのはスクロールするページです。
でも、ペラサイト(1枚のポスターのようなページ)とは違います。
じゃあ、何が違うのか!?
考えました・・・
すごく考えました・・・
そして見つけました。
スクロールページは、画面ごとにストーリーがあります。
例えるなら、紙芝居をバラしてから縦に繋げた感じです。
そうなると、1画面という単位(枠=div)が必要になるわけですね?
そんなわけで今回のテーマというわけです。
まぁ、ウンチクばかり並べてもわからないので、実際に作って確かめてみましょう。
1.css.cssを編集する
毎度おなじみにcss.cssですが、まずは”おまじない”を2個入力したいと思います。
入れるのは、一番上―。 2行目あたりですかね。コレ、トテモ、タイセーツ!
/* CSS レイアウト */html{height: 100%;}body{height: 100% ;}#masthead {}
※黒字は既存部分 赤字が入力部分
自己流で勧めているとこれを書き忘れる方が多く「あれ・・・できない」ってことになりやすいと聞きます。
詳しくは「div height 100%」って感じで検索するといろいろ成功をGETできます。
続いて#page_content の中にも大切な事を書き入れておきます。
自己流で勧めているとこれを書き忘れる方が多く「あれ・・・できない」ってことになりやすいと聞きます。
詳しくは「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.確認
ここまで完成したら、デザイン画面で確認してみましょう。
こんな感じになっていると思います。
「えっ!?なんで高さ100%なのにちゃんと表示されないんだよ!!」
そういう方も少なく無いと思いますが、Chromeとか普通のブラウザで見ると・・・
枠が広がってますね?
しかも、ブラウザの大きさに応じて高さが変わるんです。
これはなかなか嬉しいですよね??
こんな感じに5画面つながったことを確認したら、今回の部分は終了です(`・ω・´)ゞ