ホームページ作成・素材

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

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

全て表示する >

HTMLの基礎 Vol.56 「menu.html」を作成(HTML記述)

2005/07/22

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

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

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

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

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

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

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


  先日眼科へ行ってきました。ずっと行かなければと思っていたのですが、
  中々時間がとれずようやく・・自分自身目の調子が悪いと日々感じてい
  たのですが、特に悪い所も何も無くホッとしました。しかし、当然の如
  く寝不足とディスプレイを見続ける事が、眼精疲労の原因だと指摘され
  てしまいました。

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


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

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


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


1.サイトに使用する素材の準備

  まず店内の様子を紹介するページを作成する為の素材を準備します。

  というわけで、今回はお店のメニューであるデザートの紹介で使用する画
  像を用意しました。
  (画像のダウンロードは自由です。以下のページを開き、必要な画像を自
  分のPCに保存して下さい。但し直リンクは禁止です。)

  ▼素材のダウンロード
  http://ykr.main.jp/html/dl/download.html

  サンプルとの違いがありますが、ご了承下さい。
  トップページで使用した素材なども置きっ放しにしています。
  このサイトの全てのファイル名は以下の通りとなります。
  今日作成するのは上から3番目の「menu.html」です。

   ・index.html (トップページ)
   ・cafe.html (お店の紹介)
   ・menu.html (デザートメニュー)
   ・info.html (インフォメーション)

  では以下のトップページ「menu.html」のサンプルソースをご覧下さい。
  記述してみると良いかもしれません。


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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS">
<title>デザートメニュー −Cafe & Sweets−</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body {background-color:#000000;
margin:0px;padding:0px;
color:#ffffff;
background-image:url('back002.jpg');
background-repeat:no-repeat;
background-position:0% 0%}
-->
</style>
<head>

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

<tr>
<td>
<img align="left" src="cake2.jpg" width="100" height="75" border="0" alt="ケーキ">
</td>
<td valign="top">
<font color="#ff9999"><b>▼ ベリーのムース</b></font><br>
甘ずっぱい香りと生クリームのコクがマッチ
</td>
</tr>

<tr>
<td>
<img align="left" src="cake3.jpg" width="100" height="75" border="0" alt="ケーキ">
</td>
<td valign="top">
<font color="#ff9999"><b>▼ ブルーベリータルト</b></font><br>
タルトの生地に新鮮なフルーツを盛り合わせて
</td>
</tr>

<tr>
<td>
<img align="left" src="cake4.jpg" width="100" height="75" border="0" alt="ケーキ">
</td>
<td valign="top">
<font color="#ff9999"><b>▼ チョコレートのババロア</b></font><br>
甘さ控え目に仕上げたババロアです
</td>
</tr>

<tr>
<td>
<img align="left" src="cake5.jpg" width="100" height="75" border="0" alt="ケーキ">
</td>
<td valign="top">
<font color="#ff9999"><b>▼ フルーツカップ</b></font><br>
色とりどりのフルーツを盛り合わせたデザート
</td>
</tr>
</table>
</td>

<td width="230">
<div style="text-align:center;margin:10px 10px 30px 20px">
<img src="title.gif">
</div>
<div style="text-align:center;margin:100px 10px 50px 20px">
<a href="index.html">
<img src="top.gif" width="100" height="60" border="0" alt="トップ">
</a><br>
<a href="cafe.html">
<img src="cafe.gif" width="100" height="60" border="0" alt="店内">
</a><br>
<a href="menu.html">
<img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
</a><br>
<a href="index.html">
<img src="info.gif" width="100" height="60" border="0" alt="インフォ">
</a>
</div>
</td>
</tr>
</table>
</body>
</html>


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


  さて、記述できたらファイルを保存します。
  拡張子は「.html」です。
  ダウンロードした画像とファイルは同じフォルダ内に置いてください。
  なお、表示の都合で、タグの途中で改行されてしまっている箇所がある
  かもしれませんが、実際は改行せずに記述するよう注意してください。

  記述したファイルは以下から見ることが出来ます。
  前回のページも置いてあるので、今の所3ページの間を行き来する事が
  できます。

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

  次回はこのファイルのソースの説明を行いたいと思います。


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


来週は・・・

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

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

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

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


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


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

  私はたまに徹夜する事があり、それは前々からある事なのですが、ここ
  のところ一日平均10〜12時間近く(勿論間に休憩はいれますが・・
  )、ひどい時はもっと仕事をしていました。寝不足とパソコンの疲れは
  一番目に来るのですが、やはりそんな生活を送っていると健康でいられ
  るはずがありません。

  というわけでずっと気になっていた眼底検査を受けに眼科へと行きまし
  た。いくら時間がないといっても体を壊しては元も子もないので・・
  結果、冒頭でも述べたとおり何も問題は無く、でもこの生活の乱れを指
  摘されてしまいました。(目の充血がひどいのです。)

  目薬をもらって帰ってきましたが、これからは睡眠は最低限確保しなけ
  ればと思います。またたまには検査にも行った方が安心できるので、定
  期的に行こうと思います。

  さて次回は「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!: - 点   

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

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

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

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

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