課題1　画像の表示

課題1-1

  1. Terapadを起動する。


  2. 「表示」→「オプション」で、図のようにしてタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
    3. 試しにタブ(キーボードのTabキー)、全角、半角のスペースを入れてみると、このように表示される。


    HTMLを書くときに変なところに全角スペースを入れてしまうとエラーになったり、想定外の表示になったりするので、こうして一目でわかるようにしておく。
    演習室ではPCを起動するたびに設定が元に戻されるので、この作業は毎回行う。

  3. デスクトップに「課題1」フォルダーを作り、さらにその中に「1」フォルダーを作る。


  4. Terapadで「ファイル」→「文字/改行コード指定保存」を選び、文字コードを「UTF-8N」にして (こうしないとブラウザで見たときに文字化けする)、さっき作った「1」フォルダーの中に「index.html」という名前で保存する。



  5. 以下の囲みのものをTerapadにコピー＆ペーストし、上書き保存する。
    6. (<head>の下の行は、このファイルのエンコード形式を指定するもの)
    (その下の2行はスマホ対応のために必要な設定)
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<style type="text/css">img {max-width: 100%;}</style>
	<title>ページタイトル</title>
</head>
<body>
本文
</body>
</html>

  6. index.htmlをChromeで開く。


  7. ページタイトル、本文を以下のように書き換えて上書きし、Chromeのページを更新する。
    8. (<br>は改行の命令。これがないと、エディタ上で改行してもブラウザでは改行されない)



  8. ここを右クリックし、画像ファイル「flower.jpg」を「1」フォルダ (index.htmlが入っているフォルダ) に保存する。
    9. (このページをChromeかFirefoxで開いている場合は「名前を付けてリンク先を保存」)


  9. index.htmlを次のように書き換えて上書きし、Chromeのページを更新する。


    10. このように画像が表示される。こうなっていることが確認できたら課題1-1は完了。
補足1
F12キーを押すと開発用のメニューが表示される。
図のアイコンで切り替えればスマホでの表示が確認できる。
(もしindex.htmlの5, 6行目がないと、スマホではかなり見づらくなる)
補足2
「width」を使うと、画像を表示するときの横幅を指定できる。
指定しなければ元画像のサイズのまま表示される (ここで使っている画像は600x450ピクセル)。
補足3
「hight」で画像を表示するときの高さを指定できる。ただしwidthと併用した場合は、元画像とアスペクト比を合わせないとこのように歪んでしまう。そのため、指定するのはwidthかhightのどちらかにしておくとよい。
補足4
別のサイトで使われている画像をダウンロードしなくても、画像を右クリックしてアドレスをコピーし、


「img src」の値に入れてやればその画像を自分のページに表示させられる。
(ただし、この方法を使うときは著作権に注意が必要)
補足5
例えば自由制作で作ったモデルのスクリーンショットを使いたければ、モデルを表示した状態でキーボードのPrtSc (PrintScreen) キーを押し、ペイントやペイント3Dで貼り付けて保存すればよい。
「ペイント3D　トリム」「ペイント　トリム」などで検索すれば、必要な部分だけを残して他を切り取る方法もわかる。

課題1-2

  1. 課題1-1の結果表示用のChromeのタブ、TeraPadを閉じる。
    2. (これをやらないと、課題1-2をやっていたつもりで課題1-1の方を書き換えてしまいやすい。その場合は最初からやり直しになるので、必ず行うこと)

  2. 「課題1」フォルダの中に「2」フォルダを作る。


  3. 「1」フォルダのindex.htmlを「2」フォルダにコピーする。
  4. 新しくTeraPadを開く。
  5. 「2」フォルダのindex.htmlをTeraPadにドラッグ＆ドロップする (課題1-1と同じ状態のindex.htmlが開く。ただし、これをChromeで開いてもそのままでは画像は表示されないはず)。
  6. そのindex.htmlを編集し、オリジナルのページを作る。
課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system