Web情報デザイン 2021年4月20日
1
ガイダンスと準備
この講義の目的と進め方
Web
ページの構造を記述する「HTML
」(HyperText Markup Language )と、 Web
ページの外見を記述 する「スタイルシート」(CSS, Cascading Style Sheets )を組み合わせて、誰でもアクセスしやすい Web
コン テンツをデザインする能力を習得する。1.
ガイダンスと準備…1
回目2. HTML…
全4
回(2
～5
回目)3. CSS…
全4
回(6
～9
回目)4.
総合演習…
全4
回(10
～13
回目)Teams
の授業用チームに参加しよう大学の
Teams
に「商「Web
情報デザイン」2021
春(火3
)大池」という名前のチームを作成した。参加するための招待コードは「
5nw59h1
」だ。この講義の履修者はかならず、パソコンやスマホのTemas
ア プリを利用し、チームに参加すること。Teams
は、講師から緊急の連絡(課題の提出ミスの指摘など)を行なったり、授業時間外に学生からの質問や相談をチャットで受け付たりするために利用する。面接授業なので、
Teams
内でのミーテ ィング(テレビ会議)は行なわない。授業の進め方
次回以降の授業の流れは、おおよそ以下のようになる。
1.
授業週の月曜日までに、授業用ページ(下記URL )で PDF
形式のプリント(2
～3
枚程度)を配布す る。パソコンでもスマホでも閲覧可能なので、授業より前にプリントにあらかじめ目を通してお くこと。面接授業では、紙に印刷したプリントも配布する(内容は同じ)。授業用ページの
URL
。ブラウザーの「ブックマーク」(お気に入り)に登録しておくこと。https://www3.cuc.ac.jp/~daichi1/webd/
2.
授業時間(火曜日3
時間目)には、第2
コンピューター実習室で授業を行なう(出席必須)。講師 による解説の後、プリントに書かれているWeb
ページ作成の演習を、教室内のパソコンでVSCode
を使って行なう。なお、自分のパソコンを持ち込んでいる人(2
年生など)は、自分のパソコンで作業してもかまわない。
3.
授業時間内に不明な点があれば、教室内で質問すること。授業時間以外では、Teams
を使って講 師とのチャット(一対一のメッセージのやりとり)で質問すること。成績の付け方
⚫ 出席
…
授業の出席と演習内容で判定。⚫ 授業貢献度
…20
点。ただし、全体(13
回)の1/3
を超えて欠席すると自動的に不可。⚫ 課題点
…80
点。総合演習で作成したWeb
コンテンツをレポートとして提出(1
回のみ)。Web情報デザイン 2021年4月20日
2
ドキュメントに作業用の
WebDesgin
フォルダーを作成するこの講義の演習ではファイルをいくつも作成するため、ドキュメントにこの講義専用のフォルダー
(ファイルの置き場所)を作成し、そこにまとめて保管する。フォルダー名は、授業名( Web
情報デザイン)を短縮して英字化した「
WebDesign
」(ウェブデザイン)とする。これにより、教室のパソコンでは、毎週違う席に座っても演習や課題の作成を継続して行なえる。
自分のパソコンで作業する人は、ドキュメント以外にフォルダーを作ってもいい。その場合は、この後 の説明中の「ドキュメント」を、自分で作成した場所に読みかえること。
1.
ドキュメントのフォルダーが開いていなければ、タスクバー(画面下)の左側の アイコンをクリ ックしてウィンドウを開き、左のリストの「ドキュメント」をクリックする。2.
ウィンドウ内でCtrl-Shift-N
キーを押すか、右クリックで表示されるメニューから「新規作 成」→「フォルダー」を選択し、新しいフォルダーを作成する。3.
フォルダー名を「WebDesign
」に変更する。このとき、文字はすべて半角英字で書き、途中に日本 語や空白を混ぜたりしないこと。ファイル名の拡張子を表示する設定に変更する
Windows
の初期設定では、ファイル名末尾の拡張子(「.html
」など)がファイル一覧に表示されない。
HTML
文書の中でリンク先などを指定するさい、拡張子を含めた正確なファイル名を指定する必 要があるため、拡張子を表示する設定に変更する。1.
ドキュメントのフォルダーを表示したウィンドウ上部の「表示」タブをクリックする。2.
上部左の「表示/非表示」グループにある「ファイル名拡張子」の□にチェック✓を付ける。すでに チェックされているなら、そのまま変更しない。Web情報デザイン 2021年4月20日
3 Visual Studio Code
のインストールこの講義の演習では、「
Visual Studio Code
」(以下VSCode )という無料のアプリを使って、 Web
ペー ジの基になるHTML
文書とCSS
文書を作成する。以下では、USB
メモリなどで持ち運び可能なWindows
用VSCode
(zip
版)のインストール手順を説明する。1. Windows
用のzip
ファイルをダウンロードする。① ブラウザーで
VSCode
の公式ページ( https://code.visualstudio.com/)を開き、ボタ
ンなどを押さずにページの一番下を表示する。② 重要 大きなボタンではなく、
Windows
用の「.zip
」形式の64bit
をクリックする。自動的に ダウンロードが始まるので、完了するのを待つ。③ ダウンロードフォルダーを開いて、「
VSCode-win32-x64-
中略.zip
」を右クリックして「プロ パティ」を選択する。中略の部分には、最新版のバージョン番号が入る。④ プロパティの下のほうに「許可する」があればそれをチェック✓して
OK
ボタンを押す。2. ZIP
ファイルの内部に圧縮してまとめられている多数のファイルを、ドキュメントのVSCode
フォ ルダーに展開する。Windows
標準の機能を使うなら、次のようにすればいい。①
ZIP
ファイルを右クリックし、メニューから「すべて展開」を選択する。② 「圧縮(
ZIP
形式)フォルダーの展開」ウィンドウが開いたら、参照…ボタンを押す。③ 展開先を選ぶウィンドウが開くので、左のリストから「ドキュメント」を探してクリックで選択 する。その後、右下のフォルダーの選択ボタンを押す。
④ 「圧縮(
ZIP
形式)フォルダーの展開」ウィンドウに戻ったら、中央の入力欄の右側をクリック し、入力済みの内容(「C:\Users\
ユーザー名\Documents
」など)の後に、「\VSCode
」をキー 入力する。円記号はEnter
キー左上の\
キーを使って半角で入力すること。⑤ 右下の展開ボタンを押し、途中経過を示すグラフを見ながら終了するまで待つ。新たなウィ ンドウが開いて、
VSCode
フォルダーの内容が表示されれば作業完了だ。3.
重要VSCode
フォルダーの中にdata
フォルダーを新規作成する。VSCode
は、このフォルダーが存在すると、設定ファイルなどをすべて
data
フォルダーに保存するようになる。①
VSCode
フォルダーの内容を表示するウィンドウの内部をクリックしてからCtrl-Shift-N
キーを押して、新しいフォルダーを作成する。
② フォルダー名を「
data
」に変更する。名前はすべて半角英字で書くこと。変更が完了すると、bin
フォルダーとlocales
フォルダーの間にdata
フォルダーが表示されるはずだ。4.
デスクトップ(壁紙)に、VSCode
を起動するためのアイコン(ショートカット)を作成する。①
VSCode
フォルダーにある「Code.exe
」を右クリックし、メニューから「ショートカットの作成」を選択する。アイコンに矢印が付いた「
Code.exe -
ショートカット」が作成される。② この「
Code.exe -
ショートカット」を右クリックし、メニューから「名前の変更」を選択して、「
VSCode
」という名前に変更する。③ この「
VSCod
」を、デスクトップ(壁紙)にドラッグ&ドロップで移動する。5.
デスクトップの「VSCode
」アイコンをダブルクリックしてVSCode
のウィンドウを開く。6. VSCode
のメニューなどを日本語化する。① ウィンドウ左端の一番下の アイコン(□
4
つ)をクリックして、左上の検索欄に「japan
」と キー入力し、検索結果の先頭にある「Japanese Language Pack for …
」をクリックする。② ウィンドウ中央の説明中の
INSTALL
マークをクリックする。③ ウィンドウ右下の
Restart Now
ボタンを押してアプリを再起動すると、日本語表示になる。Web情報デザイン 2021年4月20日
4
VSCode
の設定を変更するVSCode
の設定を変更して、この講義の演習でHTML
文書やCSS
文書を作成するさいに使いやす くする。設定画面は、Ctrl-,
キーを押すか、ウィンドウ左下の アイコンをクリックし、メニューから「設定」を選択することで、ウィンドウ中央に大きく表示される。
設定する項目が非常に多いため、上部の「設定の検索」欄に単語を入力して項目を絞り込むとい い。入力する単語は以下の説明で個別に指示する。なお、単語入力後に
Enter
キーを押す必要はな く、すぐに絞り込んだ結果が表示される。注意すべきなのは、この設定画面には
OK
ボタンや適用ボタンがなく、変更した内容はすぐに有効 になるし、設定が保存されて次回以降も使われることだ。なお、間違って設定を変更してしまったと きには、その項目の左にある アイコンをクリックし、メニューから「設定をリセット」を選択しよう。設定画面を表示したら、以下の設定を変更しよう。作業が終わったら、紙のプリントの□に✓を付 けるといい。
□ タブを複数段表示可能にする
上部に並ぶタブを複数段表示可能にする。多数のファイルを扱う講義終盤に役立つ。
① 上部の「設定の検索」欄に「
wrapt
」と(最後のt
まで)キー入力する。② 先頭の設定項目「
Workbench > Editor: Wrap Tabs
」をチェック✓する。□ 説明文のホバー表示を無効にする
編集中に説明文(英語)がホバーする(かぶさる)のを防ぐ。
① 上部の「設定の検索」欄から以前の内容を消し、「
hovere
」と(最後のe
まで)キー入力する。② 先頭の設定項目「
Editor > Hover: Enabled
」のチェック✓を外す。□ ミニマップを無効にする
ウィンドウ右側のミニマップ(ファイル内容の縮小表示)を消す。
① 上部の「設定の検索」欄から以前の内容を消し、「
mini
」とキー入力する。② 先頭の設定項目「
Editor > Minimap: Enabled
」のチェック✓を外す。□ フォントサイズを少し大きくする
ファイルの内容を表示するためのフォントを少し大きくする。
① 上部の「設定の検索」欄から以前の内容を消し、「
fonts
」とキー入力する。② 上から
3
番目の設定項目「Editor: Font Size
」を「16
」に変更する。数字はすべて半角で書くこと。□ ファイルを
1
秒後に自動保存する編集中のファイルを、入力などが終わった
1
秒後に自動的に上書き保存する。① 上部の「設定の検索」欄から以前の内容を消し、「
autosa
」とキー入力する。② 先頭の設定項目「
Files: Auto Save
」のリストをクリックし、2
番目の「afterDelay
」を選択する。□ 自動整形機能を有効にする
ファイルの内容を自動的に段付け整形する機能の設定を行なう。
① 上部の「設定の検索」欄から以前の内容を消し、「
tabsi
」とキー入力する。② 上から
2
番目の設定項目「Editor: Tab Size
」を「2
」に変更する。③ 上部の「設定の検索」欄から以前の内容を消し、「
formon
」とキー入力する。④ 先頭
2
つの設定項目「Editor: Format On Paste
」「Editor: Format On Save
」を両方チェック✓する。⑤ 上部の「設定の検索」欄から以前の内容を消し、「
inner
」とキー入力する。⑥ 先頭の設定項目「
HTML > Format: Indent Inner HTML
」をチェック✓する。Web情報デザイン 2021年4月20日
5
定型文(スニペット)を登録するVSCode
には、「スニペット」と呼ばれる定型文を挿入する機能がある。講義用HTML
文書のスニペットを登録すれば、
HTML
文書を新規作成するさいのキー入力を大幅に減らすことができる。1.
ウィンドウ左下の アイコンをクリックし、メニューから「ユーザースニペット」を選択する。2.
ウィンドウ上部に入力欄とリストが表示される。リストから「html (HTML)
」を選択する。3.
「html.json
」というファイルが編集状態になる。英文で設定方法の説明などが書かれている が、それらの内容をすべて削除する。4.
ブラウザーで授業用ページを開き、「ガイダンスと準備」横のリンクをクリックして、このプリント と同じ内容の5.
講義用HTML
文書のスニペット(リスト1 )を PDF
ファイルからすべてコピーして、「html.json
」 の編集画面に貼り付ける。先頭や末尾の波カッコが抜けないように注意しよう。リスト
1:
講義用HTML
文書のスニペットワークスペースへの登録と保存
VSCode
の「ワークスペース」(作業場所)にWebDesign
フォルダーを登録すると、VSCode
のサイドメニューにファイル一覧が表示され、ファイルの作成や切り替えなどを簡単に行なえるようになる。ま た、ワークスペースの設定を保存しておけば、いつでもこの状態を再現できる。
1. VSCode
のメニューから「ファイル」→「フォルダーをワークスペースに追加…」を選択すると、フォルダー選択ウィンドウが開く。
2.
左のリストの「ドキュメント」をクリックし、右側に表示されたWebDesign
フォルダーをクリックし て選択後、右下の追加ボタンを押す。フォルダー選択ウィンドウが閉じて、名前が未設定のワー クスペースにWebDesign
フォルダーが登録される。3.
メニューから「ファイル」→「名前を付けてワークスペースを保存…」を選択すると、保存先のファ イルを指定するウィンドウが開く。保存先はWebDesign
フォルダーになっているはずだ。4.
ファイル名の入力欄に「Web
情報デザイン」と入力し、右下の保存ボタンを押す。これで、ワーク スペースの設定が、「Web
情報デザイン.code-workspace
」というファイルに保存される。5.
左側のサイドメニューに「WEB
情報デザイン(
ワークスペース)
」が表示される。サイドメニューの 表示の有無は、ウィンドウ左端の一番上のアイコン(重なった書類)で切り替えられる。{
"html5": {
"prefix": "webd", "body": [
"<!DOCTYPE html>", "<html lang=\"ja\">", "\t<head>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width\">",
"\t\t<!-- ここより上に書いてある内容は変更しないこと -->",
"\t\t<link rel=\"stylesheet\" href=\"default.css\">", "\t\t<title>Web 情報デザイン${1:n}枚目</title>",
"\t</head>", "\t<body>", "\t\t$0", "\t</body>", "</html>"
], } }
