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

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

Webサイト作成B
目次

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

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

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

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

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

  • CSSの正しいただしい名前なまえと機能きのうの組み合わせくみあわせで正しいただしいものはどれですか
    • CSS＝Cascading Style Sheet、デザインをするための言語げんご
    • CSS＝Cascade Style Sheet、構造こうぞうを決めるきめるための言語げんご
    • CSS＝Cascading Super Sheet、デザインをするための言語げんご
    • CSS＝Cascading Style Sheet、動きうごきを決めるきめるための言語げんご
    • CSS＝Cascade Style Sheet、デザインをするための言語げんご
  • CSSの書き方かきかたで、正しいただしい組み合わせくみあわせはどれですか
    • 「どこに＝セレクタ」「何をなにを＝プロパティ」「どうする＝値あたい」
    • 「どこに＝プロパティ」「何をなにを＝セレクタ」「どうする＝値あたい」
    • 「どこに＝値あたい」「何をなにを＝プロパティ」「どうする＝セレクタ」
    • 「どこに＝セレクタ」「何をなにを＝値あたい」「どうする＝プロパティ」
    • 「どこに＝セレクタ」「何をなにを＝値あたい」「どうする＝プロパティ」
  • CSSのセレクタで＜h3＞を選ぶえらぶときの書き方かきかたはどれですか
    • h3 {プロパティ: 値あたい;}
    • .h3 {プロパティ: 値あたい;}
    • ＜h3＞ {プロパティ: 値あたい;}
    • プロパティ {h3: 値あたい;}
    • 値あたい {プロパティ: h3;}
  • CSSのセレクタでclass=”my_class”を選ぶえらぶときの書き方かきかたはどれですか
    • .my_class {プロパティ: 値あたい;}
    • my_class {プロパティ: 値あたい;}
    • ＜my_class＞ {プロパティ: 値あたい;}
    • プロパティ {my_class: 値あたい;}
    • 値あたい {プロパティ: my_class;}
  • CSSプロパティで間違ってまちがっている組み合わせくみあわせはどれですか
    • font-color：文字もじの色いろ
    • font-size：文字もじの大きさおおきさ
    • text-align：文字もじの位置いち
    • font-weight：文字もじの太さふとさ
    • color：文字もじの色いろ

テキストの配布はいふ

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

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

CSSプロパティ：テキスト2

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

CampusAppから「web-b-05.zip」をダウンロードして展開てんかいし、「05.html」をVisual Studio Codeから開きひらきます。

CSSプロパティ（文字もじの装飾そうしょく）

text-decoration文字もじの装飾そうしょく
text-decoration: 値あたい;

値あたいは「underline」「line-through」などで設定せっていします

<style>
  h1 {
    text-decoration: underline;
  }
</style>

CSSプロパティ（文字もじの影かげ）

text-shadow文字もじの影かげ
text-shadow: 値あたい;

値あたいは「右みぎへのズレ 下したへのズレ ぼかしのサイズ 影かげの色いろ」で設定せっていします

<style>
  h1 {
    text-shadow: 5px 5px 10px #ff0000;
  }
</style>

同じおなじHTML要素ようそに対してたいしてCSSのを追加ついかするときは、改行かいぎょうして追加ついかしましょう

CSSプロパティ（文字もじの間隔かんかく）

letter-spacing文字もじの間隔かんかく
letter-spacing: 値あたい;

値あたいはピクセル（10px）などで設定せっていします

<style>
  h1 {
    letter-spacing: 10px;
  }
</style>

問題もんだい：「.box-a」に文字もじ装飾そうしょくが「line-through」、文字もじの影かげが「10px 10px 20px #666666」、文字もじの間隔かんかくが「20px」を設定せっていしてください

CSSプロパティ：背景はいけい

CSSプロパティ（背景色はいけいしょく）

background-color背景色はいけいしょく
background-color: 値あたい;

値あたいはHEX（#ff0000）などで設定せっていします

<style>
  body {
    background-color: #eedddd;
  }
</style>

CSSプロパティ（背景はいけい画像がぞう）

background-image背景はいけい画像がぞう
background-image: 値あたい;

値あたいは画像がぞうのURLを「url()」の形かたちで設定せっていします

<style>
  body {
    background-image: url(bg_plaid.png);
  }
</style>

問題もんだい：「.box-b」に背景色はいけいしょくが「#ffff00」を設定せっていしてください

CSSプロパティ：ボックスモデル

ボックスモデルはCSSでデザインをするときに、必ずかならず知って置かなければいけない知識ちしきです。

Webサイトは大きなおおきな箱はこの中になかに小さなちいさな箱はこを入れるいれるイメージでデザインしていきます。

それぞれの箱はこには、内側うちがわから「HTML要素ようそ（element）」「中なかの余白よはく（padding）」「枠わく線せん（border）」「外がいの余白よはく（margin）」があります

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

HTML要素ようそ（element）は、2つの大きさおおきさ（幅はばと高さたかさ）、2つの余白よはく（中なかの余白よはくと外がいの余白よはく）、枠わく線せんを設定せっていできます。

widthelementの幅はば
heightelementの高さたかさ
padding中なかの余白よはく、elementのまわりの余白よはく
border枠わく線せん
margin外がいの余白よはく、枠わく線せんのまわりの余白よはく

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

  • 単位たんいはピクセル（px）などです
  • 要素ようそ（element）の外側そとがわに中なかの余白よはく（padding）があり、中なかの余白よはく（padding）の外側そとがわに枠わく線せん（border）があり、枠わく線せん（border）の外側そとがわに外がいの余白よはく（margin）があります
  • 枠わく線せん（border）は線せんの種類しゅるい、太さふとさ、色いろを指定していすることができます
    • 線せんの種類しゅるい：solid（実線じっせん）、dashed（破線はせん）　、dotted（点線てんせん）　などを指定していします
    • 線せんの太さふとさ：ピクセル（px）で指定していします
    • 色いろ：HEX（#ff0000）で指定していします

例れい：「.box-c」に幅はば240px、中なかの余白よはく20px、枠わく線せん（solid、1px、#000000）、外がいの余白よはく40pxを設定せっていする

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

問題もんだい：「.box-d」に幅はば120px、高さたかさ120px、中なかの余白よはく24px、枠わく線せん（dotted、5px、#00aa00）、外がいの余白よはく12pxを設定せっていしてください

問題もんだい：「.box-e」に幅はば360px、高さたかさ240px、中なかの余白よはく12px、枠わく線せん（dashed、10px、#0000cc）、外がいの余白よはく36pxを設定せっていしてください

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成B
目次