前回は画像の挿入方法まで実践しました。

前回の知恵ノートはコチラ
http://note.chiebukuro.yahoo.co.jp/detail/n150386

それでは今回は、もう少し凝ったWebサイトの作成に

焦点を合わせてみましょう。

ですが、まずはこれまでのあらすじから。

 

Step1

これまでのあらすじ

Webサイトを作るのには、PCさえあれば誰でも作れます。

きちんとしたところにきちんとした情報を入れることにより、

テキストを超えたテキスト(HTML)の効果が得られるのです。

HTMLで骨組みを作り、CSSで装飾をしながらWebサイトを作りこんでゆきます。

アンカーリンクでほかのWebサイトと作成中のページを結び付けます。

アンカーリンクには文字だけでなく、画像も挿入させることができます。

と言うことでざっと流しましたが、こんなところでしょうか。

 

Step2

ページを作りこんでみよう

これまで作ったWebサイトは、基礎の基礎の段階であるため、

実用化するには程遠いものです。

もちろん現状でも実用化できなくもありませんが、

どうせならもう少し凝って、着飾らせてから公開したいものです。

着飾るために必要なのは、衣装の準備ですね。

今はさながら、手持ちの(HTML内部の)衣装(CSS)だけで

何とかやりくりしようと頑張っている感じです。

まずはこれを、手持ちでない(HTML外部の)衣装(CSS)を使うようにすることと、

そのために必要な準備をしましょう。

 

Step3

ディレクトリを作成してファイルを保管しよう

各種ファイルは、散らばっているとどれが何のファイルか判別しにくくなりますので、

フォルダを作成して、決められたものは決められた場所に

保管するようにしましょう。

まず、Webサイトそのものを保存するために、適当な名前を付けた

フォルダを作成しましょう。

その適当な名前を付けたフォルダ(以下ディレクトリ)のことを、Webの世界では、

「ルートディレクトリ」と呼びます。

それ以外は、○○ディレクトリ(○○にはディレクトリ名が付きます)と呼びます。

ルートディレクトリに、前回作成していたHTMLファイルを保存しましょう。

ルートディレクトリに、画像を保存させるためのディレクトリを作成しましょう。

何と名付けるかは任意ですが、任意なりにルールは存在します。

ディレクトリ名を付ける際は、必ず半角英数で名付けることが決まっています。

ただし、ルートディレクトリに関しては、この限りではありません。

画像を保存するためのディレクトリ名として多いのが、imgやimagesなどです。

それでは今回はWebサイト作成訓練もかねておりますので、

画像を保存するためのディレクトリ名は、imgとしましょう。

次にCSSを外部保管するためのディレクトリを作成しましょう。

名前はやはり任意ですが、ここではcssと付けましょう。

ディレクトリは必要に応じて適宜作成しましょう。


 

ポイント

  • ディレクトリを分けることで、整理整頓ができてファイルが管理しやすくなります。

Step4

CSSを外部に配置しよう

前回作成したCSSの部分を、外部ファイルとして保存し、

HTMLとCSSを完全に分離させてみましょう。

HTMLとCSSを分離させるメリットとしては色々とありますが、

 

①HTMLが長くならずすっきり見渡せる

②CSSの使いまわしができる

③複数ページが一括で編集できる

 

と言うのが主になります。

CSSそのものはHTML同様テキストファイルですので、

これまでと同様に、メモ帳を使用して作成しましょう。

メモ帳に以下の分を書きます。

 

p.col {
color: blue;
}

 

名前を付けて保存します。

ここでは、どこのHTML用のCSSか分かりやすくするため、

index.cssと名前を付けましょう。

保存先は、先に作成したCSSディレクトリを選択します。

保存が完了したら、index.htmlのほうを編集しましょう。

 

変更前

<html>
<head>
<title>Hello world!</title>
<style type="text/css">
<!--
p.col {
color: red;
}
-->
</style>
</head>
<body>
<p class="col">

Hello World!
</p>

<a href="http://www.yahoo.co.jp/" target="_blank"><img src="http://k.yimg.jp/images/top/sp/logo.gif" alt="Yahoo!JAPAN"></a>

