IT03-11 Webページを作ろう(HTML+CSS) ｜スターAI・情報塾教材

情報活用編

第4章「画像とデザイン」

IT03-11

Webページを作ろう(HTML+CSS)

Webページを作ろう

HTMLとCSSを使ってWebページを作成します。最初にWebページの構成を理解しましょう。

スライドの学習内容

1.Webページのデザイン
2.Webページのレイアウト
3.コンテンツエリア
4.レイアウトとHTMLの構造

1.Webページのデザイン

これから作成するWebページのデザインを確認します。前回のレッスンで学習した「ヘッダー」、「グローバルナビゲーション」、「コンテンツ」、「フッター」がどのように配置されているか確認しましょう。

作成するWebページデザイン

このデザインは、「グローバルナビゲーション」に当たる部分が「ヘッダー」の中にデザインされていることに気付きましたか？

2.Webページのレイアウト

作成するWebページのデザインは、大きく分けて「ヘッダー」、「コンテンツ」、「フッター」の3つのブロック(オレンジの枠線)に分けられています。

それぞれのブロックを次のように呼ぶことにします。

ヘッダー　:　header
コンテンツ:　main
フッター　:　footer

デザインを見て、各ブロックにどのような情報が入るか整理しましょう。

各ブロックの説明

headerブロック

「ロゴマーク」、「グローバルナビゲーション」、「お問い合わせボタン」を配置します。

「headerタグ」でブロックを囲みます。

mainブロック

コンテンツ（Webページの本文）を配置します。

今回は次のエリアに分けることができます。

メインビジュアル(#mainvisual)エリア
ニュース(#news)エリア
アバウト(#about)エリア
キャラクタ(#character)エリア
プロフィール(#profile)エリア

「mainタグ」でブロックを囲みます。

footerブロック

コンテンツの下に来るブロックです。

「ロゴマーク」、「企業情報」を配置します。

「footerタグ」でブロックを囲みます。

各グロックの「headerタグ」、「mainタグ」、「footerタグ」は、必ずこのタグを使わなければならないものではありません。

ただし、これらのタグを使用することにより、だれが見てもわかりやすい構成にすることができます。

3.コンテンツエリア(mainブロック)

コンテンツエリアには、Webページで伝えたい内容を記述します。

コンテンツエリアは「mainタグ」で囲まれることが多いです。

mainブロックのコンテンツは次のエリアが配置されます。

メインビジュアル(#mainvisual)エリア

Webページのイメージを表す画像。
ニュース(#news)エリア

ニュースを表示するエリア。

タイトルがある一つのまとまったコンテンツ。
アバウト(#about)エリア

サイトの目的を表すエリア。

タイトルがある一つのまとまったコンテンツ。
キャラクタ(#character)エリア

ゲームの主要メンバー紹介エリア。

タイトルがある一つのまとまったコンテンツ。
プロフィール(#profile)エリア

制作者の紹介を表すエリア。

タイトルがある一つのまとまったコンテンツ。

参考

mainブロックの各コンテンツのエリアは「section(セクション)タグ」もしくは「div(ディブ)タグ」で囲んで作成します。

「sectionタグ」と「divタグ」は次のように使い分けます。

sectionタグ

タイトルがある、まとまった要素を囲む場合に利用します。
divタグ

特に意味を持たず、デザインを整えるために利用します。

4.レイアウトとHTMLの構造

HTMLファイルのタグは次の3つに大別されます。

htmlタグ

HTML全体を囲むためのタグです。すべてのタグ要素は<html>～</html>の中で記述されます。
headタグ

HTMLファイルの属性を指定します。属性情報のため、このタグの中で書かれたものはWebページには表示されません。外部ファイルの読み込み指定なども<head>～</head>の中で記述します。
bodyタグ

Webページに表示する内容を<body>～</body>の中で記述します。

Webページに表示される「header」、「main」、「footer」、「#mainvisual」、「#news」「#about」、「#character」、「#profile」をHTMLのタグを使って表すと次のような構造になります。

ポイント

・HTMLではタグに「#」から始まるid属性を付けることができます。

・id属性に名前（以降、id名とする）を付けることにより、CSSやJavaScriptで使用できるようになります。

　(mainの各エリアにはid名を付けることが多くあります。)

・id名はWebページ内では一意になります。

一意とは、同じものは二つ以上なく一つだけという意味です。また「#」はHTMLではハッシュタグではなく、id名を指しています。

次のアクティビティで、実際に上記のデザインと同じページを作成しましょう。

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる