教員免許更新講習｜2020

はじめてのWebデザイン

2020年度教員免許状更新講習

ごあいさつ

Webを支える技術には、HTML, CSS, JavaScript, PHP といった複数の言語が存在しますが、本講習で体験していただくのは、HTMLとCSSによるWebサイトの構築です。
　Webデザインは数時間の講習で即実践・・と言えるほど簡単なものではありませんが、現代社会に広く受け入れられた標準技術とその背景にある思想を知ることは、「情報とは何か」、「情報はいかに収集・整理・共有・管理されるべきか」、また「情報社会とはいかなる性質のものであるか」を知ることにつながります。皆様の今後の教育活動にとって、本講習での体験が何らかの視野の拡大につながれば幸いです。

↑

本日のスケジュール

↑

午前の部（講義と実習）

1. インターネットとWeb　（60分）
2. HTMLによるページの記述　（60分）
3. CSSによるページのビジュアルデザイン　（60分）

↑

午後の部（実習）　

個別テーマによるWebサイトの制作（90分＋ 90分）
- サイトマップづくり
- ワイヤーフレームを描く
- HTMLコーディング
- CSSコーディング
- サーバーへのアップロードと公開について（説明のみ）

↑

実技試験

内容：実習の成果物を活用したWebサイトの構築（再構成）（30分）
評価項目：
- インターネットにおけるWebの仕組みが理解できている
- HTMLとCSS、双方の基礎をふまえたWebページが制作できている

↑

導入
HTML
CSS
演習
ファイルのアップロードと公開について
Webサイトの制作

↑

導入

↑

実習環境について

本講習使用する Mac について＞ WebDesign/BasicOperations

↑

インターネットとWeb

インターネットの概要　＞　WebDesign/Introduction

Webはオープンな技術です
Webページを記述するHTMLやCSSは、誰でも自由に見ることができるオープンなソースコードでできているので、ブラウザ上で 右クリック＞ページのソースを表示 とすると、そのページのソースコードを見ることができます。あらゆるWebサイトをページ作りのお手本として参考にすることができます。

インターネット上には、オープンなプログラムや画像・音声資源があります
Webページづくりに必要な技術情報はもちろん、Webページの表示・動作を拡張するライブラリや、画像・音声データなど、無料で自由に使用できる情報資源が多く存在します。
参考：OpenSource　FreeMaterials　CreativeCommons

様々なサービスの埋め込みが可能です
- YouTube, vimeo などの動画共有サイトには、埋め込みコードが提供されています。自分のサイトに埋め込み表示して構いません。
- GoogleMaps でも埋め込みコードが提供されます。埋め込み可です。
- Twitter, Facebook等のサービスでは、タイムラインを埋め込むコードを取得することができます。同様に自分のサイトに埋め込むことが可能です。

リンクに許諾は不要です
他のWebサイトへのリンクは、単に道案内をしているだけなので、著作権侵害にはあたりません。訪問者にとって参考となるサイトへのリンクは、自由に作成して構いません。

↑

開発環境の準備

Webデザインには以下の３種類のソフトウエアが必要です。いずれもオープンソースのフリーソフトウエアなので、金銭的な負担は一切ありません。PCが一台あれば、誰でもすぐにはじめることができます。

作るソフト　TextEditor ＞ Atom
ただ単に文字を入力・編集する・・プログラミングに用いる最もシンプルなソフトウエアがテキストエディタです。これで作成した文字が並んだだけのデータファイルを「テキストファイル」といいますが、Webデザインで扱うのは大半がこのテキストファイルなので、特別なソフトは不要です*1。
見るソフト　Browser ＞ Firefox, Chrome, Safari, Microsoft Edge(I.E.)
転送するソフト　FTP ＞ FileZilla , FFFTP

↑

サイトフォルダの準備

一般にWebサイトは複数のファイルから構成されます。はじめにWebサイト用のフォルダを作り、関連するファイルを、すべてそのフォルダで管理するようにします。
1ページ = 1ファイル（〜.html）が基本です。
写真やイラストなどの画像は imagesフォルダで管理します。

デスクトップ上に新規フォルダを作成して下さい。

注）フォルダ名、ファイル名は必ず半角英数で
images　page01.html　page-01.html　page_01.html　logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。

↑

HTML

↑

HTMLとは

HTML（HyperText Markup Language）とは、ページの内容を記述するためのマークアップ言語です。文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
　HTMLファイルは、ごく普通のテキストファイル（文字が並んだだけのもの）なので、テキストエディタ（メモ帳のようなもの）で書いて、保存するだけで完成します。

↑

HTMLファイルの作成

以下を index.html という名前で、作業用フォルダに保存して下さい。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Sample Site</title>
</head>