</body>
</html>

 

変更後

<html>
<head>
<title>Hello world!</title>

<link rel="stylesheet" type="text/css" href="css/index.css" />←削除&追加
</head>
<body>
<p class="col">

Hello World!
</p>

<a href="http://www.yahoo.co.jp/" target="_blank"><img src="http://k.yimg.jp/images/top/sp/logo.gif" alt="Yahoo!JAPAN"></a>

</body>
</html>

編集が完了したら、保存して開いてみます。

Hello World!の色が青に変われば成功です。

色が黒に戻っていた場合、上記で作成したCSSファイルが、

CSSファイルとなっていないか、または保存先を間違えている可能性があります。

その場合は、先に作成したCSSファイルを確認してみましょう。 


ポイント

  • 保存先をきちんと設定すれば表示されます。
  • 保存先がきちんと設定されていない場合は正常に表示されません。

Step5

デザインを考えよう

Webサイトを作成する上で、デザインを考えるのは基本中の基本です。

まずはどのようにしたいかデザインを紙などに書き、

そのように表示されるようにHTMLを組み上げてゆきましょう。

ここでは、先のHTMLとCSSファイルを汎用性の高いデザインに書き換える作業をします。

先のCSSファイルを開き、以下のように変更します。

なお、/*と*/は実際には表示されないコメントとして扱われる設定です。

このコメントについては、書き写しても書き写さなくても結果は一緒ですが、

あとで見たときにわかりやすいため、書き写されてみてはいかがでしょうか。

 

/* ここからサイト全体に関わる設定を行います。 */

/* 本文の部分の設定です。widthは横幅を、marginは左右の配置関係を設定します。

marginを0 autoにすると、左右が均等割りされ、サイト全体が画面中央に表示されます。

この設定は、横幅が決められている場合にしか適用できません。 */

 

body {

width: 800px;

margin: 0 auto;

}

 

/* 画像ファイルの取扱いの設定です。画像周囲の青い枠を消します。 */

 

img {

border: none;

}

 

/* リスト(箇条書き)タグに自動付与されるマーカー(・←こんなの)を削除する設定です。 */

 

ul {

list-style-type: none;

}

/* ここまでがサイト全体に関わる設定です。 */

/* ここから個別データの設定です。 */

/* Pタグにtopというクラスが割り当てられているものに対しての表示変更設定です。

先のwidthのほかに、高さを取り決めるheightが含まれています。

また、text-align: centerにより、文字の横列が中央配置になります。

font-sizeはテキストの文字サイズを変更、font-weight: boldは太字にする設定です。 */

 

p.top {

width: 800px;

height: 150px;

text-align: center;

font-size: 20px;

font-weight: bold;

}

 

/* リストタグにnavigationというクラスが割り当てられているものに対しての表示変更設定です。

backgroundを付与すると、背景色などの変更ができます。

float: leftを付与すると、本来箇条書きであるはずのリストが、横配置になります。 */

 

li.navigation {

background: black;

width: 100px;

height: 25px;

float: left;

text-align: center;

}

 

/* リスト内のアンカーリンクに対する設定です。

colorを付与することにより、文字色を変更します。 */

 

li a {

color: white;

}

 

/* divタグにmainというクラスが割り当てられているものに対しての表示変更設定です。

clear: both;を付与すると、リストで設定していた回り込みを解除します */

 

div.main {

clear: both;

width: 800px;

text-align: center;

}

 

CSSの内容をすべて書き換えたら、上書き保存を行います。

次にHTMLファイルを開いて、以下のように変更します。

 

<html>
<head>
<title>サイトサンプル</title>

<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<p class="top">

ここに画像等を埋め込みます。

</p>

<ul>

<li class="navigation"><a href="">リンク先1</a></li>

<li class="navigation"><a href="">リンク先2</a></li>

<li class="navigation"><a href="">リンク先3</a></li>

<li class="navigation"><a href="">リンク先4</a></li>

<li class="navigation"><a href="">リンク先5</a></li>

<li class="navigation"><a href="">リンク先6</a></li>

