nishio.matrix.jp · web viewwordファイル...
TRANSCRIPT
芸工 情報処理 第4回 2020年10月14日 西尾
【音声ファイル1】
授業の進め方
遠隔授業であり、授業で必要な教材は学情システムから入り、[北]情報処理の「レポート」の欄からたど
り、指示にあるニシオマトリックスのページから、参照してください。
https://nishio.matrix.jp/kyozai/mei.html質問やコメントなどは下記の図を参考にしてメールで送ってください。
課題レポート提出は学情システムの「レポート」から「第 X回 情報処理 レポート」の欄にアップしてください。
情報処理で学習する内容 3次元CGを扱えるWebプログラミング JavaScript言語で3DCGを扱う Three.jsを使い、3DCGの基礎を学ぶ。授業の前半はHTML、CSS、JavaScriptでWebプログラミング(マルチプラットフォーム)を行うための基礎を学習する。後半では3次元 CGのプリミティブ図形、オブジェクト表面の表現、ライトなどの3次元 CGの技術を学びながら作品を作成して行く。
0.前回の振り返り
ニシオマトリックスの「教材」の「ステップ0」から「Webプログラミング練習用サンプル」をダウンロードした。
さらにzipファイルを解凍し、デスクトップ上の「IT」「IT3」フォルダを作成し「web_prog」フォルダの中に、htmlファイル、cssフォルダ、imagesフォルダを置いた。VSCodeを使い、htmlファイルを編集し、表示をした。
1.今回
1.1 「IT3」フォルダ下のファイルを編集する 前回作成した「IT3」フォルダ下のファイルを編集して表示をします。 ここで、1つ訂正があります。
ファイルの階層構造について、操作の都合上、Macの場合と、Windowsの場合異なります。
(1)Macの場合のファイルの階層構造 先週説明したままです。
(2)Windowsの場合のファイルの階層構造 先週の説明と異なり、「web_prog」が 2重になり、「web_prog」の下に「web_prog」が出来てしまいます。
機能的には何も問題はありませんが、気を付けて使ってもらえばOKです。
【音声ファイル2】
1.2 「IT3」フォルダ内の探検 前項でデスクトップ上に先週作成した「IT」「IT3」フォルダの階層構造について述べました。実際にデスクトップ画面から、フォルダのアイコンをダブルクリックして、「IT」フォルダの中の「IT3」フォルダの中に入ってみましょう。さらに「web_prog」フォルダに入って行きます。(Windowsの場合前項の事情により、2度「web_prog」フォルダに入る操作が発生します)「web_prog」フォルダの表示は
のようです。
表示が異なり、htmlファイルであることが表示されない場合、以下のように、「web_prog」ダイアログの中で、マウスの右ボタンクリックにより、プルダウンメニューが表示された状態で、「表示」―「詳細」と
選べば、詳細表示が見えます。もちろん「大アイコン」などを選べば、表示が変わります。いろいろ試してみ
てください。
「index.html」ファイルをダブルクリックしてみましょう。
先週編集したホームページが表示されます。
ここで、上のURL(インターネットのアドレス)のところが「C:」で始まっていることを確認しましょう。PCのディスク内のファイルを表示していることを示しています。よくある「http://www.tbc.co.jp/」などは、インターネットで外のホームページを参照していることを表しています。(これは TBCのホームページです)
【音声ファイル3】
1.3 VSCodeによりファイルを編集する VSCodeを立ち上げます。先週、編集していた画面が出てきます。
このまま編集を続けても良いのですが、練習のため、一旦 マークを押してファイル表示をやめます。✖
「IT3」-「web.prog」-「web.prog」フォルダの中の 「index.html」ファイルをのアイコンを、VSCodeにドラッグしてみましょう。
「index.html」ファイルの中身が表示され、編集可能となりました。
「css」フォルダをダブルクリックして中に入る
VSCodeに「index.html」をドラッグして開いた時と同じように、「style.css」ファイルをドラッグする
「style.css」ファイルの中身が表示される
「index.html」をダブルクリックして表示
【音声ファイル4】
1.4 VSCodeによりcssファイルを編集する VSCodeの画面を表示します
何だか記号のようなものばかりで、分かりにくいですね。
でも、大丈夫、全体がよくわからなくても、自分の必要なところだけ理解できればOKです。
以下の図のように、「header」のバックグラウンドカラーを変更します。チョット微妙な操作ですが、「rgb(」の後ろの数字あたりに、マウスポインタを持っていきます。運がいいと、パレットが表示されるので、色をクリックして取ってみてください。
色が青から変化しましたね。ファイルの保存を行い、「index.html」を再表示してみましょう。
リロードして更新をすると、ヘッダーの色が変わったのを確認できます。
VSCodeの画面で「style.css」ファイルの他の色指定のところを、同じ要領でパレットにより、色を変化させ、保存、再表示を行い確認する作業を数回行ってください。
頭ではなく、感覚と手で覚えましょう。
【音声ファイル5】
3.課題
cssファイル「style.css」を編集し、色を変えた「index.html」を表示しましょうスクリーンショットを撮り(キャプチャする)、Wordファイルに貼り付けて、Wordファイルの最初に「芸工情報処理第4回 2020年 10月 14日」、2行目に「学籍番号 氏名」を入れてください。
「index.html」ファイルも VSCodeで編集して、前回と同様に、学籍番号 名前を入れ、本文を少しアレンジしてください。
最後に、感想・コメントを 3行程度でよいので書いてください。
課題レポート提出は学情システムの「レポート」から「第 X回 情報処理 レポート」の欄にアップしてください。
アップするWordファイルのファイル名は「情報処理第X回 学籍番号名前」の形式で、下の提出例を参考にしてインターネットで学情システムに提出してください。
提出例
Wordファイル ファイル名「芸工情報処理第4回 123456西尾吉男.docx」