MENU
日本経済大学
  1. ホーム
  2. Webサイト作成A
  3. Webサイト作成さくせいA（第だい07回かい）

Webサイト作成さくせいA（第だい07回かい）

Webサイト作成A
目次

授業じゅぎょうの準備じゅんび

  • ヘッドホンやイヤホンは耳みみからはずしてください
  • ペットボトル以外いがいの飲み物のみものを教室きょうしつに持ち込むこむことはできません
  • Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

前回ぜんかいの復習ふくしゅう

Webサイト作成さくせいA（第だい06回かい）

前回ぜんかいの知識ちしき問題もんだい

  • HTMLタグについて、正しいただしいものはどれですか
    • HTMLタグでは「文書ぶんしょの構造こうぞう」を書きます
    • HTMLタグでは「文書ぶんしょのデザイン」を書きます
    • HTMLタグでは「文書ぶんしょの内容ないよう」を書きます
    • HTMLタグは「開始かいしタグ」だけで書きます
    • HTMLタグは「全角ぜんかく」で書きます
  • ＜html＞について、正しいただしいものはどれですか
    • 文書ぶんしょのルート
    • 文書ぶんしょの設定せってい
    • 文書ぶんしょのコンテンツ
    • 開始かいしタグと終了しゅうりょうタグをセットで記述きじゅつする
    • 文書ぶんしょの内容ないようを記述きじゅつすることはできない
  • ＜head＞について、正しいただしいものはどれですか
    • 文書ぶんしょの設定せってい
    • 文書ぶんしょのルート
    • 文書ぶんしょのコンテンツ
    • 文書ぶんしょのタイトル
    • 文書ぶんしょの段落だんらく
  • ＜body＞について、正しいただしいものはどれですか
    • 文書ぶんしょのコンテンツ
    • 文書ぶんしょのルート
    • 文書ぶんしょの設定せってい
    • 文書ぶんしょの段落だんらく
    • 文書ぶんしょのタイトル
  • ＜title＞について、正しいただしいものはどれですか
    • 文書ぶんしょのタイトル
    • 文書ぶんしょのルート
    • 文書ぶんしょの設定せってい
    • 文書ぶんしょのコンテンツ
    • 文書ぶんしょの段落だんらく
  • HTMLファイルの拡張子かくちょうしはどれですか
    • .html
    • .txt
    • .htm1
    • .jpg
    • .pdf

テキストの配布はいふ

本日ほんじつのテキストを配りくばります。

  • テキストを受け取ったら、学籍番号がくせきばんごうと名前なまえを書いてください
  • テキストは捨てすてないでください。次回じかい以降いこうも持ってきてください

VS Codeの便利べんりな使い方つかいかた

前回ぜんかい勉強べんきょうしたHTMLの基本的きほんてきな構造こうぞうを、Visual Studio Codeを使って表示ひょうじします。

  1. 「新しいあたらしいテキストファイルを作成さくせい」して、何もなにも書かずにHTMLファイル（index.html）として保存ほぞん​しましょう
  2. キーボードで「!」を入力にゅうりょくして、その後あと「Tabキー」を押すおすと、HTMLが表示ひょうじされます
    • これはHTMLの基本的きほんてきな構造こうぞうです
  3. 対象たいしょうとなる言語げんごを変更へんこうします
    • 「en」を「ja」に修正しゅうせいしましょう​
  4. タイトルを変更へんこうします
    • ＜title＞Document＜/title＞を＜title＞自分じぶんの学籍番号がくせきばんごう＜/title＞に修正しゅうせい​しましょう

完成かんせい例れい

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
    
  </body>
</html>

HTMLの解説かいせつ

  • ＜!DOCTYPE html＞
    • ブラウザにHTMLが最さい新しんのバージョンであることを示すしめす
      • HTML 1.0（1990）
      • HTML+（1993）
      • HTML 2.0（1995）
      • HTML 3.2（1997）
      • HTML 4.0（1997）
      • HTML 4.01（1999）
      • HTML 5（2014）
      • HTML Living Standard（2009〜）
  • ＜meta charset=”UTF-8”＞
    • ブラウザにHTMLが「UTF-8」という文字もじコードで書かれていることを示すしめす
      • 文字もじコード：コンピューターが文字もじを処理しょりするためのルール
  • ＜meta name=”viewport”＞
    • スマートフォンなどでどのように表示ひょうじするかを示すしめす
      • パソコン用ようのWebサイトはスマートフォンでは小さくちいさく見えるみえる