<li class="navigation"><a href="">リンク先7</a></li>

<li class="navigation"><a href="">リンク先8</a></li>

</ul>

<div class="main">

<p>

このサイトは~以下略~<br />

この調子で色々と試行錯誤されてみるのも良いでしょう。

</p>

</div>

</body>
</html>

 

書き換えが完了したら、上書き保存し、確認してみましょう。

成功するとこんな感じになっています。

 表示サンプル

 

ポイント

  • Webサイトを作るのに最も重要なのは、デザインを考える力です。
  • デザインが決まらなければ、いつまで経ってもWebサイトは完成しません。
  • 一度デザインを紙等に書き起こすと、イメージがつきやすいかもしれません。

Step6 

各ポイントに背景画像等を埋め込もう

背景色が白のままだと、WEBサイトそのものに味気がありません。

そこで、CSS内に背景色や背景画像を挿入することにより、

既存のHTMLを操作することなく、同じCSSを適用させている

すべてのページに対して、背景を適用させてみましょう。

一般的に背景は、全体に設定するのであればbodyに設定します。

それではindex.cssを開きます。

 

body {

background: #fdd url("../img/背景画像のパス");←追加

width: 800px;

margin: 0 auto;

}

 

img {

border: none;

}

 

ul {

list-style-type: none;

}

 

p.top {

width: 800px;

height: 150px;

text-align: center;

font-size: 20px;

font-weight: bold;

}

 

li.navigation {

background: black;

width: 100px;

height: 25px;

float: left;

text-align: center;

}

 

li a {

color: white;

}

 

div.main {

clear: both;

width: 800px;

text-align: center;

}

 

background: #fdd;とすれば、カラーコード#ffddddの色を背景に指定できます。

#33ffaaのような2桁ずつ同じ英数が並ぶカラーコードは、#3faなどと略せます。

また一部の色については、カラーネーム(赤ならred、銀ならsilver等)も使えます。

カラーネームの際は、カラーコードのような#は必要ありません。

カラーコードについては、以下のサイトを参考にされると良いでしょう。

http://www.finitojapan.com/cltable.html

 

background: url("../img/背景画像のパス");とすれば、指定した画像を

背景画像として使用できます。

何らかの拍子に画像が表示されなかった場合、代わりに背景色を

表示させることもできます。

その際は、background: #fdd url("../img/背景画像のパス");と

記載します。

背景画像の繰り返しを制限させたい場合は、

background: #fdd; url("../img/背景画像のパス") no-repeat;

とすれば、背景画像の繰り返しを一切禁じる設定に、

 no-repeatの代わりにrepeat-xを入れると、横方向のみの

繰り返しに、no-repeatの代わりにrepeat-yを入れると、

縦方向のみの繰り返しになります。

  

ポイント

  • 背景の指定は、backgroundを使いましょう。
  • 色と画像は同時に設定できます。
  • 色と画像を同時に設定すると、画像が優先して画面内に表示されます。
  • パスの指定はCSSの配置場所基準で行います。
  • CSSを配置しているディレクトリ基準でパスを記述しましょう。


HTMLの基礎の紹介と言うことで、本記事はこれにて終了いたします。

閲覧いただきました皆様、誠にありがとうございました。

質問等がございましたら、アドバイスから一言いただければ、

あとがきにお返事を記載いたします。

お返事を書かせていただきましたら、ありがとうを送信いたしますので、

そちらをお返事の有無の参考とされてくださいませ。

 

あとがき

下書き保存の段階から間違えて投稿してしまい、

完成前にご覧いただきました皆様にはご迷惑をおかけいたしました。

この場を借りてお詫び申し上げます。

2013/04/01追記

なぜかこの知恵ノートに限り、不必要な改行が入っておりました。

現在は修正を行い、正常に閲覧いただけます。

 

以下はアドバイスに寄せられました質問に対する回答となります。

 

現在寄せられている質問はございません。

このノートのライターが設定した関連知恵ノート

  • WEBサイトの作成を考えておられる方へその1
  • 自作Webサイトサンプル集(順次追記)