ＨＴＭＬの基礎　Ｖｏｌ．５６　「menu.html」を作成（ＨＴＭＬ記述） (2005年07月22日発行) | ＨＴＭＬの基礎−タグを覚えてウェブページを作ろう！−

> このメールマガジンに登録・解除

ホームページ作成・素材

ＨＴＭＬの基礎−タグを覚えてウェブページを作ろう！−

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

全て表示する >

このメールマガジンに登録・解除

ＨＴＭＬの基礎　Ｖｏｌ．５６　「menu.html」を作成（ＨＴＭＬ記述）

2005/07/22

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

　　　　ＨＴＭＬの基礎　−タグを覚えてウェブページを作ろう！−

　　　　　　2005/07/22（Fri） Vol.56　　　　　　　執筆：ｙｋｒ
　　　　　　　　　　　　　　http://ykr.main.jp/html/index.html

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

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

　　　　１．「menu.html」を作成　　　ＨＴＭＬ記述

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

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

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

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

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

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

１．サイトに使用する素材の準備

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

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

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

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

</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」です。
　　ダウンロードした画像とファイルは同じフォルダ内に置いてください。
　　なお、表示の都合で、タグの途中で改行されてしまっている箇所がある
　　かもしれませんが、実際は改行せずに記述するよう注意してください。

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

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

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

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

来週は・・・

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

　　　　１．「menu.html」を作成　　　ＨＴＭＬの解説

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

（予告なく変更する事があります）

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

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

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

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

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

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

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

■■■「ＨＴＭＬの基礎」姉妹サイトです。よろしくお願いします。■■■■
■
■■■「全部まるごとスタイルシート」
■　　　http://ykr414.com/css/
■　　　スタイルシート辞典です。プロパティごと、または目的ごとに引
■　　　け、ブラウザの対応状況なども掲載しています。
■　　　ＨＴＭＬに加える事で、より細かいレイアウトの指定が可能に。
■　　　コピーペーストするだけで利用できるテンプレートのページも。
■
■■■「コマンドプロンプトを使ってみよう！」
■　　　http://ykr414.com/dos/
■　　　コマンドプロンプトとは何かから始まり、バッチファイルの作成
■　　　法や、コマンド別・目的別に引けるコマンド辞典。
■　　　初心者でもわかるよう細かく説明。
■
■■■「伸び縮みマークアップ言語　ＸＭＬ」
■　　　http://ykr414.com/xml/
■　　　ＳＧＭＬのサブセットであるＸＭＬは、ネット上で扱うデータを
■　　　記述するためのデータフォーマットで、柔軟性のある言語構造を
■　　　持っており、プログラムで自在にデータを情報処理できます。そ
■　　　のＸＭＬを実際に文書を作成しながら解説。随時追加更新。
■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

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

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