コピペで出来る!簡単ホームページ作成入門

ホームページにとって文章とともに欠かせない要素画像。
ここでは、ホームページに画像を載せるやり方を紹介します。

画像について

ホームページで使用する画像には大きく分けて3種類あります。

JPEG画像

拡張子がjpeg又はjpgの画像。デジカメで撮った写真やゲームのスクリーンショット(画面画像を撮ったもの)等に良く使われるタイプ。ファイルサイズも比較的小さいのも特徴。

画質を下げることでファイルサイズはさらに小さくなるが、画像が汚くなってしまい元の綺麗な画像には戻せなくなってしまう。
その為、画質調整する際には変更前のものをバックアップ(コピー)しておくのが鉄則です。

PNG画像

拡張子がpngの画像。かなり綺麗な画像の代わりに、JPEG画像と比べてファイルサイズが大きくなりがち。
透過画像といわれる指定した一色を透き通らせて表示する画像も作ることが出来る。画質を下げることでファイルサイズは小さくなり、画質の劣化も少ない。

GIF画像

拡張子がgifの画像。使われる色の数が少ない代わりに、相当ファイルサイズは小さい。色数が少ないホームページロゴやアイコン等の素材に良く使われる。
透過画像といわれる指定した一色を透き通らせて見せることも出来る。また、アニメーションGIFというものもあり、これは文字通りアニメーションの様に動く画像。複数枚のGIF画像を組み合わせて作られているので、ファイルサイズがかなり大きくなってしまう。バナー画像としてよく使われる。

大雑把に分けると

JPEG画像

⇒色が多い写真のような画像向き

GIF画像

⇒色が少ないボタンやロゴのような素材画像向き

PNG画像

⇒他2つの利点を兼ね備えているがファイルサイズが大きい

と言った感じになります。
画像に合わせて、使う画像のタイプを使い分けるの良いでしょう。

画像表示[<img/>]

ホームページに画像を表示する時はimgタグを使用します。また、表示させる画像はペイントソフト等で作ってあらかじめ用意しておく必要があります。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

青い背景に黒く縁取りされた白抜き文字で「画像サンプル」と書かれた画像(gazo1.png)が表示されました。
ここから、imgタグの中に色々書かれている部分を1つずつ説明していきます。

src属性

src=”～”のこと。この“と”の間に表示させたい画像へのパスを書きます。
上の例では、imgフォルダ内にあるgazo1.png画像を表示させるという意味になります。パスについての説明は絶対パスと相対パスのページをご覧ください。

alt属性

alt=”～”のこと。この“と”の間に、何かしらの理由で画像が表示されなかった場合に画像の代わりに表示させる文字を書きます。
ブラウザは画像表示しないという設定が出来ますし、目の不自由な方向けのホームページ読み上げソフトではこのalt属性に書かれた文字を読むので、書いておくと親切です。

title属性

title=”～”のこと。この“と”の間に、画像の上にマウスカーソルを合わせた時に表示させる文字を書きます。
画像の補助説明的な言葉を書いたりすると良いでしょう。(例：花の写真のtitle属性に花の名前を書く。)

他にも色々指定できる項目はあるんですが、上の3つを押さえておけば普通はOK。画像表示に関してはばっちりです。

ホームページを作る上で基本中の基本となるのがタグです。 ここではそのタグの基礎的な知識を紹介していきます。

タグとは？

元々はマークアップの為の印の事をいいます。
HTML・XHTML等の場合<と>に囲われたアルファベット文字列のことです。

XHTMLのタグには「開始タグ」「終了タグ」「空要素タグ」の3種類があります。

開始タグは<xxx>の様に<で始まり>で終わるもの。

終了タグは</xxx>の様に</で始まり>で終わるもの。

空要素タグは<xxx/>の様に<で始まり/>で終わるもの。

ここで重要なのは、開始タグと終了タグは2つで1セット、空要素タグは単独で使うということです。
開始・終了タグセットは以下の様に使います。
<タグ名>ここに表示したい内容を記述</タグ名>

空要素タグは以下の様に使います。
<タグ名/>
(空要素タグに内容は必要なく、書くだけで意味を成すタグと言うことです。)

タグの中身

タグは大きく分けて3つの部分に分かれています。
それは、「タグ名」「要素」「属性」です。

以下では、リンクタグ(aタグ)を例に説明していきます。

上の例では、a(最初と最後の2箇所)の部分が「タグ名」です。aタグ(又はアンカータグ)と呼ばれています。

次に、href=”～”の部分が「属性」です。開始タグの中のタグ名の後に半角スペース(半角空白)を入れて記述します。属性は空要素タグにも書くことが出来ます。

最後に、Yahoo! JAPANの部分が「要素」です。開始タグと終了タグにはさまれた部分ですね。この部分が実際にブラウザで見た時に表示される部分です。
実際にはこんな風に表示されます。

Yahoo! JAPAN

タグ名、要素、属性はタグの種類によって違うので、次ページからの具体例を通じて1つずつどんなものかを理解していきましょう。