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

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

Webサイト作成B
目次

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

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

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

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

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

  • 文字もじに関するかんするCSSプロパティで、正しいただしい組み合わせくみあわせはどれですか
    • 文字もじの装飾そうしょく（text-decoration）、文字もじの影かげ（text-shadow）、文字もじの間隔かんかく（letter-spacing）
    • 文字もじの装飾そうしょく（font-decoration）、文字もじの影かげ（font-shadow）、文字もじの間隔かんかく（letter-spacing）
    • 文字もじの装飾そうしょく（decoration）、文字もじの影かげ（shadow）、文字もじの間隔かんかく（spacing）
    • 文字もじの装飾そうしょく（text-decoration）、文字もじの影かげ（text-shadow）、文字もじの間隔かんかく（text-spacing）
    • 文字もじの装飾そうしょく（letter-decoration）、文字もじの影かげ（letter-shadow）、文字もじの間隔かんかく（letter-spacing）
  • 背景はいけいに関するかんするCSSプロパティで、正しいただしい組み合わせくみあわせはどれですか
    • 背景色はいけいしょく（background-color）、背景はいけい画像がぞう（background-image）
    • 背景色はいけいしょく（color）、背景はいけい画像がぞう（image）
    • 背景色はいけいしょく（bg-color）、背景はいけい画像がぞう（bg-image）
    • 背景色はいけいしょく（background）、背景はいけい画像がぞう（background）
    • 背景色はいけいしょく（#ff0000）、背景はいけい画像がぞう（url）
  • CSSのボックスモデルで、「幅はば120px、高さたかさ240px、外のそとの余白よはく16px」はどれですか
    • width: 120px;／height: 240px;／margin: 16px;
    • width: 120px;／height: 240px;／padding: 16px;
    • width: 240px;／height: 120px;／margin: 16px;
    • width: 120px;／height: 240px;／border: 16px;
    • width: 240px;／height: 120px;／padding: 16px;
  • CSSのボックスモデルで、「赤あか色いろで5pxの実線じっせん（solid）の枠わく線せん」はどれですか
    • border: solid 5px #ff0000;
    • border: dashed 5px #ff0000;
    • border: solid 5px #00ff00;
    • border: solid 5pt #00ff00;
    • border: dotted 5px #ff0000;
  • CSSのボックスモデルで、「高さたかさ120px、中なかの余白よはく32px、外のそとの余白よはく16px」はどれですか
    • height: 120px;／padding: 32px;／margin: 16px;
    • height: 32px;／padding: 120px;／margin: 16px;
    • height: 120px;／padding: 16px;／margin: 32px;
    • height: 16px;／padding: 32px;／margin: 120px;
    • height: 120px;／padding: 16px;／margin: 32px;

テキストの配布はいふ

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

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

CSSプロパティ：レイアウト

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

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

CSSプロパティ（表示ひょうじとレイアウト）

display表示ひょうじとレイアウト

displayプロパティは、Webサイトの表示ひょうじの調整ちょうせいやレイアウトによく使われます。

表示ひょうじする、表示ひょうじしない

表示ひょうじするのか、表示ひょうじしないのかを指定していできます。
「表示ひょうじしない」を指定していすると、ブラウザからは見えなくなります。

display: 値あたい;

block　→　表示ひょうじする
none　→　表示ひょうじしない

<style>
  .box-a {
    display: block;
  }

  .box-b {
    display: none;
  }
</style>

「.catch-copy」を「表示ひょうじしない」にして、
表示ひょうじの変化へんかを確認かくにんしてください

縦たてにならべる、横よこにならべる

縦たてにならべるか、横よこにならべるかを決めるきめる値あたいです。

縦たてにならべる
要素ようそ1
要素ようそ2
要素ようそ3
横よこにならべる
要素ようそ1要素ようそ2要素ようそ3
display: 値あたい;

block　→　縦たてにならべる、幅はばと高さたかさを指定していできる
inline　→　横よこにならべる、幅はばと高さたかさを指定していできない

<style>
  .box-c {
    display: block;
  }

  .box-d {
    display: inline;
  }
</style>

追加ついかした「.box-c」と「.box-d」の両方りょうほうに
「幅はば（width）240px、高さたかさ（height）150px」
を設定せっていしてください

子こ要素ようそのレイアウト

子こ要素ようそ（親おや要素ようその中になかにある要素ようそ）のならべ方ほうを決めるきめる値あたいです。

たとえば、
＜div＞
　＜span＞コンテンツ＜/span＞
＜/div＞
をみたとき、＜div＞が親おや要素ようそ、＜span＞が子こ要素ようそです。

たとえば、
＜ul＞
　＜li＞リスト＜/li＞
　＜li＞リスト＜/li＞
　＜li＞リスト＜/li＞
＜/ul＞
をみたとき、＜ul＞が親おや要素ようそ、＜li＞が子こ要素ようそです。

子こ要素ようそを縦たてにならべる
要素ようそ1
要素ようそ2
要素ようそ3
子こ要素ようそを横よこにならべる
要素ようそ1要素ようそ2要素ようそ3
display: 値あたい;

block　→　子こ要素ようそを縦たてにならべる
flex　→　子こ要素ようそを横よこにならべる

<style>
  .box-e {
    display: block;
  }

  .box-f {
    display: flex;
  }
</style>

「li」は「ul」の子こ要素ようそです。
「display: flex;」を使って、
liを横よこにならべてください

CSSプロパティ：位置いち

「場所ばしょ」と「位置いち」と「基準きじゅん」

場所ばしょ：注目ちゅうもくしているエリアや地点ちてん
位置いち：ある場所ばしょを基準きじゅんに、どれくらい違うちがうかを数字すうじで表しあらわしたもの

CSSプロパティ（位置いち）

position位置いちの基準きじゅんをどうするか
top、right、bottom、left上うえ、右みぎ、下した、左ひだりの位置いちをどれくらい変えるかえるか
position: 値あたい;

値あたいは「relative」「absolute」「fixed」などです

relative：もとからある場所ばしょを基準きじゅんにする
absolute：Webページ全体ぜんたいや、親おや要素ようそを基準きじゅんにする
fixed：ブラウザのウインドウを基準きじゅんにする

<style>
  h1 {
    position: relative;
    top: 24px;
    right: 24px;
  }
</style>

「relative」は位置いちを少しすこし変えたかえたいとき、
「absolute」は複雑ふくざつなレイアウトをしたいとき、
「fixed」はメニューなどをスクロールしても表示ひょうじしたいとき　などに使います。

「relative」を「absolute」にして、
位置いちの変化へんかを確認かくにんしてください

「absolute」を「fixed」にして、
位置いちの変化へんかを確認かくにんしてください

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成B
目次