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

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

Webサイト作成B
目次

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

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

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

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

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

  • Webサイトにおいて、トップページ以外いがいのページを一般的いっぱんてきに何となんと呼びますか
    • 下した層ページ
    • インデックスページ
    • 目次もくじページ
    • ランディングページ
    • Webページ
  • Webサイトのトップページについて、間違ってまちがっているものはどれですか
    • 必ずかならず下した層ページと共通きょうつうのデザインである
    • Webサイトの表紙ひょうしになるページである
    • 他のほかの下した層ページとは異なることなるデザインである
    • インデックスページと呼ばれる
    • トップページから利用りようされることが多いおおい
  • 「FAQ」は何の略なんのりゃくですか
    • Frequently Asked Questions
    • Frequently Answer Questions
    • Frequently Asked Quality
    • Frequently Asked Quantity
    • Frequently And Questions
  • サイトマップの役割やくわりについて、間違ってまちがっているものはどれですか
    • ユーザーからの問いとい合わせを受けるうけるもの
    • Webサイトを構成こうせいするページについてまとめたもの
    • ユーザーが迷ったときのナビゲーターになるもの
    • 検索けんさくエンジンなどにWebサイトの構成こうせいを伝えるつたえるもの
    • 制作せいさく時ときにWebサイトの構成こうせいを確認かくにんするためのもの
  • Studioで現在げんざいの制作せいさく状況じょうきょうを確認かくにんする機能きのうはどれですか
    • ライブプレビュー
    • 新規しんきタブ
    • アクティブビュー
    • 開発かいはつビュー
    • 新規しんきウインドウ

Webサイトのレイアウトと要素ようその配置はいち

Webサイトでページのレイアウトをするための技術ぎじゅつと、要素ようそを配置はいちするための技術ぎじゅつを学びまなびます。

Webサイトのレイアウト

Webサイトでページ全体ぜんたいのレイアウトをするための技術ぎじゅつが4つあります。

テーブルレイアウト

テーブルレイアウトは、tableタグを使います。初しょ期のWebサイト作成さくせいでよく用よういられました。

  • 良いよいところ：細かいこまかいレイアウトをすることが可能かのう
  • 悪いわるいところ：パソコンとスマートフォンとで表示ひょうじ内容ないようを最適さいてき化する、いわゆる「レスポンシブデザイン」ができない
<table>
  <tr>
    <td colspan="2">header</td>
  </tr>
  <tr>
    <td>main</td><td>sidebar</td>
  </tr>
  <tr>
    <td colspan="2">footer</td>
  </tr>
</table>
header
mainsidebar
footer

フロートレイアウト

要素ようそを横よこ並びにならびにすることで、画が面めん幅はばにあわせて要素ようその位置いちが変わるかわるレイアウトです。テキストに画像がぞうを回りまわり込ませるときなどにも使えます。

  • 良いよいところ：レスポンシブデザインにもある程度ていど対応たいおうできる
  • 悪いわるいところ：画が面めん幅はばが中途ちゅうと半端はんぱな場合ばあい、文字もじや画像がぞうの位置いちがおかしくなる場合ばあいがある
<div>a</div>
<div>b</div>

<style>
  div {
    float: left;
  }
</style>
a
b

フレックスボックスレイアウト

要素ようそをまとめる「コンテナ」というボックスの中でなかで、要素ようそがどのように並ぶならぶかを指定していするレイアウトです。並ぶならぶ方向ほうこう、順番じゅんばん、折おりり返しなどを指定していできます。

  • 良いよいところ：簡単かんたんに実装じっそうでき、レスポンシブデザインにも対応たいおうする
  • 悪いわるいところ：縦たて軸じく方向ほうこうまたは横よこ軸じく方向ほうこうのみにしか並なみべられない（1次つぎ元もと）
<div class="container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

<style>
  .container {
    display: flex;
  }
</style>
a
b
c

グリッドレイアウト

要素ようそをまとめる「コンテナ」というボックスの中でなかで、要素ようそがどのように並ぶならぶかを指定していするレイアウトです。配置はいちの自由じゆう度どが高いたかいレイアウト方法ほうほうです。

  • 良いよいところ：縦たて軸じく方法ほうほうと横よこ軸じく方向ほうこうを指定していしながら複雑ふくざつなレイアウトが可能かのう
  • 悪いわるいところ：実装じっそうが難しいむずかしい
