画像を表示させよう
目次
初期設定
-
１：デスクトップに「site」というフォルダを作ります。
-
２：テキストエディタを開いて、作った「site」フォルダの中に「index.html」という名前でデータを保存します。
-
３：テキストエディタファイル「index.html」の中に、下記ピンク枠内に記載した「基本の記述」をコピペします。
-
４：上書き保存します。(Windowsでは、ソフト「メモ帳」を開いた状態で「Ctrl」キーを押しながら「S」キーを押してください。Macでは、ソフト「テキストエディット」を開いた状態で「command」キーを押しながら「S」キーを押してください。)
画像作成(Windows編)
-
１：パソコン画面の左下の検索窓に、「snipping tool」と入力します。
-
２：出てきた検索画面から、ハサミのアイコンのアプリ「Snipping Tool」を選択します。
-
３：立ち上がった「Snipping Tool」のウィンドウ内の「新規作成」を押します。
-
４：カーソルが十字のマークになったら、カーソルを左上から右下にドラッグして、スクショする範囲を指定します。
-
５：「Snipping Tool」のウィンドウ内の「フロッピーディスクのアイコン」を押します。
-
６：ファイルの種類という欄で「ポータブルネットワークグラフィックスファイル(PNG)(*.PNG)」を選択します。
-
7：デスクトップの「site」フォルダに「screenshot.png」という名前でスクショを保存します。
画像作成(Mac編)
-
１：[shift]キーを押しながら[command]キーを押し続け、[3]キーを押して、全てのキーから手を離します。
-
２：デスクトップに保存された先ほどのスクショを、Finder上で右クリック＞名称変更＞ファイル名を「screenshot.png」にする
-
3：「screenshot.png」を、デスクトップの「site」フォルダ内に移動します。
画像の表示
-
１：テキストエディタファイル「index.html」の<body>の直後に、下記imgタグをコピペします。
-
２：「alt="」〜「"」の中の●●●を消して、画像の内容を表す説明文を記述します(装飾用の場合は空でよい)。「src="」〜「"」の中の●●●を消して、画像が保存されている場所とそのファイル名を記述します。今回は「screenshot.png」と入れます。
画像が保存されている場所と、参照先のHTMLファイルが同じ階層に存在するときは、画像ファイル名を記述するだけで表示できます。
画像が、参照先のHTMLファイルと同じ階層にある別のフォルダ内に存在するときは、「フォルダ名/画像名.拡張子」を記述すると表示できます。
-
3：index.htmlを上書き保存します。
-
4：index.htmlをブラウザから開いて、画像が表示されれば成功です。
