ホームページ作成・素材

HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

全て表示する >

HTMLの基礎 Vol.55 「cafe.html」を作成(HTMLの解説)

2005/07/15

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/07/15(Fri) Vol.55       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.「cafe.html」を作成   HTMLの解説

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  外出すると暑いですが、日中は殆ど屋内にいるためか、今年はまだあま
  り夏を実感していません。皆さんはもう夏の予定などはたてられたので
  しょうか?

  さて、今回は前回作成した2ページ目「cafe.html」のHTMLの解説
  を行います。
  では最後までどうぞ宜しくお願い致します。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。

       ここで言う「スタイルシート」とはCSS(カスケーディン
       グスタイルシート)の事を指しています。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.2ページ目「cafe.html」のHTML・スタイルシートの解説


  前回作成した「カリスマパティシェのお店 −Cafe & Sweets−」の2
  ページ目のHTML・スタイルシートについての解説を行います。
  まず、前回記述したページのソースをご覧下さい。

  なお、左側に振ってある番号は、ソースの解説を行いやすくする為につけ
  たものですので、実際には記述されていません。

  2ページ目のファイル名は「cafe.html」です。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
01     "http://www.w3.org/TR/html4/loose.dtd">
02 
03 <html><head>
04 <meta http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS">
05 <title>店内の様子 −Cafe & Sweets−</title>
06 <meta http-equiv="Content-Style-Type" content="text/css">
07 <style type="text/css">
08 <!--
09 body {background-color:#000000;
10  margin:0px;padding:0px;
11  color:#ffffff}
12 -->
13 </style>
14 <head>
15 
16 <body>
17 <table border="0">
18 <tr>
19 <td width="400">
20 <img align="left" src="cafe01.jpg" border="0" width="250" height="160" alt="店の入り口">
21 ★お店の入り口です。<br>
22 人通りの多い明るい場所にあります。子供から大人まで
23 沢山の人が毎日お店に出入りしています。
24 <br clear="all">
25 <hr>
26 
27 <img align="right" src="cafe03.jpg" border="0" width="130" height="120" alt="店内">
28 ★いつもコーヒーの香ばしい香りが漂っています。
29 リラックスしながらデザートを味わう事ができます。
30 <br clear="all">
31 <hr>
32 
33 <img align="left" src="cafe02.jpg" border="0" width="200" height="200" alt="店内">
34 ★開放感のある落ち着いた店内は、人目を気にする事なく
35 コーヒー片手に読書を楽しむ方もおられます。
36 </td>
37 
38 
39 <td width="230">
40 <div style="text-align:center;margin:10px 10px 30px 20px">
41 <img src="title.gif">
42 </div>
43 <div style="text-align:center;margin:100px 10px 50px 20px">
44 <a href="index.html">
45 <img src="top.gif" width="100" height="60" border="0" alt="トップ">
46 </a><br>
47 <a href="cafe.html">
48 <img src="cafe.gif" width="100" height="60" border="0" alt="店内">
49 </a><br>
50 <a href="menu.html">
51 <img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
52 </a><br>
53 <a href="index.html">
54 <img src="info.gif" width="100" height="60" border="0" alt="インフォ">
55 </a>
56 </div>
57 </td>
58 </tr>
59 </table>
60 </body>
61 </html>


----------------------------------------------------------------------


  さて、順番に説明していきます。
  このメールマガジンを読んでおられる方が、ある程度HTMLを理解して
  いるものとして解説していきますので、本当に基礎的なことは省きます。
  ここでいう基礎的な事とは、タグの基本的な使用法についてなどです。

  上記のページは以下から見る事が可能です。

  http://ykr.main.jp/html/cafe/cafe.html


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
01     "http://www.w3.org/TR/html4/loose.dtd">
02 
03 <html><head>
04 <meta http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS">
05 <title>店内の様子 −Cafe & Sweets−</title>
06 <meta http-equiv="Content-Style-Type" content="text/css">
07 <style type="text/css">
08 <!--
09 body {background-color:#000000;
10  margin:0px;padding:0px;
11  color:#ffffff}
12 -->
13 </style>
14 <head>


  ドキュメントタイプ宣言から始まり、文字コード情報、そしてタイトル「
  カリスマパティシェのお店 −Cafe & Sweets−」等の記述です。
  タイトル行の下にあるメタ情報には、このページでスタイルシートを使用
  するという情報が書かれています。

  スタイルシートを使用する際には、文字化けなどの誤作動を防ぐ為にも、
  必ず記述した方が良いでしょう。
  ここでは、<body>に対してスタイルを設定する事で、このページのボディ
  内に対して、スタイルを設定しています。意味は以下の通りです。


  ▼background-color:#000000

    ページの背景色を「#000000」(黒)に設定

  ▼margin:0px

    ページ全体のマージン(外側余白)を0ピクセルに

  ▼padding:0px

    ページ全体のパディング(内側余白)を0ピクセルに

  ▼color:#ffffff

    ページ内に表示されるテキストの色を「#ffffff」(白)に設定


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


16 <body>
17 <table border="0">
18 <tr>
19 <td width="400">
20 <img align="left" src="cafe01.jpg" border="0" width="250" height="160" alt="店の入り口">
21 ★お店の入り口です。<br>
22 人通りの多い明るい場所にあります。子供から大人まで
23 沢山の人が毎日お店に出入りしています。
24 <br clear="all">
25 <hr>
26 
27 <img align="right" src="cafe03.jpg" border="0" width="130" height="120" alt="店内">
28 ★いつもコーヒーの香ばしい香りが漂っています。
29 リラックスしながらデザートを味わう事ができます。
30 <br clear="all">
31 <hr>
32 
33 <img align="left" src="cafe02.jpg" border="0" width="200" height="200" alt="店内">
34 ★開放感のある落ち着いた店内は、人目を気にする事なく
35 コーヒー片手に読書を楽しむ方もおられます。
36 </td>


  <body>が始まって表示されるテーブルの左のセルから一気に行きますが、
  上から似た様な事の繰り返しです。19の <td width="400"> では、
  左側のセルの横幅を400ピクセルに指定しています。

  その次に<img〜>で画像「cafe01.jpg」を表示、このときに<img>内の属
  性で align="left" (画像を左に表示させ、テキストを右側に回りこ
  ませる)を指定することで、その次に記述されたテキストを画像の右側
  に表示させます。

  すぐ下の <br clear="all"> は回り込みを解除させるタグです。
  そして、<hr>で水平線を引き、再び画像を表示、次は反対側に回りこみ
  を指定・・を繰り返し、</td>で左側のセルは終了です。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  残りの右側にセルは、トップページと全く同じで、それぞれのページへ
  のボタンやお店のロゴを表示させています。全てのページにおいて、右
  側のセルは同じように記述して表示させます。

  2回目は割と短く済みました。
  次回はデザートメニュー紹介のページ「menu.html」を作成したいと思い
  ます。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.「menu.html」を作成   HTML記述

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  最近、テレビでも放送されるように健康に関心を持つ人が増えました。
  私は元々栄養や健康にとても興味があり、昔から色々な本を読んだり調
  べるのが好きでした。勿論サプリメントも好きで、知識もあるかないか
  といえば、ある方だと思います。(自分で言うのもなんですが)

  ただ、健康に非常に興味があるのですが、実生活は不健康です。もとも
  と人によって、このぐらいの無理をすると病気をする人、これくらいで
  は病気をしない人・・など基礎体力とでもいいましょうか、やはり体の
  強い弱いはあります。私はどちらかというと昔から強い方ではなく、無
  理はしますが、その後必ず高熱を出したりします。なので、健康に興味
  を持つようになったのですが、私よりも明らかに食生活や生活リズムに
  問題があると思われるような人が、全く病気もせず、毎日元気なのは不
  思議でなりません。

  さて次回は「menu.html」を作成します。
  次回のメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。
         ・・・というか時間がなくて殆ど更新してません(汗)


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

規約に同意してこのメルマガに登録/解除する

メルマガ情報

創刊日:2004-06-29  
最終発行日:  
発行周期:週間  
Score!: - 点   

コメント一覧コメントを書く

この記事にコメントを書く

上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。 コメントの投稿時は投稿者規約への同意が必要です。

  • コメントはありません。