第２回 HTML+CSS サンプル体験
Webデザイン基礎B/2020｜造形短期大学部｜2020.09.21｜対面
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート
情報共有シートは、遠隔授業時の質疑応答シートを兼ねています。 - 今回は、HTML＋CSS によるWeb制作をサンプルを通して体験します。
- 特設サイトへの情報書き込みの練習も行います。
以下、順に説明しますので、お読み下さい。
本日のメニュー
1. 学習環境の確認
あなたのPC上に、Web制作の環境が必要です。以下の２種類のツールを使います。前回同様に、目の前のPC上で利用できる状態にして下さい。
テキストエディタ
- テキストエディター とは、文字を入力編集するためのツールです。
- テキストエディタはあなたのお好みで何でも構いませんが、大学の実習室では、Atomの利用を前提に進めます。
https://atom.io/ - 実習室の授業では、Atom をUSBメモリーにコピーしておいて、利用の際にデスクトップにコピーして下さい。
ブラウザ
- ブラウザとは、Webページを閲覧するソフトウエアのことで、Chrome、Firefox、Safari、MS Edge などがそれにあたります。
- Windows の方、Mac の方、いずれも、Chrome、Firefox、はダウンロードしてインストールしておいて下さい。
2. 基本サンプルのダウンロードと動作確認
受講生の中には、Webデザイン基礎A, B の受講経験のない方もいるかと思います。そこで、まずは、Webサイトを構成するファイルを丸ごとダウンロードしていただき、それを改編しながら、各ファイルの役割を確認していただきたいと思います。
サンプルのダウンロードと解凍
HTML+CSS によるWebサンプルです。以下から丸ごとダウンロードして、フォルダを開けてみて下さい。
- 以下にアクセスして、緑の「clone or download」をクリック。「Download ZIP」を選択して、あなたの手元にダウンロードして下さい。
https://github.com/koichi-inoue/SampleSite
- ダウンロードした SampleSite-master.zip をデスクトップに移動して下さい。
- ZIP形式に圧縮されているので、これを解凍します。
SampleSite-master.zip をダブルクリック、または、右クリック＞解凍
＞ SampleSite-master フォルダーができます。
- フォルダを開いて内容を確認して下さい。
- index.html：HTMLファイル
- style.css：スタイルシート
- README.md：不要です。削除して下さい。
サンプルの表示確認
- ブラウザで新規ウインドウ、または、別のブラウザを起動して下さい。
- index.html を ブラウザのウインドウにドラッグ&ドロップして下さい。
- サンプルが表示されればOKです。
サンプルは以下と同じ形で表示されるはずです。
https://koichi-inoue.github.io/SampleSite/
サンプルのフォルダについて
- フォルダ名を以下のように変更して下さい。
例）SampleSite-master ＞ SampleSite
- フォルダ名、ファイル名は必ず半角英数で
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。
3. ソースコードをテキストエディタで編集
では、さっそくサンプルを編集してみましょう。
本日は、みなさんの手元で作業を行なうのみです。演習の進捗確認については、次週以降、相互に閲覧可能となる仕組みをつくります。今日の段階では、手元のWebサイトフォルダをしっかり管理しておくようお願いします。
Webサイト制作の基本
- Webサイトの大半は、HTML と CSS という２種類のファイルで構成されています（写真やイラストは、独立したデータとして別に扱います）。
- index.html、style.css ともに テキストファイル と呼ばれる形式のデータで、文字が並んだだけの、最もシンプルなものです。
- テキストデータは、ワープロ、メモ帳、その他、あらゆるソフトウエアでそれを開いて編集することができます。
- したがって、文字列の編集ができる テキストエディタがあれば、Webサイトは制作できるのです。特別なソフトウエアは不要です。
HTMLとCSSの説明は後日になります。今日は、あなたのテキストエディタの使い方に慣れていただくために、軽く触るだけです。
テキストエディタを起動して下さい
- 本日の最初に準備した、あなたのテキストエディタを起動して下さい。
- ファイル＞開く＞index.html を選択 あるいは、index.html をエディタの画面にドラッグ＆ドロップでファイルが開けることを確認して下さい。
体験のプロセス
編集体験のプロセスは以下のとおりです。事前にご確認下さい。
- index.html あるいは style.css をテキストエディタで開く
- 部分的な書き換えを行う
- ファイル＞保存（英語では FILE ＞ SAVE ）
- index.html をブラウザにドラッグして結果を確認
すでに index.html が表示されていた場合は、ブラウザの更新
index.html の編集体験
まず、はじめに HTMLファイルの編集を体験します。
- index.html をテキストエディタで開いて、以下の部分を書き換えて、ページの情報が変化することを確認して下さい。
<title>Sample Site</title> の Sample Site という文字列 <h1>Sample Page</h1> の Sample Page という文字列 <li><a href="#">home</a></li> の home という文字列を top に <article> article 01 ← この部分を長文に </article>
- ＜＞ の部分、HTMLタグ の構成が壊れるとページのレイアウトが崩れます。
崩れてしまった場合は、COMMAND + Z（Windows は CTRL + Z ）で編集を元に戻して下さい。
style.css の編集体験
次に、CSSファイルの編集体験を行います。
- style.css をテキストエディタで開いて、以下の部分を書き換えて、ページのビジュアルが変化することを確認して下さい。
color: white; ＞ color: yellow; background: #333; ＞ background: red;
- color は文字の色です。CSSファイル内に数カ所あります。
- background は背景色です。CSSファイル内に数カ所あります。
- 色の英語名については、以下を利用することができます。
https://www.colordic.org/
- 記法の構成が壊れるとCSSが機能しなくなります。崩れてしまった場合は、COMMAND + Z（Windows は CTRL + Z ）で編集を元に戻して下さい。
以上、「ファイルを書き換えたらページの表示が変わる」ということが確認できれば、OKです。
4. テキストエディタの操作演習
次回以降の演習に備えて、あなたのテキストエディタの基本操作と、コードの書き方について、学習しましょう。
あなたのテキストエディタで、以下の基本操作を確認して下さい。
- 文字列のコピー＆ペースト（キーボードショートカット）
- 画面の分割表示の方法（２画面同時編集ができるように）
- 文字列の検索と置換の方法
- インデント（字下げ）の効率的なやりかた
ATOM をお使いの場合は、以下に解説を書いています。
ソースコードの書き方について
- ソースはそれ自体、見やすく書くのが基本です。
- TAB,半角スペースでインデント（字下げ）を設定しましょう。
- TAB,半角スペースは表示上は無視されます。
- 全角スペースを使うと簡単に余白を作ることもできますが、デザイン上の余白はスタイルシートを使うのが基本です。
文字コードについて
- テキストデータは、特定の文字コードでデジタルデータ化されています。
- 現在は 世界中の文字を扱えるUTF-8という文字コードを使って記述するのが一般的なので・・・
- エディターの環境設定で、文字コード：UTF-8 を確認して下さい。
- HTMLのヘッダー部分、meta タグに文字コード：UTF-8が正しく宣言されていることを確認して下さい。
5. 特設サイトの更新
本日の成果、あなた自身の制作環境の構築結果について、特設サイトの各受講生のページに、下記の雛形をコピー＆ペーストした上で、各項目をそれぞれの環境情報に修正して下さい。
== APPENDIX == ===私の演習環境=== * OS： macOS 10.14.6（MacBook Air） * Editor：Atom * Browser：Chrome, Firefox, Safari <br>
以上、第２回目は、学習環境の準備とサンプル体験をもって終了とします。
第３回は「GitHubアカウント取得」作業を行うため遠隔授業となります。
教室（同一のIP）から全員一斉にアカウント作成は、相手から「攻撃」とみなされるらしく、うまくいかないことがわかっています。
次回の演習では、Webサイトの公開方法についてご説明します。
練習用に大学のサーバーも用意されていますが、学内ネットワークでしか閲覧ができません。そこでWeb配信の機能をもつ GitHub のアカウントを取得して、そこからWebサイトを相互に閲覧できるようにします。