<body>

  <div id="container">

    <header>
      <h1>Sample Page</h1>
    </header>
 
    <nav>
      <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="gallery.html">gallery</a></li>
        <li><a href="links.html">links</a></li>
      </ul>
    </nav>

    <main>

      <section>
        <article>
          article 01
        </article>
        <article>
          article 02
        </article>
      </section>

      <aside>
        aside
      </aside>

    </main>

    <footer>
       &copy; http://www.example.com
    </footer>

  </div>

</body>
</html>

↑

HTMLをブラウザで表示確認

HTMLファイル（index.html）は、ブラウザのウインドウにドラッグ＆ドロップするだけで表示されるので、記述に間違いがないかを簡単に確認できます。

アドレスバーに表示されるURLの違い
- 通常のネット接続の場合：　http：// www.example.com/index.html
- ファイルを表示した場合：　file：//・・・・ /index.html

見出しや文章を適当に書き変えて「保存」してみて下さい。ブラウザの「更新」を行うと、変更が反映されることがわかります。

↑

HTMLタグの基本

HTMLは、情報要素を以下のようなタグでくくる形で記述します。

<◯◯>　〜　</◯◯>　← 前者を開始タグ、後者を終了タグといいます。

以下、基本的なものを列挙します。　＞　詳しくはこちら

HTML文書の基本構成
- 文書の全体：<html> 〜 </html>
- ページに関する前置き情報：<head> 〜 </head>
- ブラウザの主画面に表示される情報：<body> 〜 </body>

セクション
- 汎用区画：div, section, article, aside,
- ヘッダー：header
- ナビ：nav
- メイン：main
- フッター：footer

見出し：h1, h2, ・・, h6

水平線：hr

文章段落：p
強制改行：br　← 段落内での改行に使用します。

リンク：a
- 内部リンク（サイト内にある別のhtmlファイルへのリンク）
```
<a href="gallery.html">（リンク文字、画像）</a>
```
- 外部リンク（外部サイトへのリンク）
```
<a href="http://www.abc.com">（リンク文字、画像）</a>
```

箇条書き： <ul>と<li>

<ul>
      <li><a href="index.html">home</a></li>
      <li><a href="gallery.html">gallery</a></li>
      <li><a href="links.html">links</a></li>
      <li><a href="about.html">about</a></li>
 </ul>

画像の配置：img
```
 <img src="images/sample.jpg" width="320">
```
- src：ソース（情報源）つまり、画像データの所在を記述します。この例では、imagesフォルダの中にある sample.jpg という画像を指定しています。
- width：幅　height：高さ
- 注意：画像データは文字データと比較すると非常に情報量が大きくなります。カメラで撮影した画像をそのままアップするのではなく、Webに最適なサイズにリサイズする必要があります。　＞　参考：WebDesign/Images

様々なコンテンツの埋め込み
- YouTube動画の埋め込み　<IFRAME>
  YouTubeのサイトには「共有」>「埋め込みコード」があります。
  それ(以下例)を<body>内にコピー＆ペーストすれば表示されます。
```
<iframe width="420" height="315"
       src="http://www.youtube.com/embed/[動画個別の記号]"
       frameborder="0" allowfullscreen></iframe>
```
- GoogleMapの埋め込み　→　Googleマップ＞リンク＞埋め込みコード
- その他、Twitterのタイムラインの埋め込みなども試してみて下さい。

↑

参考

様々なHTMLタグ：HTML/Tags
HTML5 Semantic の基本形：GoogleImage:HTML5 Semantic

きれいなソースコードを書くために・・・
- TAB,半角スペースでインデントをとってHTMLを見やすくしましょう。
- TAB,半角スペースは表示上は無視されます。
- 要素間の「余白」は後に学習するCSSでコントロールします。
  全角スペースを利用した余白や、<br>タグによる連続強制改行は様々なトラブルのもとになるので、避けましょう。

↑

CSS

↑

CSSとは

CSS（Cascading Style Sheets）は、表示された要素のビジュアルを定義するためのものです。文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。

↑

３種類の記述方法

HTMLファイル内の各開始タグの中に直接書く（以下例）
```
<h1 style="font-size: 24px;">・・・</h1>
```
HTMLファイルのヘッダー部分に<style>タグを使ってまとめて書く
HTMLファイルとは独立した別のファイルに書く（拡張子は .css ）
で、結論から言うと、３つめを採用するのがWeb標準で、ここではそれにしたがって、style.css を別ファイルとして独立させています。

↑

CSSファイルの作成

以下のソースコードをテキストエディタにコピー＆ペーストして、style.cssとしてWebSiteフォルダに保存して下さい。

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

#container{
  width: 84%;
  max-width: 1280px;
  min-width: 512px;
  margin: 0 auto;
}

header {
  position:relative;
  height: 8rem;
  background: #333;
  box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}

header h1{
  position: absolute;
  top: 3rem;
  left: 3rem;
  font-size: 2rem;
  color: white;
}

