写真を貼る



 

前回まで

前回までの作成がこれです。
ここはコピーできる特別な方法で書いています。
(普通は「< >」等の記号はHTMLでは特別な文字なので、「&lt; &gt;」と書いています。)
準備できていない人は・・・できている人はしなくて良いです・・・
作りかけの、index.htmlがあるひとは、それをblackketsでたちあげ、コピー貼り付けをしてもいいです。
新しく作っても良いのです。
そういう場合は、ブラケッツを立ち上げ、
ファイル→新規作成→右下がtext等になっている場合はhtmlに直してから、
コピー貼り付けをして、index.htmlという名前で保存してください。
下のファイルをコピーし、範囲全指定をして、コントロール+c でコピー
ブラケットを立ち上げ、コントロール+Vではりつけができます。


<!DOCUTYPE HTML>
<html lang="ia">
<head>
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="top/smain.css">
	<meta name="keywords" content="HTML基礎,初めてのHTML,等などを書く">
	<meta name="description" content="HTMLの解説">
	<title>初めてのHTML</title>
</head>
<body>
	<header>
		<img src="rogo.gif" width="210" height="40" alt="ヘッダーロゴ">
	</header>
	<div class="hontai">
		<!-- 今回はここへ画像を張ります -->
	</div>
	<footer>
	</footer>	
</body>        
</html>  

ロゴ画像は、index.htmlのあるフォルダーへ保存してください。
また、画像の大きさ(height、width)は、とりあえず指定しません。(また後から)
ペーに写真を貼る

別フォルダーを用意

こんどは別フォルダーの中にある写真を貼ってみましょう。
まずinndex.htmlのあるフォルダーの中に、"img"というフォルダを作ります。
1,フォルダを開く
2,フォルダの中で右クリック→新規作成二マウスを重ね→「フォルダ」を左クリックすると[当たらしフォルダ]ができます。
3,[当たらしフォルダ]の文字を一回左クリックすると、名前が書き換えられる世になりますので、[img]と小文字でつけてください

フォルダへ写真を入れる

次に、imgフォルダをダブルクリックして開きます。
(うまく開かないときは右クリックで[開く]でも開きます。)
その中へ、用意しておいた画像を入れます。
(画像をマウスで左クリックしたまま,マウスを移動すると写真が動きますので,フォルダの中で離す、または
 画像の上で右クリック→コピーまたは切り取り その後、フォルダの中で右クリック、貼り付け で移動します。)
画像の名前を変える

写真の名前を変える

画像の名前を一回左クリックすると名前の変更ができます。
そのままでも結構ですが、ここでは、top.jpg とかtop.png とかしておきます。
拡張子は変更しないこと。ドットの前の名前だけ変更します。
ここからは top.jpg として説明していきます。

index.htmlからリンクを張る


index.html をブラケッツで開きます
そして、
  <div class="hontai">
    <!-- 今回はここへ画像を張ります -->
  </div>

を書き換えて
<div class="hontai">
<img src="img/top.jpg" alt="トップページ画像">
</div>
としましょう。([.jpg]の部分は自分の画像の拡張子のままに)
すると、写真のままだと、とても大きな画像が張られます。

画像の表示する大きさを変える


そこで、
<img src="img/top.jpg" width="400" height="200" alt="トップページ画像">
などと大きさを指定しましょう。
これで画像の大きさは変わりました

width="400" というのは画像の幅が400ピクセルということ
hight="200" というのはが園高さが200ピクセルということです。

<img src="img/top.jpg" width="400" alt="トップページ画像">
と、hright="200"を省略すると、自動的に高さも変更されます。

画像の実際の大きさを変える

これは、paint3Dでできます。
実際に使う画像は、これで実際に表示する大きさにした方が良い。
ページを表示するには、データを送るわけですから、小さい画像の方がデータ量が少なくなって、サクサク動くのです。

imgフォルダの中の使う画像の上で右クリック→「paint3Dで編集する」と上の方に表示されるので左クリック
キャンパスタグを押す。
右側に表示される[キャンパスサイズを変更]のピクセル数を変える。
適当な大きさになったら、[ファイル]タグ から上書き保存してください
このとき、何ピクセルに指定したか記録しておき
<img src="img/top.jpg" width="400" height="200" alt="トップページ画像">
の数値をそれにあわせて変えてください。

フォルダのたどり方へ進む