トップページ:ヘッダー作成

デザイン」の次はトップページのヘッダー作成です。ヘッダー部分にCSSやhtmlの最初の記述を行い、デザイン通りにタイトルやイメージ画像等を配置します。

スタイルシートの最初の記述

 スタイルシートでは最初に文字コードやページ全体でどのようなスタイルにするかを記述します。

【スタイルシート最初の記述例】
@charset "UTF-8";

body {
background-color: rgb(141,85,29);
}

 @charsetで文字コードを指定しています。例ではUTF-8ですが、シフトJISにする場合はShift_JISです。シフトJISは日本語を表示するための文字コードでUTF-8は世界的に規格化された文字コードです。どちらでもホームページを作る上では問題ありませんが、UTF-8にした場合、メモ帳やNoEditorで保存する時にUTF-8を選択して保存する必要があります。

 background-colorは背景です。本サイトでは左右に深い緑色の背景を使っていますが、例では土をイメージして深い茶色を設定しています。

htmlの最初の記述

 htmlの最初の記述はタイトルだけブラウザのタブの部分に表示されますが、その他はどのような決まりで記述するか記載しているだけでブラウザ上では表示されません。但し、この設定が間違っていると文字化けやブラウザ表示が崩れる原因となります。

【トップページhtmlの最初の記述例】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<title>キャンプ入門サイト</title>
</head>

 DOCTYPE HTML PUBLIC・・・部分は余り厳密でないhtmlの書き方ですと宣言しています。他の宣言方法もありますが、最初はこれでいいと思います。

 html lang部分で日本語を宣言しています。<head>は</head>までがhtmlのhead部分です。

 次の3行は文字コード設定、スタイルシートを使う事の宣言、使うスタイルシートのファイル名を設定しています。この例では文字コードはUTF-8、スタイルシートはcssフォルダ配下のstyle1.cssです。titleはサイトのタイトルで例としてキャンプ入門サイトとしています。

 これらの宣言はスタイルシートのファイル名とタイトル以外殆ど設定しなくても動作する事が多いのですが、ブラウザによって動作が変わるため念のため設定する事をお奨めします。太字のタイトルだけは自身のホームページのタイトルに変えて下さい。

トップページヘッダーのスタイルシート作成

 「デザイン」で考えたレイアウトで以下のヘッダー部分を作っていきます。

トップページ:ヘッダー作成1
【トップページヘッダーのスタイルシート記述例】
#page {
width: 918px;
margin: 0 auto 0 auto;
background-color: rgb(255,255,255);
}

#site_title {
width: 898px;
margin: 0 auto 10px auto;
}

#site_title h1 {
margin: 0 0 0 0;
}

#site_title img {
border: none;
}

#header {
width: 898px;
margin: 0px auto 10px auto;
}

 pageは最初に#が付いているので独自定義です。好きな名前で定義出来ます。width: 918px;は全体の幅です。背景との間に左右10px余白を持たせるため、898pxに20px足した値になっています。

 つまり、以下の赤枠部分を定義しており、両方に10px余白を持たせる定義をしています。

トップページ:ヘッダー作成2

 margin: 0 auto 0 auto;は上下0pxの余白、左右はセンタリングする事を示しています。

 marginは余白の定義で「上 右 下 左」の順で記述します。上の例では左右でautoを指定しているため中央にセンタリングします。これがないとページ全体が左に寄ってしまいます。

 その下のbackground-colorでpage内の背景、つまり上の図で赤で囲った部分の背景を白に設定しています。

 site_titleも独自定義で、例で言うと「キャンプ入門サイト」と題名を記述する部分を定義しています。marginで同様にセンタリングしていますが、下に10px余白を設けています。これは下のヘッダー、つまり画像を載せる部分とくっつかないようにするためです。

 site_title h1で余白を全て0にしているのは、h1は最初から定義されているタグで余白がデフォルトで入ってしまうため、それを0にしています。

 site_title imgではサイトタイトルとして配置する画像の周りに線が表示されないようにしています。下のhtmlでサイトタイトルをリンクするとトップページに行くようにリンクしますが、これがないと画像にリンクを設定した場合、周りに線が表示されてしまいます。

 headerもsite_titleと同様に定義しており、ここが画像を載せる部分です。

トップページヘッダーのhtml作成

 htmlではスタイルシートで定義したpage、site_title、headerをボックスとして配置して行きます。配置イメージは以下の通りで全体を囲うpageを最初に定義し、サイトタイトル(site_title)、画像(header)の順に記述します。

トップページ:ヘッダー作成3
【トップページヘッダーのhtml記述例】
<body>
<div id="page">

<div id="site_title">
<h1><a href="index.html"><img src="image/site_title.png" alt="キャンプ入門サイト"></a></h1> </div>

<div id="header">
<img src="image/header.jpg" alt="キャンプ入門サイトのヘッダー" >
</div>

</div>
</body>
</html>

 実際にブラウザで表示される部分は<body>と</body>の間に記述します。

 pageは全体を囲うため最後の</div>まで閉じません。<div id="site_title">はサイトタイトルを配置しています。<div id="header">は画像を載せる部分です。それぞれ中に<h1>タグでサイトタイトル、<img>タグで画像を表示する記述をした後、すぐに</div>で閉じてボックスが終わる事を宣言しています。

 <a href="index.html">はタイトルをクリックするとトップページに行くようにリンクしています。次に続く<img・・・で画像の場所を指定していますが、altは代替え表示です。画像を表示出来ない、又は表示しないようにしているブラウザではここで定義した文字が表示されます。altは設定しなくてもパソコンでは通常は画像が表示されますが、alt定義は規格で必須になっているため定義しておく事をお奨めします。

 最後の</html>でhtml記述が終わる事を宣言しています。

サイトタイトルの画像作成

 サイトタイトルの画像は好きな文字で作成すればよいと思いますが、1例を示します。

 エクセル等ではワードアートが使えます。これで文字を記述してコピーし、PictBear等のペイントソフトで「ファイル」→「クリップボードを開く」を選択するとワードアートの画像を取り込めます。

 その後、範囲指定で必要な大きさを切り取り保存します。このようにして作成した例としては以下の通りです。

トップページ:ヘッダー作成4

 範囲指定で画像の大きさを指定したい時、ここのデザインでは898px×60pxにしていますが、「選択範囲」→「座標を選択して選択」を選択すると幅と高さを指定出来、その後カーソルで範囲を移動できます。

 PictBearの使い方については「PictBearの使い方」をご参照下さい。

サイトイメージの画像作成

 サイトのイメージである画像はサイトの象徴なので写真等インパクトのある画像を使って下さい。保存先は上の記述例の場合はimage/header.jpgですが、PictBear等で写真を範囲指定して切り出す必要があります。

トップページ:ヘッダー作成5

 このため、写真の中でもサイトをイメージし易い部分を切り出す事が重要です。

ここまでの作成結果

 ここまでのスタイルシートとhtmlをコピーしてスタイルシートをcssフォルダ配下のstyle1.css、htmlをindex.htmlで保存してブラウザで表示すると以下のようになります。

トップページ:ヘッダー作成6

 上記は実際のサイズを縦横半分にしています。

 尚、トップページのhtmlファイル名はindex.htmlをお奨めします。通常、サーバーではドメイン名を入力し、ファイル名を入力しなかった場合、デフォルトではindex.htmlファイルを表示します。このため、ファイル名まで入力しなくてもトップページが表示されるようになります。

前のページデザイン」    次のページトップページ:メイン作成

  • このエントリーをはてなブックマークに追加