課題
1 - 有効なHTML
次の要件を満たすHTMLファイルindex.htmlを作成し、フォルダkadai1に配置してください。
DOCTYPE宣言を含む- 次に示す要素すべてを、適切な場所に含む
html要素head要素body要素title要素h1(見出し)要素
html要素のlang属性に、jaを指定する。-
<meta charset="utf-8">と<meta name="viewport" content="width=device-width, initial-scale=1.0">を、head内に含む
2 - 基本的なHTML
まず、課題1の要件をすべて満たすように、index.htmlanother.htmlを作成してください。
作成した2つのファイルは、フォルダkadai2に配置してください。
さらに、index.htmlでは次の要件を満たすようにしてください。
- 次に示す要素すべてを、適切な場所に含む
h1以外の見出し要素を少なくとも1つp(段落)要素- 順序なしリスト要素 または 順序付きリスト要素
- 適当な画像
another.htmlへのリンク<!-- 例 --> <a href="./another.html">リンク<a>
3 - 意味のあるHTML
次の要件を満たすindex.htmlを作成し、フォルダkadai3に配置してください。
- 課題1の要件をすべて満たす
- 次に示す要素すべてを、適切な場所に含む
header要素main要素h1要素h2要素
- 次に示す要素のうち少なくとも1つを、適切な場所に含む
h1とh2以外の見出し要素nav要素section要素article要素aside要素footer要素
4 - 実践的なHTML
次の要件を満たすHTMLファイルをそれぞれ作成し、フォルダsampleに配置してください。
- 全ファイルについて、課題1の要件をすべて満たす
- 全ファイルについて、与えられた情報をすべて含む
index.html
- ページタイトルとして店名(
Example Coffeeなど) - 店の説明文(
Example Coffeeへようこそ!など) navとaを共に用いた、menu.htmlabout.htmlへのナビゲーション
menu.html
- ページタイトルとして
メニュー - 商品名・商品説明・価格を含むメニュー(
divspanを用いてかまいません)。以下例:- コーヒー・オリジナルブレンドのコーヒーです・500円
- カフェラテ・ミルクの甘みが際立つカフェラテです・650円
about.html
- ページタイトルとして
店舗情報 - 住所・営業時間・定休日を含む店舗情報(
divspanを用いてかまいません)。以下例:- 住所:福岡県福岡市南区塩原4-9-1
- 営業時間:10:00〜20:00
- 定休日:水曜日
5 - 有効なCSS
まず、課題4で作成した3つのファイルのheadに、次のlink要素を追加してください。
<link rel="stylesheet" href="style.css">
次に、以下の記述を含むCSSファイルstyle.cssを作成し、フォルダsampleに配置してください。
* {
margin: 0;
padding; 0;
box-sizing: border-box;
}
さらに、style.cssに次の要件を満たす記述を追加してください。