課題1 画像の表示

課題1-1

  1. Terapadを起動する。


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


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

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


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



  6. 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存する。
  7. (<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>
    

  8. index.htmlをChromeで開く。


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



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


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


  14. このように画像が表示される。こうなっていることが確認できたら課題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の方を書き換えてしまいやすい。その場合は最初からやり直しになるので、必ず行うこと)

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


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

課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system