このページの本文へジャンプ

文字の大きさ

ここから本文です
ホームページが自分で作れる!
Webきほんのきほん 第4回 今すぐ出来るホームページ〜画像を表示してみよう
2003年07月22日
簡単な画像の挿入

 前回は「メモ帳」を使ってHTMLファイルを作成し、ブラウザに文字を表示する方法を紹介しました。試してみた方は「ホームページというのは、案外簡単に作れそうだ」と思われたのではないでしょうか。
 そこで引き続き、メモ帳を使ってHTMLファイルを作成してみましょう。今回は、文字と合わせて絵や写真などの「画像」を表示させるHTMLファイルです。


 いろいろなホームページを見ているとおわかりだと思いますが、テキストだけで作られているホームページはあまりみかけません。ほとんどすべてのホームページには文字と画像が載っているのですが、その基本的な構造を知っていただければと思います。

 さて、今回は、まず用意していただくものがあります。ブラウザの中で表示しようと思っている画像です。写真でもイラストでも構わないのですが、ブラウザが表示できるファイル形式であるJPEG(拡張子名“.jpg”)かGIF(同“.gif”)のものである必要があります。また、あまり大きなサイズのものではなく、普段使っているブラウザにおさまるくらいの大きさのものをおすすめします。

【用語解説 : 拡張子
ファイルの種類を区別するためにファイル名のあとにつく、通常は半角英字3文字で表示されるもの。テキストファイルなら“.txt”、画像ファイルなら“.jpg”、などと表記され、何のファイルであるかわかるようになっている。

必要なのは一行のタグだけ
 では、前回と同じように、ウィンドウズのスタートボタンから、>プログラム>アクセサリ>メモ帳と開き、以下のように入力してください。日本語以外は半角です。

 <html>
 <head>
  <title>ようこそ私のホームページへ!</title>
 </head>
 <body>
  家族の記録
 </body>
 </html>

 これで、前回作ったHTMLファイルと同じものができました。次に、<body>と</body>の間に、画像を挿入するタグを追加します。

<html>
 <head>
  <title>ようこそ私のホームページへ!</title>
 </head>
 <body>
  家族の記録<br>
  <img src="family.jpg">
 </body>
</html>

※<br>というのは、改行のためのタグで、画像の挿入とは直接的には関係ありません。
 また、family.jpgというファイル名は例ですので、実際には挿入する画像のファイル名と拡張子を入れてください。

 書き終わったら、前回と同様にファイル名と.htmlという拡張子をつけて保存します。アイコンを見て、HTMLファイルになっていることを確認したら、開いてみてください。いかがでしょうか。きちんと書けていれば「家族の記録」という見出しの下に用意した画像が表示されているはずです。このように、写真とその説明を入れる程度のホームページであれば、あといくつかのタグを覚えるだけでごく簡単に作れてしまうのです。

 さて、二回にわたって、簡単なタグの説明と、それがブラウザでどのように表示されるのかを紹介してきました。多くの方は、初めはタグを書いたりせずにホームページ作成支援ソフトを利用するのではないかと思いますが、そのような場合でも、自分でもタグを覚えておくと思うように修正ができますから、興味のある方や、ちょっと凝ったことをしてみたい方には、ぜひタグを覚えることをおすすめします。

 では、次回からは知っておくと便利なホームページの機能について解説していきましょう。
マイホスティング
初期費用無料、月額2,480円(税込2,604円)でお客さまの名前の入ったアドレスのホームページが持てます!
バックナンバー
<< 前の記事
渋谷 太郎 (しぶや たろう)
・Webデザイナー、ディレクター
・デジタルハリウッド講師、元IMJ勤務
・静岡大学理学部物理学科卒業

・主な実績
大手量販店の大規模ECサイトの企画・構築・運用に従事、その後独立。

他の連載はこちら