nav {
  padding: 1rem 3rem ;
  background: #333;
}

nav ul{
  display: flex;
  flex-direction: row;
}

nav ul li{
  margin-right: 2rem;
}

nav ul li a {
  color: white;
}

main{
  display: flex;
  flex-direction: row;
}

section{
  flex: 3;
  padding: 3rem;
  background: #EEE;
}

article{
  min-height: 8rem;
  padding: 1rem;
  margin-bottom: 2rem;
  background: #FFF;
}

aside{
  flex: 1;
  padding: 3rem;
  background: #DDD;
}

footer {
  padding: 2rem 3rem;
  text-align: center;
  background: #333;
  color: white;
}

↑

HTMLとCSSの関連づけ

index.html の<head>内に、以下の１行を追記して下さい。

<link href="style.css" rel="stylesheet" >

これで、CSSに書かれた内容が、ページのスタイルに反映します。

最初の index.html とこの style.css を組み合わせた結果

DEMO ＞ https://koichi-inoue.github.io/SampleSite/

↑

CSSの記法

CSSではどの部分の・何を・どうするかを記述します。
記述の基本ルールは以下のとおりです。

セレクタ（どの部分の） {
    プロパティー（何を）  :  値（どうする） ;
    プロパティー（何を）  :  値（どうする） ;
         　　　 :
}

HTML内の特定の要素をセレクタで把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。

付記：親要素 / 子孫要素
階層構造をもつ文書において対象を特定する際に頻出するキーワードです。外側の要素を親要素、中に囲まれている要素を子要素といいます。

<div>　← 親要素
  <p> ・・・ </p>　← 子要素
  <p>　← 子要素
      <span>・・・</span> 　← 孫要素
  </p>
  <p> ・・・ </p>　← 子要素
</div>

↑

CSSセレクタ

セレクタには、タグ名、ID名、CLASS名などが使えます。タグ名を使ってスタイルを適用する、つまり「同じタグ名の要素は、すべて同じスタイルになる」というのが最もシンプルですが、同一のタグであっても、それが置かれた場所によってスタイルを区別したい・・ということが当然あります。その場合は、開発者が要素に任意の名前を与えて、その名前を使ってスタイルを制御します。ページ内に１つだけ存在する特定の要素にのみデザインを適用したい場合は、ID名を利用し、ページ内に複数存在する要素に一括して同じデザインを適用したい場合は、CLASS名を利用します。
　以下、対象を特定するための代表的な方法を紹介します。

セレクタが既存のタグの場合
＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する場合
```
article  {
     background-color : gray;
}
```

子孫要素（要素の中の要素）にスタイルを定義する場合
親子をスペース区切りで接続します。
```
article p {
    line-height : 180%;
}
```

セレクタが ID 要素の場合
HTML要素に id="任意名称" を加え、CSSでは #任意名称 と書きます。
例：<article id="today">
```
article#today {
     font-weight: bold;
}
```
article#today は、単に #today と記述しても、同様に機能します。

セレクタが CLASS 要素の場合
HTML要素に class="任意名称" を加え、CSSでは . 任意名称 と書きます。
例：<article class="sunday">
```
article.sunday {
     color : red;
}
```
article.sunday は、単に .sunday と記述しても、同様に機能します。

CSSにおけるコメントアウトについて
```
/*  color: red;    */
```
のように　/* と */　で一定範囲を囲むと、コメント扱いとなります。
後で使う可能性のある記述を一時機能停止させたい場合にも使えます。

参考：様々なセレクタの書き方　＞　CSS/Selector

↑

CSSによるページレイアウト

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。

箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。

↑

ワイヤーフレームを描く

ワイヤーフレームとは、HTMLの枠組み構造を図解した「サイト設計図」です。HTML+CSSを効率よくコーディングするには、まずはじめにワイヤーフレームを描いて、header, nav, main {section+aside} , footer などの位置関係を明確にしましょう。詳細な領域区分をする場合、各要素 ID名を付ける場合は、この段階で明確にします。
GoogleImage:Web ワイヤーフレーム

↑

ボックスモデルを理解する

箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。

margin　境界の外側の余白
border　境界
padding　境界の内側の余白
width, height　内容部分の幅と高さ

参考:CSS/BoxModel

↑

ユニバーサルセレクタによる余白のリセット

ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding また line-height が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。
　ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制御が可能になります。CSSの先頭で、以下のような記述をするとよいでしょう。

* {
    margin: 0;
    padding: 0;
    line-height: 100%;
    list-style-type: none;
    text-decoration: none;
}

この例では、すべての要素に対して余白をゼロに、また装飾を「無し」にリセットしています。

↑

レイアウトに必須の手法

とりあえず、以下の２つの手法で大半のレイアウトは可能になります。

Flexbox・・子要素を横に並べる
Position・・要素を任意の位置に配置する

