デザイン編

大枠を作る

ウェブページのサイズ

　ウェブページを作るにあたって、まずは大枠を作るところからスタートします。前の前のページ「デザイン編・Webデザインとは」の最後のところを思い出して下さい。ウェブページは、よく使われるパソコンやスマホなどの端末を想定してデザインされますが、ベースとなるのは画面の大きさです。
　昔はパソコンが中心でしたし、画面サイズ(解像度)も800×600ぐらいが主流だった時代もありましたが、だんだん細かく、ワイドになって、今では1920×1080とか1366×768ぐらいが中心。ウェブページもそれを想定して作ります。とはいえ、もっと小さい画面で利用している利用者もいますので、横幅950～1000pxぐらいで作るのがベターです。

準備

　それでは、作業ファイルを作成しましょう。このサイトでずっと勉強してきた人は、既に「webkiso」フォルダに作られているひな形HTMLファイル「hina2.html」とテンプレートCSSファイル「temp.css」を使いましょう。
　「hina2.html」をエクスプローラーで選択し、[Ctrl]+[c]→[Ctrl]+[v]でコピペして名前を変えて「ren21.html」とします。続いて「temp.css」も同様にコピペして「ren21.css」と名前を変更します。
　このページに突然来た人や「ひな形ファイルやテンプレファイルがない！」という人は「開発環境準備編・ひな型ファイル」と、「CSS基礎編・テンプレCSSファイル」を見て作るか、以下に「ren21.html」と「ren21.css」の全文を貼っておきますのでコピペして作って下さい。新たに作るときは、それらのページにも載ってますが、UTF-8(unicode)で保存することを忘れずに。TeraPadの場合は、メニューバーの「ファイル」から「文字/改行コード指定保存」を選択→小さいウインドウが表示されたら「文字コード」を「UTF-8N」として「OK」ボタン→「名前を付けて保存」画面が表示されたら作業フォルダ「webkiso」(ない人は作りましょう)の中にファイル名を付けて保存します。UTF-8(unicode)で保存しないと文字化けしますよ。

　　ren21.html
　　

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>〇〇のページ</title>
<link rel="stylesheet" href="ren21.css">
</head>
<body>
ここにコンテンツ。

</body>
</html>

　　ren21.css
　　

@charset "UTF-8";
body {
    font-weight: normal;
}

　意味は分かると思いますが、「ren21.html」は、HTML5の基本タグと、5行目<title>タグ、6行目の<link>タグと、あとは本文という構成です。6行目の<link>タグのhref属性が、ren21.cssになっているので確認して下さい。
　それから「ren21.css」も、テンプレファイルですので、文字コード宣言と、bodyタグへの設定ということで「font-weight(文字の太さ)をnormal(普通)に」という意味のない設定が書かれています。これから意味のあるものにしていきます。

CSSの初期化

　作業ファイルができたら、最初にCSSの初期化を行います。
　このサイトで勉強してきた人で、記憶力の良い人なら覚えているはず。「CSS編・基本の書き方」でやった「全要素セレクタ」のところで説明しました。全要素セレクタは「* { ～ }」というやつです。
　これまでに見てきたように、各種のタグにはブラウザごとにスタイルが指定されています。例えば、大見出しの<h1>タグは、文字を太く大きく表示するとか、段落の<p>タグは、他の段落との間に〇〇ピクセル余白を入れるとか、そういうやつです。ただ、このような初期設定は、独自のウェブデザインをするときには邪魔になりますし、ブラウザやバージョンによって少しずつ違うのでややこしい。そこで、開発者がCSSの最初のところで、明示的にスタイルを指定して初期化しておけばオールOK、ということでやっておきましょう。
　CSSファイル「ren21.css」を次のように編集しましょう。各行にある「/* ～ */」はコメントなので入力してもしなくても問題ありません。説明が入れてあります。CSSのコメントについても「CSS編・基本の書き方」にあります。忘れた人は要チェック。

　　ren21.css
　　

@charset "UTF-8";
* {
	margin: 0px; /* 外余白0px */
	padding: 0px; /* 内余白0px */
	border-width: 0px; /* 枠線0px */
	text-decoration: none; /* 文字装飾なし */
	font-size: 20px; /* 文字サイズ20px */
}

　各行のコメントを見てもらえばわかりますが、まず「margin: 0px;」「padding: 0px;」「border-width: 0px;」は、「CSS編・ボックスモデル」でやったやつですね。全要素セレクタなので、<h1>タグも<table>タグも<img>タグも<p>タグも、すべてのボックスの外余白、内余白、枠線をすべてゼロにしています。特に余白は色を着けないと目に見えないので、初期設定が残ってるとややこしい。サッパリとゼロとしておけば、自分で余白を指定しない限り余白はできませんので、混乱することがありません。
　それから「text-decoration: none;」と「font-size: 20px;」は、いずれも文字に関する設定です。文字装飾は、下線とかナナメ文字とかです。例えば、リンクの設定をすると、ブラウザによっては下線がついたりしますが、そういう勝手を許さない、というのがこの設定です。フォントサイズは、そのまま文字の大きさですが、20pxという設定は「キモチ大きめ」というサイズ。「細かい情報をたくさん伝える」というよりも「少なめの情報を見やすく伝える」サイズですね。
　これを保存し、ren21.htmlをブラウザで開きます。まだ何もありません。上のHTMLファイルのサンプルの通りなら、ブラウザの左上の端っこに「ここにコンテンツ。」と表示されるはずです。わかりにくいと思いますが、余白なく少し大きめの文字になっていると思います。
　というわけで初期化は完了。次に進みましょう。

