課題1 画像の表示

課題1-1

  1. Visual Studio Codeを起動する。


  2. 「File」→「Preferences」→「Settings」で、図のようなメニューを出し、検索欄に「render whitespace」と入力する。


  3. 設定を「none」から「all」に変更する。
    こうすることで半角スペースが「・」で表示されるようになる。
    特に全角スペースは誤動作の原因になるので、これを見つけやすくするのは非常に大事。
    (全角スペースを入れてしまったところは「・」が表示されないので、それを目印にして見つける)
    演習室ではPCを起動するたびに設定が元に戻されるので、この作業は毎回行う。

  4. デスクトップに「課題1」フォルダーを作る。


  5. Visual Studio Codeで「Exproler」→「Open Folder」を選び、上で作った「課題1」フォルダーを開く。
    このようになっていればOK。

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


  7. 「1」フォルダーの中に「index.html」というファイルを作る。


  8. 「index.html」に以下のようにしてコードを記述する。
    HTMLファイルは html, head, body などの「タグ」で囲んだ中にいろいろなものを記述する。「/」のない方を開始タグ、「/」がある方を終了タグという。
    Visual Studio Code では開始タグを書くと自動的に終了タグが入力される。
    この時点のコードはこうなっていればOK。

  9. 以下のようにしてコードを追加し、最後に Shift+Alt+F キーを押す。
    Shift+Alt+Fキーで自動整形が行われる (Processing の Ctrl+T と同じ)。
    普通のプログラムで { と } に囲まれたものを一段深くして書く (インデントをつける) のと同様に、HTMLファイルでもタグで囲まれたものは一段深くする。
    これを行うことで「タグの閉じ忘れ」も防げる。
    ただし、htmlタグは一番外側で全体を囲むものなので、これだけは例外的にインデントを省略することが多い (Visual Studio Code の初期設定でもそうなっている)。
    この時点のコードはこうなっていればOK。

  10. 以下のようにコードを書き換える (インデントがこれと異なっていた場合はShift+Alt+F キーを押して自動整形する)。さらに Ctrl+S キーを押して上書き保存する。
    半角スペースの有無、大文字・小文字の違い、ダブルクォーテーションの対応にも注意。
    間違っているとここでの設定が機能しなかったり、機能してもブラウザでエラーが出たりする。
    5行目はこのファイルのエンコードの設定、6行目はスマホでこのページを見たときの表示用の設定、7~11行目は画像を表示させたときにブラウザから横にはみ出ないようにするための設定。
    このように、headタグで囲んだ部分にはいろいろな「お約束」を書く。

  11. index.htmlをFireFoxで開く (右クリック → プログラムから開く → FireFox)。
    タブの部分には titleタグで囲った「ページタイトル」が、ブラウザの本体の方には bodyタグで囲った「本文」が表示される。


  12. ここを右クリックし、画像ファイル「flower.jpg」を「1」フォルダ (index.htmlが入っているフォルダ) に保存する。
    (このページをFireFoxで開いている場合は「名前を付けてリンク先を保存」)
    (Visual Studio Code でも「1」フォルダーの中に「flower.jpg」が追加されるはず。こうならない場合は画像の保存先を確認する)


  13. コードをを次のように書き換えて Ctrl+S キーで上書きし、FireFoxのページを更新する。
    (赤枠が変更部分。この図では全角コロン「:」は黄色でハイライトされているが、演習室の環境ではこのハイライトはない)
    (画像はimgタグを使って表示する。「src」に画像のファイル名を入れるとその画像が表示される。imgタグには終了タグはなく、単独で使われる)
    (<br>は改行タグ。これを入れることでブラウザ上で改行される。これにも終了タグはなく、単独で使われる)


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


ソースにエラーがあるときはその部分に赤い点線のアンダーラインが表示される (この場合は「flower.jpg」の前の「"」が足りない)。

この場合はVisual Studio Codeでもエラーがある部分の文字が赤くなる。

課題1-2

  1. 「1」フォルダにある「index.html」をコピーし、「2」フォルダの中にペーストする。


  2. 「2」フォルダのindex.htmlを編集し、オリジナルのページを作る。

課題の条件
自由制作で作ったSketchUpのモデルのスクリーンショットを使いたければ、モデルを表示した状態でキーボードのPrtSc (PrintScreen) キーを押し、ペイントやペイント3Dで貼り付けて保存すればよい。
「ペイント3D トリム」「ペイント トリム」などで検索すれば、必要な部分だけを残して他を切り取る方法もわかる。

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

提出

inserted by FC2 system