↑

Flexboxを用いたレイアウト

親要素（Flexコンテナ）に display: flex; を設定することで、子要素(Flexアイテム) の並び（縦・横）や順序（上下・左右）を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

HTML側の記述

<ul>
  <li><a href="#">about</a></li>
  <li><a href="#">gallery</a></li>
  <li><a href="#">links</a></li> 
</ul>

CSS側の記述

ul {
  display: flex;
  flex-direction: row;
}
li {
  width: 120px;
  margin-right: 20px;
}

詳しくは、CSS/Flexboxをご覧下さい。

↑

positionを用いたレイアウト

通常の「箱詰め作業」では、要素同士が重なるような配置はできません。しかし、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。

位置の基準となるブロック（親要素）に
```
position: relative;
```
と書きます。これで基準となるブロックの左上が原点（0,0）となります。

対象となるブロックに
```
position: absolute;
top: Ypx;
left: Xpx;
```
と書きます。これで当該ブロックは（X,Y）の位置に表示されます。

↑

テンプレートから個別ページへ

index.html と style.css のセットは、いわばページのテンプレート（ひな形）です。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。

gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。

↑

演習

サンプルのHTML構造を変えて（ワイヤーフレーム構造を変えて）様々なパターンサンプルを作ってみましょう。

以下のパターンは、サンプルから比較的簡単に変形できます。
```
#container{ header{ nav} , main{ section, aside } , footer }
#container{ header, main{ nav, section, aside } , footer }
```
全体を #container で囲むというのは、初歩の体験として全体をつかみやすくするための発想です。絶対こうしましょう・・というものではありません。

header, footer が画面幅100%になるパターン
```
header{ nav } , main{ section, aside } , footer
```

シングルページで校正する場合は、以下のようになります。
```
header, nav,  main{ section, section, section ・・}, footer
```

↑

ファイルのアップロードと公開について

作成したファイル(群)は、Webサーバーにアップして「公開」となります。
ここでは、説明のみとなります。

FTPクライアントソフト（例：FileZilla）を起動。
FTPサーバー（ホスト名）、ユーザID、パスワードの３つを入力して接続
一般的にはウインドウの左側があなたのPC（ローカルマシン）、右側が接続先サーバー（リモートサーバー）です。
接続先のサーバーには、Webサイトの構成データを格納する専用のフォルダが用意されています。その場所を一般にドキュメントルートといいます。
左のウインドウから右のウインドウへ「アップロード」します。

アップロードの仕方とアクセス方法は以下ような関係があります。
- ドキュメントルート直下の index.html(トップページ) を閲覧する場合
```
http://xxxxxxxx.com/
```
- ドキュメントルート直下の test.html を閲覧する場合
```
http://xxxxxxxx.com/test.html
```
- ドキュメントルート直下の blog フォルダ（中にindex.html）を閲覧する場合
```
http://xxxxxxxx.com/blog/
```

つまり、サーバー（ディレクトリ）がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。

参考１：FTP　RentalServer
参考２：GitHubPages というサービスを使って公開する方法もあります。

↑

Webサイトの制作

↑

テーマ

学校紹介を前提としたサイト、趣味のサイト、フォトギャラリーなど、内容は自由です。

↑

参考

↑

認定試験

時間：17:00 - 17:30
会場：17号館5階デジタルラボ503（実習機器をそのまま使用します）。
問題：試験問題（紙ベース）を配布します。

↑

Googleアカウントの活用について

Googleアカウントをお持ちの方は、本日の成果をGoogleDriveに保存されることをお勧めします。
Gmailをすでにご利用の方は、本日の成果を圧縮（.zip）して、以下あてに添付送信下さい（お持ちでない場合は手動で回収いたします）。
inoue.ko@ip.kyusan-u.ac.jp

本日の講習、お疲れ様でした。

はじめてのWebデザイン

ごあいさつ

本日のスケジュール

午前の部（講義と実習）

午後の部（実習）

実技試験

CONTENTS

導入

実習環境について

インターネットとWeb

開発環境の準備

サイトフォルダの準備

HTML

HTMLとは

HTMLファイルの作成

HTMLをブラウザで表示確認

HTMLタグの基本

参考

CSS

CSSとは

３種類の記述方法

CSSファイルの作成

HTMLとCSSの関連づけ

CSSの記法

CSSセレクタ

CSSによるページレイアウト

ワイヤーフレームを描く

ボックスモデルを理解する

ユニバーサルセレクタによる余白のリセット

レイアウトに必須の手法

Flexboxを用いたレイアウト

positionを用いたレイアウト

テンプレートから個別ページへ

演習

ファイルのアップロードと公開について

Webサイトの制作

テーマ

参考

認定試験

Googleアカウントの活用について

PAGES

GUIDE

DATA

午後の部（実習）　