HTML・CSSを実際に記述していこう！～ヘッダー部分を作成～

HTMLを実際に書いてみよう！！
～HTMLの記述例と実際のコード～
＜①記述の宣言からヘッダーの記述ついて＞

こんにちは、syojinnです。

『HTMLとは』から始まり前回はタグについて話をさせていただきました。

今回はWebサイトを実際に作成していきましょう！！

いきなり、サイトを作成しようとしてもすぐにできないので、ここではこれから何回かに分けて一つずつ順番にやっていきましょう！！

１．HTMLを宣言する
2.<head>タグ内を記述していく
３．<body>タグ内に記述する
1. ３－１．ヘッダーを作る（HTML編）
2. ３－１．ヘッダーを作る（CSS編）
  1. ３－１－１．CSSについて
  2. ３－１－２.CSSを記述していく
４．まとめ

１．HTMLを宣言する

まず、最初に『今からHTMLを記述するよ～！！』ということを、コンピューター（パソコン）に言ってあげなければいけません。

コンピューターは１から１０まで言ってあげないと理解してくれません！！

かなり融通が利かないのですが、勝手に判断されてもこちらとしても困るのでこれはこれで、いいのではないかと思います。

宣言するには、HTMLの基本的なタグで説明した＜！DOCUTYPE html>というタグを使用します。

これは『今からHTMLを書いていきますよ』という宣言を表します。

実際、HTMLを記述するテキストエディタ（私の場合はVSコードというものを使っています）には、サポート機能がついていますのですべて書く必要はありませんが、覚えておいて損はないので、『こんな感じで書くんだな～』程度に理解していただければよいかと思います。

次に、<head>タグを記述します。この中は実際にサイトには表示されないウェブサイトの情報を入力していきます。

2.<head>タグ内を記述していく

次に<head>タグの中身を記述していきます。

<head>の中には、まず<meta>タグが入ります。

この<meta>タグは使用する文字情報などが入ります。

使用例

<meta charset = utf-8>

これは、これから書くHTMLの文字コードを表しています。

なんでこんなことを書くんですか？

ソフトウェアの世界には様々な文字コードが存在しています

ですから、指定してあげないとコンピューターが困って

しまいます。

”UTF-8″は現在最もポピュラーな文字コードとなっておりますので、大概はこの文字コードの指定で大丈夫です。

次に<title>タグを用いてタイトルを表示させて行きます。

タイトルは、ページのタグに表示される文字の事でこちらは、前述した<head>タグ内は表示されないといった決まりの中では特殊なタグになります。

次に、<link>タグを用いてCSSやJavaScriptを読み込むことをします。

具体的な記述方法は・・・

CSSの場合

<link rel = "stylesheet" href = "style.css">

JavaScriptの場合

<body>
<!--HTMLの記述が入ります-->
<script type="text/javascript" src="script.js"></script>
</body>

JavaScriptの場合＜head>タグ内に書いてもいいのですが、＜head>タグ内に記述すると読み込みの速度が落ちてしまうので、</body>タグの直前に記述することをおススメします。

ここまでくると次はいよいよサイトの中身に当たる部分に取り掛かります。

３．<body>タグ内に記述する

いよいよ、実際にサイトに表示される部分を作っていく事になります。

最初から最後まで一気に書こうとすると、自分でどこを作っているのかわからなくなってしまいますので、一つずつサイトを分解して作成していく事をおススメします。

何事も、一度にすべてをするのではなく一つずつ積み重ねていくと自分の立ち位置が把握できていいと思います。

それでは、さっそく始めて行きましょう！！

３－１．ヘッダーを作る（HTML編）

それではまず、Webサイトの一番上部にある『ヘッダー』を作っていきましょう！！

『ヘッダー』とは、サイトの上部にあるサイト名（又は企業サイトなら企業のロゴなど）とサービスコンテンツが並んでいる部分の事を言います。

ヘッダーを作る際にまず、HTMLタグ　でも話した<header>タグを使用してタグで囲まれた部分をサイトの『ヘッダー』部分にあたることをコンピュータに教えます。

因みに、HTMLを記述する上であまり固いルールはありません。

ですが、後から見返したときや複数人でサイトを作成する場合に「ここは何が書かれているのか？」とわかるようにするためにも、ある程度のタグの使い分けは必要だと思います。

（すべて<div>タグで書いてしまうと後で見返したときにかなりわかりづらくて苦労しますので・・・）

記述例

<body>
 <header>
   <h1>サイトタイトル</h1>
   <ul>
     <li><a href="#">コンテンツ</a></li>
     <li><a href="#">情報</a></li>
     <li><a href="#">ギャラリー</a></li>
     <li><a href="#">お問い合わせ</a></li>
　  </ul>
 </header>
<!--以下サイトコンテンツが入ります-->
</body>

さあ、記述が終わってブラウザで確認したら・・・あら？全然デザインがなっていない・・・と思った方、これからCSS（stylesheet)でデザインを作っていきますので、心配なさらないでください。

実際に上記の記述をブラウザに表示させると、こうなります。

このようにHTMLだけを記述してブラウザに表示しても、文字の羅列になっているだけなのはお分かりいただけたでしょうか？

じゃあサイトのようにするにはどうすればいいんですか？

そのように表示するためには、『CSS』というものを

記述してあげなければいけません！！

それでは、次にCSSについて見て行きましょう！！

３－１．ヘッダーを作る（CSS編）

それでは、CSSについてみていきましょう！！

CSSって聞いたことはあるけど何なの？

CSSとは、簡単に言うとHTMLで記述したものを、

私たちが『普段目にしているサイトのデザイン』

のようにしてあげる言語のことをいいます。

　CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。
HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
引用：HTMLクイックリファレンス

それでは、これから先ほど作成したHTMLにCSSを使ってデザインを当てて行きましょう！！

CSSについては別で詳しく説明していきますので、今回はこんな感じになるんだ～

程度に見て頂ければいいと思います。

３－１－１．CSSについて

それでは、CSSを記述していきます。

CSSの記述には、HTMLを記述した所に直接記述する方法と別のところに記述してHTMLの方で読み込む方法が有りますが、

今回は、別のところで記述してHTMLで読み込む方でいきたいと思います。

理由としては、直接記述する方はHTMLの記述量が少ない場合はいいのですが、

記述量が多くなったり同じスタイルを複数のタグやクラス等に当てたい場合には、別ファイルに記述してHTMLで読み込んだ方が、後々スタイルを変更する際にも簡単に出来るという利点があるからです。

３－１－２.CSSを記述していく

先ずCSSを記述する上で憶えておかなければならないのが、『プロパティ』です。

プロパティに関しては、別でお話しすることにしまして基本原則として、

タグ・ID・Class｛　プロパティ：値；｝といった風に指定してあげることで、デザインを作っていきます。

先に記述したHTMLでは、ブラウザに表示した際に左寄りで上から順番に並んでいただけでした

これをサイトのヘッダーのようにデザインをつけていくようにするにしていきます。

記述例を出すと

記述例

h1 {
  float: left;
}
ul {
  float: right;
}
li {
  float: right;
  list-style: none;
  padding-left: 15px;
}
li a {
  text-decoration: none;
  color: black;
}

このように記述することが出来ます。

記述したものを実際に表示してみると