ページをどう分割するか決める
ページをどう分割するか決める
ページを分割したときのイメージを考える
- まずは、自分がオシャレだな、いいなと思ったサイトを参考にしてページをどう分割するかデザインしました。
- こんな感じ。（実際はノートで手描きしてます。）
- 分割するときは何を載せるのか考えながら分けていきます。
- header → サイトのタイトル、メインメニューのボタン
- contents1 → サブメニュー
- contents2 → メインコンテンツ
- footer → リンク、コピーライト
基本のページを作る
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./style.css"> <title>ページ分割</title> </head> <body> <!-- コンテンツ --> </body> </html>
CSSで分割したページをデザインする枠を作る
- 分割した部分それぞれのデザインを設定できるようにするために、CSSにid属性で枠を作ります。
- 分割されていることが分かりやすいように、背景色をあえて指定しています。
#header { //headerのデザイン background: #e95388; } #contents1 { //contents1のデザイン background: #79c06e; } #contents2 { //contents2のデザイン background: #409ecc; } #footer { //footerのデザイン background: #864eb9; }
ページにスタイルを指定する
- 基本のページにスタイルを適用します。
<body>～</body>の部分が、上記で決めたように分割されるように適用していきます。<div id="****"></div>を使って分割していきます。今回は左右に並ばないのでそのまま次々書いてます。- 中身が空だと何も表示されないので、何か適当に書いておきます。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./style.css"> <title>ページ分割</title> </head> <body> <div id="header"> <!-- header --> header </div> <div id="contents1"> <!-- contents1--> contents1 </div> <div id="contents2"> <!-- contents2 --> contents2 </div> <div id="footer"> <!-- footer --> footer </div> </body> </html>
これで、htmlファイルを開くと次のようになります。
あれ、最初のイメージと違ってそれぞれもっと高さが違うはずなんだけど。。と思いましたが、中身が増えれば高さもそれに応じて変わるので問題ありませんでした。
- 問題は、上と左右にある余白。これを消したい。どうするか？ CSSで、bodyにmargin「0」を指定します。以下を追記します。
body { margin: 0; }
次のように余白がなくなったと思います。
bodyで直接書きたくない場合は、「id」か「class」で書いておいてもいいですね。
まとめ
- まずは、何をどのように見せるかイメージを決めておくとコードを何度も書き直さなくて済みました。（前は良くコピーしてきて、見た目気に入らなくなったら書き直して、時間を無駄にしてました。。）
- 使うかどうかは別としてイメージをつかみやすくするために、CSSでページを分割した範囲の枠を用意しておくと作業が楽でした。（背景色とかはあとで消せばいいですしね。）
- 基礎は大切でした。
