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

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

Webサイト作成A
目次

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

Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

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

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

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

  • Webサイト作成さくせいで、デザインをするためのプログラミング言語げんごはどれですか
    • CSS
    • HTML
    • Excel
    • マークアップ
    • プロパティ
  • HTML要素ようそに名前なまえをつける方法ほうほうで、ページ内で一度いちどしか使えないのはどれですか
    • id
    • class
    • ol
    • ul
    • css
  • HTML要素ようそに名前なまえをつける方法ほうほうで、ページ内で何度なんども使えるのはどれですか
    • class
    • id
    • css
    • html
    • name
  • CSSで背景色はいけいしょくを変更へんこうするプロパティはどれですか
    • background-color
    • bg
    • color
    • #ff0000
    • class
  • CSSで文字色もじしょくを変更へんこうするプロパティはどれですか
    • color
    • text
    • font
    • #ff0000
    • text-color

実技じつぎテストと定期ていき試験しけんについて

実技じつぎテスト

  • 15回かい目めの授業じゅぎょうで実技じつぎテストを行いおこないます
    • 14回かい目めは試験しけん勉強べんきょうの時間じかんとします
試験しけん場所ばしょITリテラシー教室きょうしつ
試験しけん内容ないようHTMLとCSSの作成さくせい
試験しけん時間じかん60分
試験しけん範囲はんい13回かい目めの授業じゅぎょうまでに学んだまなんだ内容ないよう
注ちゅう意い事項じこうなど教科書きょうかしょの持ち込み、パソコンで調べるしらべる、AIに質問しつもんするなどは認めみとめますが、スマホの使用しようは禁止きんしです。また、試験中しけんちゅうの私語しご（友達ともだちと話はなしをすること）も禁止きんしです。禁止きんしした行動こうどうを確認かくにんした場合ばあい、退室たいしつを命じるめいじることがあります。

定期ていき試験しけん

  • 16回かい目めの授業じゅぎょうで定期ていき試験しけんを行いおこないます
    • 事前にじぜんに勉強べんきょうしてほしいので、14回かい目めを目安めやすにこれまでの知識ちしき問題もんだいを再さい掲載けいさいします
試験しけん場所ばしょオンライン
試験しけん内容ないよう選択せんたく式しきのテスト
試験しけん時間じかん50分
試験しけん範囲はんい授業中じゅぎょうちゅうに実施じっしした知識ちしき問題もんだいより

カスケード

CSS＝Cascading Style Sheet​

cascadeとは、階段かいだん状の滝たきのことです。滝たきのように、​上流じょうりゅうから下流かりゅうへ連続れんぞく的に影響えいきょうすることを意味いみしています。

CSSにおけるカスケードの考え方かんがえかた

VS Codeで新規しんきHTMLファイルを作成さくせいして、下記かきのHTMLを書きます。

<html>
  <head>
    <style>

    </style>
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <div>
      <ul>
        <li>リスト項目</li>
        <li>リスト項目</li>
      </ul>
      <p>段落です</p>
    </div>
  </body>
</html>

このHTMLのbody要素ようそに対してたいして、文字もじの色いろを赤あかに変更へんこうする以下いかのCSSを書きます。

<style>
  body {
    color: #ff0000;
  }
</style>

上記じょうきのように書くかくと、bodyタグに含まれるすべての文字もじが赤あか色いろになります。これをカスケード（​上流じょうりゅうから下流かりゅうへ連続れんぞく的に影響えいきょう）と呼びます。

  • bodyの影響えいきょうを受けて、bodyの中になかにあるh1とdivの文字もじが赤あか色いろに
  • divの影響えいきょうを受けて、divの中になかにあるulの文字もじとpの文字もじが赤あか色いろに
  • ulの影響えいきょうを受けて、ulの中になかにあるliの文字もじが赤あか色いろに

コラム：CSSのルール

  • CSSでは、後にあとに書いたものが優先ゆうせんされる
  • CSSでは、クラスやIDがついたものが優先ゆうせんされる
  • CSSでは、クラスよりもIDが優先ゆうせんされる
  • CSSでは、「!important」をつけると優先ゆうせんされる

CSSプロパティ

  • 実際じっさいに使われているCSSプロパティを学んでまなんでいきましょう。
  • いずれもstyleタグの中になかに記述きじゅつしていきます。

CSSプロパティ（文字もじの位置いち）

text-align水平すいへい方向ほうこう（左右さゆう）の位置いちを指定してい
  • left：左ひだり寄せ
  • center：中央ちゅうおう寄せ
  • right：右みぎ寄せ
<style>
  h1 {
    text-align: center;
  }
</style>

CSSプロパティ（要素ようその大きさおおきさ、余白よはく、枠わく線せん）

要素ようその大きさおおきさと2つの余白よはく（内部ないぶ余白よはくと外部がいぶ余白よはく）、枠わく線せんを設定せっていできます。

width幅はばを指定してい
height高さたかさを指定してい
padding内部ないぶ余白よはくを指定してい
margin外部がいぶ余白よはくを指定してい
border枠わく線せんを指定してい

基本的きほんてきな考え方かんがえかた

  • 単位たんいは「px（ピクセル）」または「%（パーセント）」です
  • 要素ようその幅はば（width）、高さたかさ（height）、内部ないぶ余白よはく（padding）、外部がいぶ余白よはく（margin）、枠わく線せん（border）を設定せっていできます
  • 内部ないぶ余白よはく（padding）は上下じょうげ左右さゆうに設定せっていできます
    • 上うえ：padding-top、右みぎ：padding-right、下した：padding-bottom、左ひだり：padding-left
    • 位置いちを指定していしない場合ばあい、上下じょうげ左右さゆうを一度にいちどに指定していできます
  • 外部がいぶ余白よはく（margin）は上下じょうげ左右さゆうに設定せっていできます
    • 上うえ：margin-top、右みぎ：margin-right、下した：margin-bottom、左ひだり：margin-left
    • 位置いちを指定していしない場合ばあい、上下じょうげ左右さゆうを一度にいちどに指定していできます
  • 枠わく線せん（border）は線せんの種類しゅるい、太さ、色いろを指定していすることができます
    • 線せんの種類しゅるい：solid（実線じっせん）、dashed（破線はせん）　、dotted（点線てんせん）　などを指定していします
    • 線せんの太さ：pxで指定していします
    • 色いろ：HEXで指定していします

例れい1：要素ようそpに幅はば240px、内部ないぶ余白よはく20px、外部がいぶ余白よはく40px、枠わく線せん（実線じっせん、1px、黒くろ）を設定せっていする

<style>
  p {
    width: 240px;
    padding: 20px;
    margin: 40px;
    border: solid 1px #000000;
  }
</style>

例れい2：要素ようそdivに幅はば75%、内部ないぶ余白よはく（左ひだり）30px、外部がいぶ余白よはく（下した）60px、枠わく線せん（点線てんせん、5px、青あお）を設定せっていする

<style>
  div {
    width: 75%;
    padding-left: 30px;
    margin-bottom: 60px;
    border: dotted 5px #0000ff;
  }
</style>

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次