トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

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

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



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

発行日:7/29

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

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

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

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

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

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

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


  ふと気がつけばもう7月も終わり・・一体いつになったらサイトのリニ
  ューアルができるのか、自分でもわからなくなってきました。
  というか、過労で倒れるかもしれません(苦笑)・・という冗談はさて
  おき、遅くても夏の始めにはできるであろうと思っていましたリニュー
  アルはいつになるのか見当がつきません。

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


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

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


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


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


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

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

  3ページ目のファイル名は「menu.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  background-image:url('back002.jpg');
13  background-repeat:no-repeat;
14  background-position:0% 0%;
15  margin:0px;padding:0px}
16 -->
17 </style>
18 <head>
19 
20 <body>
21 <table border="0">
22 <tr>
23 <td width="400" valign="top">
24 <table border="0" cellpadding="12">
25 <tr>
26 <td>
27 <img align="left" src="cake1.jpg" width="100" height="75" border="0" alt="ケーキ">
28 </td>
29 <td valign="top">
30 <font color="#ff9999"><b>▼ オレンジのケーキ</b></font><br>
31 酸味のきいたムースがサンドされています。
32 </td>
33 </tr>
34 
35 <tr>
36 <td>
37 <img align="left" src="cake2.jpg" width="100" height="75" border="0" alt="ケーキ">
38 </td>
39 <td valign="top">
40 <font color="#ff9999"><b>▼ ベリーのムース</b></font><br>
41 甘ずっぱい香りと生クリームのコクがマッチ
42 </td>
43 </tr>
44 
45 <tr>
46 <td>
47 <img align="left" src="cake3.jpg" width="100" height="75" border="0" alt="ケーキ">
48 </td>
49 <td valign="top">
50 <font color="#ff9999"><b>▼ ブルーベリータルト</b></font><br>
51 タルトの生地に新鮮なフルーツを盛り合わせて
52 </td>
53 </tr>
54 
55 <tr>
56 <td>
57 <img align="left" src="cake4.jpg" width="100" height="75" border="0" alt="ケーキ">
58 </td>
59 <td valign="top">
60 <font color="#ff9999"><b>▼ チョコレートのババロア</b></font><br>
61 甘さ控え目に仕上げたババロアです
62 </td>
63 </tr>
64 
65 <tr>
66 <td>
67 <img align="left" src="cake5.jpg" width="100" height="75" border="0" alt="ケーキ">
68 </td>
69 <td valign="top">
70 <font color="#ff9999"><b>▼ フルーツカップ</b></font><br>
71 色とりどりのフルーツを盛り合わせたデザート
72 </td>
73 </tr>
74 </table>
75 </td>
76 
77 <td width="230">
78 <div style="text-align:center;margin:10px 10px 30px 20px">
79 <img src="title.gif">
80 </div>
81 <div style="text-align:center;margin:100px 10px 50px 20px">
82 <a href="index.html">
83 <img src="top.gif" width="100" height="60" border="0" alt="トップ">
84 </a><br>
85 <a href="cafe.html">
86 <img src="cafe.gif" width="100" height="60" border="0" alt="店内">
87 </a><br>
88 <a href="menu.html">
89 <img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
90 </a><br>
91 <a href="info.html">
92 <img src="info.gif" width="100" height="60" border="0" alt="インフォ">
93 </a>
94 </div>
95 </td>
96 </tr>
97 </table>
98 </body>
99 </html>


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


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

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

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


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


07 <style type="text/css">
08 <!--
09 body {background-color:#000000;
10  margin:0px;padding:0px;
11  color:#ffffff;
12  background-image:url('back002.jpg');
13  background-repeat:no-repeat;
14  background-position:0% 0%;
15  margin:0px;padding:0px} ←(ここ間違いです。申し訳ありません)
16 -->
17 </style>


  始めのドキュメントタイプ宣言などについてはあえて説明する必要も無
  いと思いますので、<head>〜</head>間はスタイルシートの解説だけ記
  述します。なお、15の「margin:0px;padding:0px」は間違いです。
  前に「margin:0px;padding:0px」を記述しているにも関わらず、再度記
  述してしまいました。申し訳ありません。


  ▼background-color:#000000

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

  ▼margin:0px

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

  ▼padding:0px

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

  ▼color:#ffffff

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

  ▼background-image:url('back002.jpg')

    ページに表示する背景画像を「back002.jpg」に設定

  ▼background-repeat:no-repeat

    ページに表示する背景画像を「繰り返さない」に設定

  ▼background-position:0% 0%

    ページに表示する背景画像の位置を上0%、左0%、すなわち左上の
    位置に設定


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


