スポンサードリンク

ベースができましたので、ちょっと外観(というかサイズ)を決めてしまいましょう♪

やはり、ある程度の枠がないとかっこ良くはありませんよねー?

法律があるから、平和に生活できるわけです!
縛りがあるから、ゲームは楽しいのです !!
束縛されて愛を感じるんです!!! 

はい。進めていきます。

ますは、自動生成されたHTMLのコードを見てみますね。。。はい、わかりました!

ざっくり説明すると、↓こんな仕切りになっています↓
make006

一番上に・・・ん??ヘッダー??
二番目にはー・・・・あれ?ナビ??

・・・

・・・・

・・・・・

make007

 これができるのかっ!!!

 
最初に選択を誤ったようです。。。

でも、このまま進めます!!

だって、せっかくここまで書いたのに書きなおすのイヤだもんっ !

気を取り直して、各枠(ヘッダーとかの大きさを)確認します。
”無題_1.css”を確認してみると・・・
  • conteiner・・・横600px メニュー2とメインが入る枠
  • left_col ・・・横200px メニュー2
なかなか自由度の高い設定です。

この”無題_1.css”の部分は、これからホームページを作りながら、都度調整していこうと思います。

試しにちょっと、設定してみます!
とりあえず、ヘッダーを入れてみましょう

ちなみに、今回使うヘッダーは、こちらですっ

header_img

サイズは900px✕200pxです。

 まず、”無題_1.css”の

# masthead {  
}

の{  }内に、width: 900px;とheight: 200px;を追加します。

#masthead {
width: 900px;
height: 200px;
}
↑こんな感じになります!!

構文の意味を訳すると、
「ヘッダーのサイズは、横900px 縦200px 周りがどんな状態になろうとこの状態は維持するノダ」という感じです。
(ちなみに、”周りが~”以降は雰囲気です。構文には直接書かれていません)

では、ここで一回保存します。

昔、先生が言っていました。
「マメな保存は、我が身を救う」
大人になった今でも、その言葉は真理だと思います。

保存の仕方は、画面上部の、全て保存ボタンをクリックです。

make008

みなさんよく知っているフロッピーマークです。
1.4MB以下の小さいデータを渡したりするのに便利でしたよねぇ

これをクリックすると、保存場所を聞かれます。
標準だと、My Documents 内にいつの間にか作られた"My Web Sites"に保存がされるみたいです。

このまま保存でもいいんですが、後々の運用も考えて、今回用にフォルダを一個作っておきましょう!

「フォルダ分けをしっかりできる人間は、しっかりした人間です!」
と、じっちゃんが言ってました。

フォルダ名はなんでもいいです。適当にどうぞ。

フォルダを作ったらその中に保存しましょう!!

ちなみに僕は、ファイル名を次のようにしています。
  • 無題_1.css→css.css
  • 無題_1.html→index.html
いろいろと都合がいいんです。

ここで、裏ワザです!!

無題_1.htmlを保存する時に「タイトル変更」ボタンが有効になるのですが・・・
make009


これを押して、タイトルを入力しておけば、あとで改めて”ホームページ”の名前を入力しないで済むんです!

便利ですね―

では次回、ついにヘッダーが入ります!!