<div class="container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
</style>
a
b
c

要素ようその配置はいち

要素ようそを配置はいちする3つの方法ほうほうと、重なるかさなる順番じゅんばんを調整ちょうせいする方法ほうほうを学びまなびます。

4種類しゅるいの配置はいち

相対そうたい配置はいち（relative）もともとの場所ばしょを基準きじゅんに配置はいちされる
絶対ぜったい配置はいち（absolute）親おや要素ようその場所ばしょを基準きじゅんに配置はいちされる
固定こてい配置はいち（fixed）画が面めん全体ぜんたいを基準きじゅんに配置はいちが固定こていされる
スクロールしても場ば所がところが変わらないかわらない
粘着配置はいち（sticky）親おや要素ようその場所ばしょを基準きじゅんに配置はいちされる
スクロールで現れあらわれその場所ばしょに固定こていされる

説明せつめい後あと、検証あかしツールを使って「4種類しゅるいの配置はいち」の表ひょうの配置はいちを変更へんこうして見せます。

相対そうたい配置はいち（relative）

もともとの配置はいちを基準きじゅんに配置はいちされます。位置いちを指定していするプロパティ（top、right、bottom、left）で位置いちを指定していすると、もともとのスペースを維持いじしたまま要素ようその場ば所がところが変化へんかします。

<div class="container">
  <div class="position-relative">a</div>
</div>

<style>
  .position-relative {
    position: relative;
    top: 10px;
    left: 10px;
  }
</style>

絶対ぜったい配置はいち（absolute）

親おや要素ようその場所ばしょを基準きじゅんに配置はいちされます。位置いちを指定していするプロパティ（top、right、bottom、left）で位置いちを指定していすると、もともとのスペースを無視むしして要素ようその場ば所がところが変化へんかします。

<div class="container">
  <div class="position-absolute">a</div>
</div>

<style>
    .container {
    position: relative;
    }
    .position-absolute {
    position: absolute;
    top: 10px;
    left: 10px;
  }
</style>

固定こてい配置はいち（fixed）

画が面めん全体ぜんたいを基準きじゅんに配置はいちされます。ページをスクロールしてもその位置いちは変わりかわりません。

<div class="container">
  <div class="position-fixed">a</div>
</div>

<style>
    .position-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
  }
</style>

粘着配置はいち（sticky）

親おや要素ようその場所ばしょを基準きじゅんに配置はいちされます。ページをスクロールするとfixedのように振るふる舞い、その位置いちに留まります。

<div class="container">
  <div class="position-sticky">a</div>
</div>

<style>
    .position-sticky {
    position: sticky;
    top: 10px;
    left: 10px;
  }
</style>

重ねかさね順じゅん

上記じょうきのように、positionプロパティを使って配置はいちを変更へんこうすると、要素ようそが重なってかさなって表示ひょうじされます。この重ねかさね順じゅんの調整ちょうせい方法ほうほうを学びまなびます。

<div class="container">
  <div class="z-index-1">1</div>
  <div class="z-index-2">2</div>
</div>

<style>
  .container {
    position: relative;
  }
  .z-index-1 {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
  }
  .z-index-2 {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1;
  }
</style>
1
2

重なってかさなっている要素ようそに「z-index」プロパティが指定していされていると、その数字すうじが大きいおおきいほど上うえに重なってかさなって表示ひょうじされます。

説明せつめい後あと、検証あかしツールを使って重じゅうなりを変更へんこうして見せます。

Studio：ボックス内の並べ方ならべかたと配置はいち、ボックスの配置はいちと重ねかさね順じゅん

Studioにログインしてください。

「HOME」を編集へんしゅうしますので、デザインエディタでHOMEを編集へんしゅうできるように準備じゅんびしてください。

