サイト全体のレイアウトを行う - hiyoko-programingの日記

・コツ

HTMLでサイトを作成する場合のコツは、全体をボックスの集まりとして捉えること。

このサンプルサイトの場合、

全体が大きく4つのボックスから構成されている。

そして、各ボックスの中身もさらに細かいボックスに分けて捉えることができる。

このように、まず全体の構成を把握してから細かい部分を確認していくとよい。

フォルダを作成

デスクトップに、これから作っていくファイルを格納するためのフォルダを作成。

HTML、CSSファイルを作成

「index.html」「style.css」２つのファイルを作成。

HTMLのテンプレート部分を作成

HTMLの最初のhtmlタグやheadタグなどは、どんなHTMLファイルを作成するときも必須。

この共通部分を作成する。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css">  
</head>
<body>
</body>
</html>

ファイル全体をhtmlタグで囲っています。
その中にheadタグとbodyタグで囲まれたブロックがある。

headの中には検索エンジンのプログラムなどが使用するシステム的な内容を、body部分にはコンテンツの中身を書いていく。

サイト全体の構造を確認

上は、サイト全体が大きく４つのブロックから構成されている。
それぞれのブロックの高さに「100vh」という指定があるが、これはブラウザで表示される高さと等しいという意味になる。

サイト全体の大きさと背景色を指定

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
  <link rel="stylesheet" href="style.css">  
</head>
<body>
  <header class="header">
  </header>

  <section class="about" id="about">
  </section>

  <section class="works">
  </section>

  <section class="contact" id="contact">
  </section>
</body>
</html>

style.css

.header {
  height: 100vh;
  background-color: rgba(25, 25, 120, 0.9);
}

.about {
  height: 100vh;
  background-color: #ffffff;
}

.works {
  height: 100vh;
  background-color: #383634;
}

.contact {
  height: 100vh;
  background-color: rgba(25, 25, 120, 0.9);
}

HTMLファイルでは、

headerタグとsectionタグを使ってブロックをつくり、それぞれにクラス名の指定を行なっている。

また、about, contact2つのid指定は後ほどページ内リンクを使用するためのものです。

CSSファイルでは、それぞれのクラスに対して高さと背景色の指定をしている。

HTML5の構造化タグについて

HTMLは今まで何度も改定されて来たが、現在使われているのが5回目の改定版であるHTML5。HTML5では、新たに構造化タグが採用された。これは、ページ全体の構造を表現するタグで、以下のような種類がある。それ以前はdivタグでclass指定をしていたが、簡潔に記述することができるようになった。

タグ名	概要
article	独立したコンテンツであることを示すタグ
section	コンテンツの中の1つの区切りを示すタグ
nav	ページのナビゲーションを表示するタグ
aside	メインコンテンツとは別にサブで表示するタグ
header	ヘッダー（ページの先頭部分）
footer	フッター（ページの末尾部分）