LogoMark.png

教員免許更新講習|2020

はじめてのWebデザイン

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

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


ごあいさつ

html_css.png

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



本日のスケジュール

午前の部(講義と実習)

午後の部(実習) 

実技試験


CONTENTS




導入講義

実習環境について

インターネットとWeb

情報共有に関わる発想の転換のすすめ

なぜメール(Push)ではなくWeb(Pull)なのか・・
こちらのページをご覧ください。?




開発環境の準備

使用するソフトウエア

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


サイトフォルダの準備

folder.jpg

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

注)フォルダ名、ファイル名は必ず半角英数で
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)は、ブラウザのウインドウにドラッグ&ドロップするだけで表示されるので、記述に間違いがないかを簡単に確認できます。


HTMLタグの基本

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

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

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


参考

CSS

CSSとは

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

3種類の記述方法

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>内に、以下の1行を追記して下さい。

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

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

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


CSSの記法

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

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

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

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

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


CSSセレクタ

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


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

html_css.png

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

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


ワイヤーフレームを描く

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


boxModel.png

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

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

参考:CSS/BoxModel


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

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

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

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


レイアウトに必須の手法

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


Flexboxを用いたレイアウト

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

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


positionを用いたレイアウト

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


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

html_css_2.png

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

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




演習

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

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

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

FileZilla.png

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

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



Webサイトの制作

テーマ

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

参考


認定試験


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


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





PAGES

GUIDE

DATA


*1 補足:Dreamweaverやホームページビルダーの利用について
一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、HTMLもCSSもJavaScriptもすべてテキストファイルなので、テキストエディタさえあれば他には何もいりません。これらはワープロ感覚で組み上げたページから自動的にHTMLとCSSを書き出すソフトで、HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。

添付ファイル: fileQR.png 26件 [詳細]
Last-modified: 2020-08-24 (月) 19:49:42