HTMLタグ

HTMLタグ（見出しみだし）

  • heading、6種類しゅるいの見出しみだしがあります（h1、h2、h3、h4、h5、h6）
  • HTMLタグの見出しみだしは文書ぶんしょの構造こうぞうを決めきめます
h1
h2
h3
h4
h4
h2
h3
<h1>1番ばん目めにカバーするエリアが大きいおおきい見出しみだし
文書ぶんしょ（ページ）の題名だいめい（Title）のようなもの
<h2>2番ばん目めにカバーするエリアが大きいおおきい見出しみだし
文書ぶんしょ（ページ）の章しょう（Chapter）のようなもの
<h3>3番ばん目めにカバーするエリアが大きいおおきい見出しみだし
文書ぶんしょ（ページ）の節せつ（Section）のようなもの
<h4>4番ばん目めにカバーするエリアが大きいおおきい見出しみだし
文書ぶんしょ（ページ）の項（Subsection）のようなもの
<h5>5番ばん目めにカバーするエリアが大きいおおきい見出しみだし
<h6>6番ばん目めにカバーするエリアが大きいおおきい見出しみだし

本ほんの構成こうせい

  • Title：Webサイト作成さくせい
    • Chapter 1：HTMLについて
      • Section 1.1：HTMLとは
      • Section 1.2：HTMLのルール
      • Section 1.3：HTMLタグ
        • Subsection 1.3.1：見出しみだし
        • Subsection 1.3.2：段落だんらく
        • Subsection 1.3.2：リスト
    • Chapter 2：CSSについて
      • Section 2.1：CSSとは
      • Section 2.2：CSSのルール
      • Section 2.3：CSSのプロパティ

本ほんの構成こうせいをHTMLでマークアップすると

  • <h1>Title：Webサイト作成さくせい</h1>
    • <h2>Chapter 1：HTMLについて</h2>
      • <h3>Section 1.1：HTMLとは</h3>
      • <h3>Section 1.2：HTMLのルール</h3>
      • <h3>Section 1.3：HTMLタグ</h3>
        • <h4>Subsection 1.3.1：見出しみだし</h4>
        • <h4>Subsection 1.3.2：段落だんらく</h4>
        • <h4>Subsection 1.3.2：リスト</h4>
    • <h2>Chapter 2：CSSについて</h2>
      • <h3>Section 2.1：CSSとは</h3>
      • <h3>Section 2.2：CSSのルール</h3>
      • <h3>Section 2.3：CSSのプロパティ</h3>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <h3>見出し3</h3>
    <h4>見出し4</h4>
    <h5>見出し5</h5>
    <h6>見出し6</h6>
  </body>
</html>

保存ほぞんして、Webブラウザ（Chrome）で確認かくにんしてみましょう。

HTMLタグ（段落だんらく）

  • paragraph、段落だんらく
<p>段落だんらく（文ぶんのまとまり）を​指定していする
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
</head>
  <body>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <h3>見出し3</h3>
    <h4>見出し4</h4>
    <h5>見出し5</h5>
    <h6>見出し6</h6>
    <p>これは段落です。</p>
  </body>
</html>

保存ほぞんして、Webブラウザ（Chrome）で確認かくにんしてみましょう。

課題かだいの提出ていしゅつ

課題かだいを提出ていしゅつしましょう。

CampusApp

  • 「出欠しゅっけつ・課題かだい」から提出ていしゅつしましょう
  • 課題かだいセクションにある今日きょうの授業じゅぎょうの欄らんから提出ていしゅつできます

知識ちしき問題もんだい

今日きょうの授業じゅぎょう内容ないようを知識ちしき問題もんだいで復習ふくしゅうしましょう。

CampusApp

  • CampusAppの「CBT（知識ちしき問題もんだい）」から、知識ちしき問題もんだいにチャレンジしましょう
  • 100点てんが取れるとれるまで、繰り返しくりかえし挑戦ちょうせんしましょう
  • 期末きまつの定期ていき試験しけんは知識ちしき問題もんだいの中からなかから出題しゅつだいします

パソコンの再起動さいきどう／シャットダウン

授業じゅぎょうの終わりおわりに必ずかならずパソコンを再起動さいきどう（次つぎに他のほかの授業じゅぎょうがある場合ばあい）、またはシャットダウン（次つぎに他のほかの授業じゅぎょうがない場合ばあい）してください。

Webサイト作成A
目次