画像を張る前に

画像の大きさ

準備：今日の課題はここから飯田いいとこ
a10.zip へのリンク　←これを解凍しても良い
取ったばかりの写真は大きい。
このままサーバーに送ると、サーバーの容量をたくさんつかいます。
（最近は、無制限というサイトもありますが、必要な大きさにしましょう。）
その方がページを読むのがはやくて、表示されるのもはやい。
（といっても、最近は回線が速くなっているから、大きな画像でもはやく読み込むけれど。2019)
で、どれくらいがいいかというと、大きなサイズにしたとき崩れない大きさ。
画面いっぱいに表示するなら
横700ピクセルから１７００ピクセルくらいです。(2019)
大きければ、大きい画面で開いても崩れません。
でも通常のモニターは１０２４ピクセルくらいでしょう。
だから画面いっぱいは1200あればと思いますが・・・思うだけです。根拠はない。
今後、モニターの画面がもっと大きくなると、もっと大きな画像が必要かもしれません。

まず、今回は1200ピクセル以上の画像を一つ用意して下さい。
色はくっきりした方がいい。そのためには、濃いめの方がいいかもしれません。
でも、今回は学習のために８００PXの画像で解説は進めます。
拡張子はjpg やpng です。
（ここではg1.jpgで学習しますが、pngのときは、リンクを張るときpngに書き換えればいいのです。)
画像の大きさを変換するには、
https://www.peko-step.com/tool/resize.html
等のサイトで出来るでしょう。
windowsの３ｄペイントでもできるか？

画像が用意できたらさっそくはり付けましょう
その１

画像は同じフォルダに入れるとファイルが増えてくると、ごっちゃごちゃになります。
画像は[gazou]フォルダなどに入れて一括管理することが多いようです。
ボクは、新しいページを一つのフォルダにしてその中に入れてます。そうしないと何百の画像を管理しきれない。
ここからの説明は、index.htmlのフォルダに直接入れてますが
[gazou]フォルダに入れたときは、リンクを[gazou/写真の名前]とすればいいですね。
ここでは、g1.jpgという横８00pxの画像を説明のために用意しました。

ここへは、<img src="a10/g1.jpg" width="800" height="400" border="0" alt="花画像">としています。
で、今回作るページは、画像を表に貼るんではなく、背景画像として張ります。
こうすると文字が画像の上に簡単に表示できます。

背景に画像を貼るにはCSSを使います。

背景だからCSSに書きます。
こうすると上に文字を重ねるのが簡単です。 このままだと背景がタイルのように、上下左右貼られます。
小さい画像を並べて背景にするには良いのですが、 ここでは1枚だけなので繰り返し中止をしたい。

繰り返し中止

こうすると繰り返しが中止になります。

画面いっぱいに

画面いっぱいにするには、coverを使います。
背景の大きさの指定はいろいろあります（必要に応じて調べましょう）。
他にも指定方法は色々あるようですが・・・これが一般的のようです。 このままブラウザ画面を小さくしてみて下さい。小さな問題が起きる。

中央を固定

左端が固定されて、右側が見えなくなる。
中心をいつも中心にしたい。

出来たのはこれ飯田いいとこ
次は、<h1>などを白くしてパディングやボーダーやマージンを外して、画面を整えましょう。
次の問題へ進む