画像を使ってみよう 次は画像を挿入してみましょう。 せっかくのホームページなので綺麗に仕上げたいですよね? これも文字と同じで、タグでどの場所にどの大きさで出すのか? 指定するだけでOKです。 画像にリンクをはったり出来ます。 とりあえず貼り付けてみましょう。 |
| 画像を使ってみよう | |
![]() |
前ページで水平線を入れた部分に画像を挿入します。 <HR>タグは削除してください。 <img scr="ファイル名"半角スペwidth="500"半角スペheight="22"半角スペborder="0"> widthは画像の横幅、heightは高さを表しています。 borderは外枠の太さです。 強調する気がないなら0で問題ありません。 imgタグも</img>と閉じる必要はありません。 |
![]() |
水平線の部分が花のラインに変わりました。 素材屋さんで提供されているラインは画像という事になります。 少し左に偏っているので中央に表示させましょう。 |
![]() |
中央寄せしたい部分を<center>タグで囲みます。 |
![]() |
中央にきました。 今度はラインの下に文字を入れてみます。 |
![]() |
Pタグにalign="center"を入れて左のように挿入しました。 Pタグは一列開けて段落を作るタグです。 画面の中央、やや下側に挿入した文字が表示されるはずです。 |
![]() |
今、挿入した部分は将来リンクを張って 別ページへの入り口に使います。 次はメールアイコンを挿入してみましょう。 |
![]() |
上下にスペースが欲しいのでPタグ内に埋め込みました。 ラインを挿入した時と同じ要領です。 画像サイズは変更しても表示されますが 拡大、縮小されるので画質は悪くなります。 これは正規のサイズです。 挿入するアイコンを見ればサイズはすぐにわかります。 |
![]() |
少し位置が問題なので右に寄せましょう。 どこにどういうタグを入れたらいいか? わかりますか? |
![]() |
そうです。 Pタグ内にalign="right"と追加することで右寄せされます。 |
![]() |
きちんと右寄せになりました。 次はリンクをはっていきましょう。 |
| HOME MEMO BACK NEXT | |
| パソコン初心者講座ぱそおーる | |