『楽しいHP製作』では、初めての方も楽しんでホームページ製作ができるよう様々な情報をお届けしています。

楽しいHP製作

HTML編集方法 画像編

このページでは、HTML基本構造を製作した後、様々な装飾をつけていくための編集方法をご紹介

画像とは…
画像ファイルとは、写真やイラストなどの画像情報をデータとしてファイル化されたものを指します。 また、形式(種類)によって扱う画像が異なり、その画像に合った形式で作成することで、より鮮明な画像として表示させることができます。 画像形式の種類 ◆GIF
GIFは、ホームページで最も使われる画像形式です。256色までの画像を保存でき、イラストやアイコンなどに向いています。 他にも、動く絵(アニメーション)や透明色を指定することで背景と重ねる事ができます。
拡張子は「.gif」として保存されます。 主に、アイコン、バナー、文字画像、アニメーション画像などに使われます。

◆JPEG
GIF形式と並び、ホームページで使われる画像形式をJPEGといいます。 写真画像やグラデーションなどの複雑な色を使う際に向いています。 GIFとの違いは、背景を透明色に指定することができないこと、また、重ねて表示させることができません。
拡張子は「.jpg」「.jpeg」として保存されます。 主に、写真画像、デジタル画像などに使われます。

◆PNG
PNGは、インターネットで使われることを目指し、開発された形式です。 主に使われる画像形式の中で最も多くの色を使用できることが特徴で、自然画像や多色画像に向いています。 GIFと同様、背景を透明色に指定して重ねて表示させることができます。しかし、上の二つに比べ、画像の表示に時間が掛かってしまうため、あまりホームページの素材としては適していないようです。
拡張子は「.png」として保存されます。 主に、自然画像、多くの色を使う画像などに使われます。 画像探し まずは、ホームページに貼り付ける画像を手に入れましょう。ホームページに載せたい画像や写真などは、自分で作成しても良いのですが ネット上には、無料で素敵な画像や写真などを配布している「素材屋さん」がたくさんあります。まずは、自分好みの素材を配布している素材屋さんを探しましょう。気に入った素材が見つかったら、早速お借りしましょう!!借りる際、必ず注意事項に目を通しましょう。そこには、いろいろと素材に対しての規約などが書かれていますので、同意した上で素材をお借りしましょう。

【素材の借り方】
1.好みの素材の上にマウスカーソルを重ねる
2.右クリックし、名前を付けて画像を保存

これで、パソコンへの保存完了です。 保存先は基本的にどこでも良いのですが、ホームページに使用 する場合は、ホームページ専用フォルダに保存しておきましょう。 その際のファイル名は自由に変更しても大丈夫ですが、必ず半角英数字で名前を変更することを忘れないで下さい。

※注意点として、素材は必ず自分のパソコンにダウンロードしましょう。コピー&ペースト、またはドラッグして素材を持ち帰る「直リンク」はほとんどの素材屋さんで禁止事項となっていますから注意しましょう。

画像を貼り付ける 【画像を挿入する方法】
画像を表示させたい時は、<img>というタグを使用します。 そして、<img>タグの属性を利用して、表示の大きさや画像に枠を付けたりする事もできます。

◆HTML記入例
<body> <img src="homepage.gif" width="69" height="66" alt="ホームページを製作しよう"> <body>

homepage.gifという名前の、幅が69ピクセル、高さ66ピクセルの画像を表示しなさいという意味のHTMLです。 alt="ホームページを製作しよう"は、画像の説明文となります。画像の上にカーソルをのせると説明文が表示されます。ブラウザで表示してみると以下のようになります。

◆ブラウザ表示

※画像は、ホームページ用に作ったフォルダにHTML文書と一緒に入れて保管しておきましょう。 画像を壁紙に設定する 画像を壁紙にするには、<body>の background 属性という物を使用します。

◆HTML
<body background="画像 GIFやJPG> </body>

◆使用例
<html>
<head>
<title>楽しいホームページ製作</title>
</head>
<body background="homepage.gif">
</body>
</html>

Copyright(c)2008. 楽しいHP製作. All rights reserved.