コンテナボックスの作成

　ウェブページの大枠を作るために、ここではコンテナボックス(container box)を使ったやり方を確認します。
　実は、ウェブページの大枠は、ページを構成する各ボックスに大枠の設定をすることでも実現します。前の前のページ「デザイン編・Webデザインとは」で見たように、ウェブページは複数のボックスを組み合わせて作られますが、その各段のボックスを同じ横幅にすれば、大枠は定まります。つまり、一番上のボックスの横幅を960pxにして、次の段のボックスを960pxにして・・・一番下のボックスの幅を960pxにしてとすれば、横幅960pxのページの完成、というわけです。
　慣れてくればこれでもいいわけですが、「できるだけ簡単に」をモットーとしているこのサイトとしては、「シンプル・イズ・ベター」ということで、ページ全体を取り囲む大きなコンテナボックスを作る方法でやっていきます。
　コンテナボックスは、前のページ「デザイン編・デザインのタグ」で確認した<div>～</div>タグを使います。IDを設定して次のように設定します。ID名は「container」がよく使われますが、「con」でも「kontena」でも、CSSファイルの指定と一致していれば、なんでも構いません。
　またデザインカンプを見ると、大枠(960px)の外はブラックです。ので、その設定もしましょう。つまりは、一番外側は<body>タグのスタイルです。

SPONSORED LINK

　というわけで、以下の通り「ren21.html」と「ren21.css」を編集しましょう。編集したのは、以下のイメージの反転表示の箇所です。編集した部分のテキストも貼っておきます。場所を間違えないようよく見て編集して下さい。

　　

　　ren21.html(bodyタグ内以外は省略)
　　

<div id="containar">
ここにコンテンツ。

</div>

　続いてCSSファイルの方です。

　　

　　ren21.css(追加分のみ)
　　

body {
	background-color: black; /* 背景色を黒 */
}
#container {
	width: 960px; /* 横幅960px */
	margin: 0px auto 0px; /* 外余白中央寄せ */
	background-color: white; /* 背景色を白 */
}

　説明します。まず「ren21.html」の方。追加したのは<div>～</div>タグです。そしてこの<div>タグには「id="container"」とID名がつけられています。「container」というID名は、コンテナ＝入れ物という意味で、ウェブページの大枠を設定する<div>タグのID名としてよくつけられる名前です。
　そしてその<div>～</div>タグに「ここにコンテンツ。」と入力されています。今はこれだけですが、この後、ここにコンテンツを追加していきます。
　次に「ren21.css」です。こちらはまず<body>タグに、背景色を黒にする設定をしています。デザインカンプのイメージで、ページの大枠の横幅960pxの外側が黒色になっていたのでこの設定があります。
　続いて「#container」への設定、つまり「id="container"」へのスタイル設定があります。IDセレクタでしたね。「CSS編・基本の書き方」を思い出して下さい。もちろんこれは<div id="container">への設定になりますので、大枠の設定です。
　内容を見ると、まずコメントで説明されている通り「width」で横幅を960pxにしています。これはデザインカンプ通り。
　次に「margin: 0px auto 0px;」として、上の外余白を0px、左右の外余白を自動、下の外余白を0pxに設定しています。この書き方、3つ値を設定した場合は「上、左右、下」の設定ができます。1つだけ「margin: 10px;」と指定すると「上下左右の外余白が10px」になります。「margin: 10px 20px 30px 40px;」と4つ設定すると、上から時計回りに「上10px、右20px、下30px、左40px」と指定できます。この設定は「margin」だけでなく、「padding」(内余白)と「border」(枠線)でも使えます。
　そして「margin」の左右に「auto」(自動)が設定されている場合、左右の外余白が自動調整されて中央表示されるんでしたね。覚えてますか？「CSS編・ボックスモデル」を確認しておいて下さい。
　そして最後、「background-color」で背景色を白にしています。この設定は、実はプログラム上必要ないのですが、<body>タグに背景色を黒にする設定をしてしまったので、何も見えないため、白に設定しただけです。
　完成したらテキストエディタで保存して「ren21.html」をブラウザで更新してみましょう。まだほとんど真っ黒で、横幅960ピクセルの白い領域に文字、という結果になります。

　　

　これで大枠できたのか不安になるかもしれませんが大丈夫。できてます。「ここにコンテンツ。」と書かれた白い帯は、横幅960pxの<div>ボックスです。今は「ここにコンテンツ。」という一行の文字列しか入ってないので、横に1行分の細長いボックスになっているだけです。<div>ボックスの中身が増えれば大枠らしくなってきます。

　次からはこの<div>ボックスの中を作りこんでいきましょう。

>>次のページへ進む

HTML＆CSS 入門、入門、超入門！