準備じゅんび

  • 見出しみだしテキストボックス（HOME）が含まれているボックスのタグが「main」になっていることを確認かくにんしましょう
  • mainの縦たて幅はばを「1440px」にします
  • mainにボックス（A）を追加ついかします
    • ボックス（A）の横よこ幅はばを「480px」、縦たて幅はばを「960px」にします
    • ボックス（A）の塗りぬりを「#FFFFFF」にします
  • ボックス（A）にボックスを3つ挿入そうにゅうします
    • ボックス（B）にはテキストボックスを挿入そうにゅうして、テキストを「1」にします
      • ボックス（B）の塗りぬりを「#FFCCCC」にします
    • ボックス（C）にはテキストボックスを挿入そうにゅうして、テキストを「2」にします
      • ボックス（C）の塗りぬりを「#CCFFCC」にします
    • ボックス（D）にはテキストボックスを挿入そうにゅうして、テキストを「3」にします
      • ボックス（D）の塗りぬりを「#CCCCFF」にします

ボックス内の並べ方ならべかた

ボックス内の並なみび方ほうを変更へんこうしてみましょう。ボックス内の並なみび方ほうは「flex」で調整ちょうせいされています。

  • ボックス（A）の並なみび方ほうを「左ひだりから右みぎ」に変更へんこうします
  • ボックス（A）の並なみび方ほうを「折おりり返し」に変更へんこうします
  • ボックス（A）の並なみび方ほうを「右みぎから左ひだり」に変更へんこうします
  • ボックス（A）の並なみび方ほうを「下したから上うえ」に変更へんこうします
  • ボックス（A）の並なみび方ほうを「上うえから下した」に戻します

ボックス内の配置はいち

ボックス内の配置はいちを変更へんこうしてみましょう。ボックス内の配置はいちは「flex」で調整ちょうせいされています。

  • ボックス（A）の配置はいちを「左ひだり上うえ」に変更へんこうします
  • ボックス（A）の配置はいちを「中央ちゅうおう上うえ」に変更へんこうします
  • ボックス（A）の配置はいちを「右みぎ上うえ」に変更へんこうします
  • ボックス（A）の配置はいちを「中央ちゅうおう左ひだり」に変更へんこうします
  • ボックス（A）の配置はいちを「中央ちゅうおう右みぎ」に変更へんこうします
  • ボックス（A）の配置はいちを「左ひだり下した」に変更へんこうします
  • ボックス（A）の配置はいちを「中央ちゅうおう下した」に変更へんこうします
  • ボックス（A）の配置はいちを「中央ちゅうおう右みぎ」に変更へんこうします
  • ボックス（A）の配置はいちを「中央ちゅうおう」に戻します

配置はいち

ボックスの配置はいちを変更へんこうしてみましょう。

相対そうたいrelativeと同じおなじ
絶対ぜったい位置いちabsoluteと同じおなじ
固定こていfixedと同じおなじ
親おや要素ようそがBase直じき下したでなければ表示ひょうじされません
追従ついじゅうstickyと同じおなじ
  • ボックス（B）の配置はいちを「絶対ぜったい位置いち」に変更へんこうします
    • 絶対ぜったい位置いちの状態じょうたいでは、ボックスをドラッグして位置いちを変更へんこうすることができます
    • ライブプレビューで確認かくにんしましょう
  • ボックス（B）の配置はいちを「追従ついじゅう」にします
    • ライブプレビューで確認かくにんしましょう
  • ボックス（B）の配置はいちを「相対そうたい」に戻します
  • headerの配置はいちを「固定こてい」に変更へんこうします
    • ライブプレビューで確認かくにんしましょう
  • headerの配置はいちを「相対そうたい」に戻します

重ねかさね順じゅん

ボックスの重ねかさね順じゅんを変更へんこうしてみましょう。

  • ボックス（B）の配置はいちを「絶対ぜったい位置いち」に変更へんこうします
    • ボックスの位置いちを「上うえ20px」「下した20px」にします
  • ボックス（C）の配置はいちを「絶対ぜったい位置いち」に変更へんこうします
    • ボックスの位置いちを「上うえ40px」「下した40px」にします
  • ボックス（D）の配置はいちを「絶対ぜったい位置いち」に変更へんこうします
    • ボックスの位置いちを「上うえ60px」「下した60px」にします
  • ボックス（C）の重ねかさね順じゅんを「5」に変更へんこうします
  • ライブプレビューで確認かくにんしましょう
  • ボックス（B）〜（D）の配置はいちを「相対そうたい」に戻します

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成B
目次