ホームページ作成・素材

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

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

全て表示する >

HTMLの基礎 Vol.53 作成したトップページのHTMLの解説

2005/07/01

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

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

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

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

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

    1.トップページを作成   HTMLの解説

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


  暑くてほぼ一日中クーラーのかかった部屋にいます。暑いのが我慢でき
  ない私は朝早くか夕方の涼しい時間帯に外に出る事が多いです。(屋内
  での仕事で良かったです。)

  そう、前回記述したHTMLなのですが、後からみてとても大きな間違
  いに気づいてしまいました。通常<html>で始まり<head>がくるはずなの
  ですが、先程確認すると<head>の前に先に<meta〜>が来ていました。
  これは非常に大きな間違いです(大幅な減点です)。申し訳ありません
  でした。

  さて、今回は前回に記述して作成したHTMLやスタイルシートの解説
  を行います。スタイルシートについては、記述したものについては説明
  しますが、詳しい使用方法については書きませんので、詳しく知りたい
  という方は、専門のサイトで調べてください。

  では最後までどうぞ宜しくお願い致します。


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

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


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


1.トップページのHTML・スタイルシートの解説


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

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

  トップページのファイル名は「index.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-image:url('back.jpg');
10  background-repeat:no-repeat;
11  background-color:#000000;
12  margin:0px;padding:0px}
13 -->
14 </style>
15 <head>
16 
17 <body>
18 <table border="0" summary="トップページ">
19 <tr>
20 <td width="400">
21 </td>
22 <td width="230">
23 <div style="text-align:center;margin:10px 10px 30px 20px">
24 <img src="title.gif">
25 </div>
26 <div style="text-align:center;margin:100px 10px 50px 20px">
27 <a href="index.html">
28 <img src="top.gif" width="100" height="60" border="0" alt="トップ">
29 </a><br>
30 <a href="cafe.html">
31 <img src="cafe.gif" width="100" height="60" border="0" alt="店内">
32 </a><br>
33 <a href="menu.html">
34 <img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
35 </a><br>
36 <a href="info.html">
37 <img src="info.gif" width="100" height="60" border="0" alt="インフォ">
38 </a>
39 </div>
40 </td>
41 </tr>
42 </table>
43 </body>
44 </html>


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


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

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

  http://ykr.main.jp/html/cafe/index.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">


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

  スタイルシートを使用する際には、文字化けなどの誤作動を防ぐ為にも、
  必ず記述した方が良いでしょう。


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


07 <style type="text/css">
08 <!--
09 body {background-image:url('back.jpg');
10  background-repeat:no-repeat;
11  background-color:#000000;
12  margin:0px;padding:0px}
13 -->
14 </style>
15 <head>


  <head>内で記述するスタイルシートです。スタイルシートには単一ページ
  毎にスタイルを設定する方法、複数のページにスタイルを設定する方法、
  タグ毎にスタイルを設定する方法があります。上記のものは単一ページに
  スタイルを設定する方法です。

  ここでは、<body>に対してスタイルを設定する事で、このページのボディ
  内に対して、スタイルを設定しています。意味は以下の通りです。


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

    ページの背景画像に「back.jpg」を指定

  ▼background-repeat:no-repeat

    ページの背景画像の繰り返しを「しない」に設定
    (通常は背景画像を指定すると画面全体に敷き詰められて表示)

  ▼background-color:#000000

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

  ▼margin:0px

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

  ▼padding:0px

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


  「margin」と「padding」に関しては意味がわからない・・という方もお
  られると思います。余白の設定なのですが、詳しく知りたい方は以下のペ
  ージをご参照下さい。

  http://ykr414.com/css/style04.shtml


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


17 <body>
18 <table border="0" summary="トップページ">
19 <tr>
20 <td width="400">
21 </td>


  <body>が始まり、すぐあとにテーブルが記述されています。
  上記のソースはテーブルの左側のセルで、横幅が400ピクセルに指定
  されていますが、セル内には何も記述していません。


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


22 <td width="230">
23 <div style="text-align:center;margin:10px 10px 30px 20px">
24 <img src="title.gif">
25 </div>


  右側のセルです。セル内に記述された<div>(意味を持たないひとつのま
  とまり(ブロック)のようなもの)にはスタイルシートが記述されてい
  ます。これはタグ毎にスタイルを設定する方法です。意味は以下の通り
  です。


  ▼text-align:center

    内容を中央揃えで表示

  ▼margin:10px 10px 30px 20px

    <div>の外側の余白を、上10ピクセル、右10ピクセル、下30ピクセル
    左20ピクセルに設定


  <div>〜</div>の中には「title.gif」を表示させています。


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


26 <div style="text-align:center;margin:100px 10px 50px 20px">
27 <a href="index.html">
28 <img src="top.gif" width="100" height="60" border="0" alt="トップ">
29 </a><br>
30 <a href="cafe.html">
31 <img src="cafe.gif" width="100" height="60" border="0" alt="店内">
32 </a><br>
33 <a href="menu.html">
34 <img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
35 </a><br>
36 <a href="info.html">
37 <img src="info.gif" width="100" height="60" border="0" alt="インフォ">
38 </a>
39 </div>


  右側のセルの続きです。また<div>を使用しています。今度もスタイルシ
  を設定しています。意味は以下の通りです。


  ▼text-align:center

    内容を中央揃えで表示

  ▼margin:100px 10px 50px 20px

    <div>の外側の余白を、上100ピクセル、右10ピクセル、下50ピクセル
    左20ピクセルに設定


  <div>〜</div>の中には順番に画像を表示させ、さらにその画像に対して
  リンクを張っています。上から順に・・

  ▼「top.gif」に対して「index.html」へのリンクを
  ▼「cafe.gif」に対して「cafe.html」へのリンクを
  ▼「menu.gif」に対して「menu.html」へのリンクを
  ▼「info.gif」に対して「info.html」へのリンクを

  この順番で画像を表示させています。


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


40 </td>
41 </tr>
42 </table>
43 </body>
44 </html>


  そしてテーブルを閉じ、</body>、</html>で終了です。


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


  結構長くなってしまいましたが、内容は単純であったと思います。
  次回は店内紹介のページ「cafe.html」を作成したいと思います。


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


来週は・・・

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

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

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

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


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


  思ったより長くなってしまいました。大半がソースの記述なので、内容
  的にはそれほどの量でもないのでは・・思うのですが・・

  暑いせいもあると思うのですが、体調を崩してからフルーツをしょっち
  ゅう食べるようになりました。子供の頃は良く食べていたのですが、大
  人になってからは余り食べたいと思わなくなり遠ざかっていたのですが
  ・・ここ数日はほぼ毎日食べています。やっぱり水気のあるフルーツは
  すごく美味しいです。ついでに体にも良いので一石二鳥です。・・食べ
  すぎ無ければ・・ですが。

  さて、次回は新しいページ「cafe.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!: - 点   

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

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

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

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

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