CSS入門 CSSでサイトのベースを作る - もばいりーde引きこm(y な日常

今までの所でサイトのベースとなる構成が作れるようになったと思われます。
いくつか端折ってますが、ここまでのボックスを使用してサイトのベースを作成したいと思います。

まず、ブラウザ内のでの表示ですが、個人的に"中央"に表示し最近のスマホで多い横幅で固定しようと思います。
調べた所、720～1080pxが大変多かったこともあり、PC表示した時でもあまりに縮小表示されない事も考えて900px固定で作成を考えました。縦幅は長くなれば長くなるので可変でもいいかと思ったのですが、今は勉強含んだ部分なので1200pxに固定で指定。まずは大枠を作成します。bodyタグに枠を当てはめてみます。

以下、レイアウト説明です。

--------------------------------------
@charset "utf-8";

/* === body要素 === */
body {
width : 900px ;
height : 1200px ;
margin-left : auto;
margin-right : auto;
border-top : solid 1px red ;
border-bottom : solid 1px red ;
border-right : solid 1px red ;
border-left : solid 1px red ;
}

------------------------------------

margin-leftとmargin-rightは中央寄せにするために使用しています。
次に内部の構造についてはidで指定し、枠を組んでいきます。必要な物として以下のボックスを作成。

○header
○menu
○main
○footer

menu以外にもサイドバーを作成したいのですが、900px内でいかに収めるかも含めて勉強だと思っているので、そちらも後程にして作成してみました。上から順番に上記必要なボックスを並べていきます。

----------------------------------
/* === header要素 === */
#header {
width : 898px ;
height : 200px ;
border-top : solid 1px blue ;
border-bottom : solid 1px blue ;
border-right : solid 1px blue ;
border-left : solid 1px blue ;
}

/* === menu要素 === */
#menu {
width : 898px ;
height : 120px ;
border-top : solid 1px black ;
border-bottom : solid 1px black ;
border-right : solid 1px black ;
border-left : solid 1px black ;
}

/* === main要素 === */
#main {
width : 898px ;
height : 772px ;
border-top : solid 1px yellow ;
border-bottom : solid 1px yellow ;
border-right : solid 1px yellow ;
border-left : solid 1px yellow ;
}

/* === footer要素 === */
#footer {
width : 898px ;
height : 100px ;
border-top : solid 1px green ;
border-bottom : solid 1px green ;
border-right : solid 1px green ;
border-left : solid 1px green ;
}

------------------------------------

一旦以上のように設定。高さはbodyの高さに合わせてとりあえず作成。1pxのラインを色分けしていれてあるのでその分2pxづつ減らした数値で記載しています。先ほどとは違い、限界値で幅を入力しているので、ここでは記載していません。
実際にサイトを運営する上ではボックスのラインは表示させるつもりはありませんが、現在の状態を把握するのに入れています。

HTMLは特に記述する内容がないので、CSSのレイアウトが出来ているか確認するだけの記載をしたいと思います。

------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
<div id="header">
header<br />
</div>
<div id="menu">
menu<br />
</div>
<div id="main">
main<br />
</div>
<div id="footer">
footer<br />
</div>
</body>
</html>

------------------------------------

実際の表示はどうでしょうか。

サンプル

表示の方に問題はないようです。ここからいくつか修正を施しながら完成体に持っていきます。