未定研 Webサイト制作の会

時間が無さすぎて雑な資料しか用意できませんでした。すみません…

資料や会の中で気になる点・わからない点がありましたら、いつでもどこでもご質問ください。

課題

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つを、適切な場所に含む
    • h1h2以外の見出し要素
    • nav要素
    • section要素
    • article要素
    • aside要素
    • footer要素

4 - 実践的なHTML

次の要件を満たすHTMLファイルをそれぞれ作成し、フォルダsampleに配置してください。

  • 全ファイルについて、課題1の要件をすべて満たす
  • 全ファイルについて、与えられた情報をすべて含む

index.html
  • ページタイトルとして店名(Example Coffeeなど)
  • 店の説明文(Example Coffeeへようこそ!など)
  • navaを共に用いた、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に次の要件を満たす記述を追加してください。

  • 次に示すスタイル指定をすべて適切に含む
    • html要素に対し、background-colorcolorプロパティを指定する

      これらのプロパティの値には、色名RGBの16進表記など、色に関する様々な表記が利用できます。

6 - 基本的なCSS