Samboni
前回の続きになります。vol.1から始めるシリーズになっています
まずはラフスケッチ
手書きでもソフトを使用しても構いませんが、まずはスケッチをします。
これを怠ると逆に時間がかかることを忘れないでください。
このような感じでデザインを考えてみました。
では、このスケッチにわかりやすく色付けをしていきます。
■ヘッダー部分
■コンテンツ部分
■フッター部分
前回作ったHTMLの内容はこんな感じでした。
まずは真ん中の＜section＞タグを「contents」と言う名前に置き換えたいと思います。
タグに名前をつける際に使用するのは、idとclassの2種類の名前の付け方があります。
idを用いるのは主にアンカーリンクを設置する場合。classはそれ以外に主に使われるとざっくりと覚えておきましょう
HTMLの記述方法
名前をつける際にはdivを使用します。
＜div class="ここにクラスの名前"＞</div>
＜div id="ここにidの名前"＞</div>
今回は領域に名前をつけたいのでclassを使用します。
では、実際に前回のsectionをクラスを使用して「contents」と言う名前にして置き換えます。
<!Doctype html>
<html>
<head>
<title>サイトの名前</title>
<link href='style.css' rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div class="contents"></div>
<footer></footer>
</body>
</html>HTMLで名前を変更したのでCSSファイルも同様に修正します。
section {
height:800px;
background-color: #E5E4E2;
}
このように置き換えます。
↓
.contents {
height:800px;
background-color: #E5E4E2;
}素材を用意しよう
まずは、サイトで使用されるロゴ、使用する画像などを用意しておきます。
HTMLファイルの入っているフォルダの中に「img」と言う名前のフォルダを作りその中に素材を保存しておきます。
素材のルール
- 画像の名前は必ず1バイトつまり英数字日本語は使えません
- .などの紛らわしい名前の使用を避ける
- 名前にスペースを使ってはいけない
- 画像の解像度は72dpi
- 保存形式はJPG, GIF, PNGなどwebに適したものを使用する
- ネチケット（他の人の画像は使用しない）を守りましょう
スケッチを元に画像の名前を自分なにりわかりやすい名前で作ります。
あとはSocialアイコンをあある程度作っておくと便利です。
さて、ここまで用意できたら、いよいよサイトの中を作っていこうと思います。
次回は一緒に■ヘッダー部分をゆっくりと作っていきましょう
Samboni
また次回のvol.3でお会いしましょう！