20 <body>
21 <table border="0">
22 <tr>
23 <td width="400" valign="top">
24 <table border="0" cellpadding="12">
25 <tr>
26 <td>
27 <img align="left" src="cake1.jpg" width="100" height="75" border="0" alt="ケーキ">
28 </td>
29 <td valign="top">
30 <font color="#ff9999"><b>▼ オレンジのケーキ</b></font><br>
31 酸味のきいたムースがサンドされています。
32 </td>
33 </tr>


  <body>がきて、まずテーブルで始まります。上記の部分はテーブルの左セ
  ルの上部の記述です。左のセルを幅400ピクセルに設定しています。
  「valign="top"」というのは、セル内の文字や画像の縦位置の設定を行う
  属性で「top」という値は上揃えにする、という意味です。

  そして、「24」で再びテーブルが記述されています。左セルの中にもうひ
  とつテーブルが設定された状態です。テーブルを入れ子にするのは、ペー
  ジが重くなってしまう為、あまり推奨されたやり方では無いと言われてい
  ますが、ここではできるだけスタイルシートを使用しない方法でソースを
  記述する為に、こういう方法をとっています。

24 <table border="0" cellpadding="12">

  左セル内部のテーブルは「cellpadding="12"」でセルの内部余白を12ピク
  セルに設定しています。

26 <td>
27 <img align="left" src="cake1.jpg" width="100" height="75" border="0" alt="ケーキ">
28 </td>

  この左セル内部に記述されたテーブルの左セル部分には「cake1.jpg」を表
  示させます。(少し説明がわかりにくいですが)

29 <td valign="top">
30 <font color="#ff9999"><b>▼ オレンジのケーキ</b></font><br>
31 酸味のきいたムースがサンドされています。
32 </td>
33 </tr>

  そして、左セル内部に記述されたテーブルの右セル部分には、左に表示さ
  れた画像(ケーキ)の説明を記述し、テーブルの1列目を</tr>で閉じてい
  ます。


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


35 <tr>
  ・
  ・
  ・略
  ・
  ・
70 <font color="#ff9999"><b>▼ フルーツカップ</b></font><br>
71 色とりどりのフルーツを盛り合わせたデザート
72 </td>
73 </tr>
74 </table>
75 </td>


  35〜73までは、先程解説したケーキ画像とその説明の繰り返しです。
  「74 </table>」で左セル内部に記述したテーブルを閉じ、さらに
  「75 </td>」で、一番始めに記述したテーブルの左セル部分を閉じてい
  ます。

  その後は、サイトのロゴやページボタンなどを記述した右セルが始まるの
  ですが、この部分は全てのページにおいて同じ記述内容であるので解説を
  省きます。


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


  ページのレイアウトの設定は「スタイルシート」を用いる方法が推奨され
  ていますが、ブラウザなどにより対応していないプロパティなどが沢山あ
  ったり、表示結果が異なったりするものもあるので、注意しなければなり
  ません。

  いくら推奨されていても、目に見える部分はソースではないのですから、
  余りにも恐ろしくレイアウトが崩れてしまって、見づらくなっていては意
  味がありません。自分が一番やりやすい方法で記述するのが良いと思いま
  す。

  次回は最後の4ページ目「info.html」のHTMLの記述を行います。


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


来週は・・・

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

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

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

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


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


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

  先日友人に指摘されました。「リニューアルは?」・・・忘れていたわけ
  ではないのですが、3分の2強程できあがったファイルを入れた、リニュ
  ーアルサイトの作成場所であるフォルダは2週間位開いていません。

  というか、一体いつになるのやら・・というよりは、本当にリニューアル
  するのだろうか?などという疑いに変わりつつあります。(いや、ここま
  で作成しているのですから、しなければ勿体無いのでしますが・・)
  今現在のサイトでも「使いやすい」とお便り下さる方もおられますので、
  (建前かどうかは別にして・・)いつできるかわからないリニューアル後
  も、旧ページという形で残しておこうかとも考えています。

  さて次回は「info.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    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

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

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


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

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

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4683人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4888人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/01/14
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2014/09/30
    読者数:
    973人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事