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

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

Webサイト作成A
目次

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

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

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

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

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

  • 表ひょうの説明せつめいで正しいただしいものはどれですか
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
    • データを大きさおおきさの順じゅんに並べたならべたもの
    • 同じおなじ種類しゅるいのデータを並べたならべたもの
    • データや文ぶんを内容ないように合わせあわせず縦たてと横よこに並べたならべたもの
    • 順番じゅんばんのない文ぶんを並べたならべたもの
  • 表ひょうにおいて「行ぎょう」の正しいただしい説明せつめいはどれですか
    • 横よこのデータのまとまり
    • 縦たてのデータのまとまり
    • 表ひょうで、データ（見出しみだしや内容ないよう）が入っている部屋へや
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
    • 表ひょうの見出しみだし
  • 表ひょうにおいて「列れつ」の正しいただしい説明せつめいはどれですか
    • 縦たてのデータのまとまり
    • 横よこのデータのまとまり
    • 表ひょうで、データ（見出しみだしや内容ないよう）が入っている部屋へや
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
    • 表ひょうの見出しみだし
  • 表ひょうにおいて「セル」の正しいただしい説明せつめいはどれですか
    • 表ひょうで、データ（見出しみだしや内容ないよう）が入っている部屋へや
    • 横よこのデータのまとまり
    • 縦たてのデータのまとまり
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
    • 表ひょうの見出しみだし
  • HTML（表ひょう）を構成こうせいするタグで間違ってまちがっている組み合わせくみあわせはどれですか
    • ＜tr＞：表ひょうの列れつ
    • ＜table＞：表ひょうの全体ぜんたい
    • ＜tr＞：表ひょうの行ぎょう
    • ＜th＞：表ひょうのセル（見出しみだし）
    • ＜td＞：表ひょうのセル（内容ないよう）

テキストの配布はいふ

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

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

コンピューターと画像がぞう

Webサイト作成さくせいで扱うあつかう画像がぞうタイプ

JPEG（ジェイペグ）主におもに写真しゃしん
PNG（ピング）主におもにイラスト、写真しゃしんも対応たいおう可か、背景はいけい透過できる
GIF（ジフ）主におもにアイコン、アニメーション
WebP（ウェッピー）なんでもできる新しいあたらしい画像がぞうタイプ
HEIC（ヘイク）iPhoneで撮影さつえいした写真しゃしん

復習ふくしゅう）拡張子かくちょうしについて

ピクセルと解像度かいぞうど

ピクセル

ピクセル＝画が面めん上でじょうで画像がぞうをつくる小さなちいさな点てん

それぞれのピクセルはRGBの明るさあかるさ、場所ばしょ、どれくらい透けるかなどの情報じょうほうを持っており、それらを組み合わせくみあわせて一ひと枚の画像がぞうが作られてつくられています。

解像度かいぞうど

解像度かいぞうど＝1インチ（2.54cm）あたりのピクセル数ぴくせるすうのこと

  • 解像度かいぞうどが高いたかい＝美しくうつくしく詳細しょうさいな画像がぞう
  • 解像度かいぞうどが低いひくい＝汚くぼやけた画像がぞう
  • 解像度かいぞうどの単位たんいは「ppi（pixel per inchi）」です
    • Webサイトでは解像度かいぞうどが72ppi以上いじょうがおすすめ
    • 印刷いんさつでは解像度かいぞうどが300ppi以上いじょうがおすすめ

画像がぞうの大きさおおきさ

  • 画像がぞうの大きさおおきさ：縦たてと横よこのピクセル数ぴくせるすう（px）で指定していする
  • 画素数がそすう（がそすう）＝画像がぞうをつくる総そうてのピクセルの数かず
    • 例えばたとえば、フルHDの画像がぞうでは1920px×1080px＝2,073,600px​

いろいろな画像がぞうサイズ

HVGA480×320
VGA640×480
フルHD1920×1080
4K（フルHDの4倍ばい）3840×2160
8K（フルHDの8倍ばい）7680×4320

HTMLタグ

CampusAppから「cat.jpg」をデスクトップにダウンロードします。

HTMLの基本的きほんてきな構造こうぞう（復習ふくしゅう）

HTMLの基本的きほんてきな構造こうぞうをVisual Studio Codeを使って表示ひょうじします。

<!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タグ（画像がぞう）

  • ＜img＞
  • HTMLで画像がぞうを表示ひょうじします
  • 「image」に由来ゆらい
  • src属性ぞくせい（source）：画像がぞうのURLを指定してい​します
  • alt属性ぞくせい（alternative）：画像がぞうを説明せつめいする文ぶん​を指定していします
<img>画像がぞうを表示ひょうじする
<img src="画像のURL" alt="画像の説明">

    imgタグを挿入そうにゅう

    <!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>
    <img>
  </body>
</html>

    src属性ぞくせいを追加ついか

    <!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>
    <img src="cat.jpg">
  </body>
</html>

    alt属性ぞくせいを追加ついか

    <!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>
    <img src="cat.jpg" alt="かわいいねこ">
  </body>
</html>

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

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

    CampusApp

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

    タイピング練習れんしゅう

    キーボードで日本語にほんごを入力にゅうりょくする練習れんしゅうをしましょう。

    CampusApp

    • CampusAppの「CBT（タイピング練習れんしゅう）」から、タイピング練習れんしゅうをしましょう
    • 約やく10分間ふんかん、タイピングの時間じかんを設けもうけます
    • 1回かい3分間ふんかんなので、少なすくなくとも3回かいは練習れんしゅうできます
    • 点数てんすうや回数かいすうは記録きろくされますので、評価ひょうかの対象たいしょうとします
    • 授業じゅぎょう時間じかん以外にもいがいにも繰り返しくりかえし練習れんしゅうして、正確せいかくに速くタイピングできるようになりましょう

    カウントダウンタイマー

    10:00

    知識ちしき問題もんだい

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

    CampusApp

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

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

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

    Webサイト作成A
    目次