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

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

RSS


メルマガの登録・解除

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



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

発行日:8/12

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

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

      2005/08/12(Fri) Vol.59       執筆:ykr
              http://ykr.main.jp/html/index.html

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

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

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

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


  この間は雷がすごかったです。できるだけ人のいる場所、しかも自分よ
  背の高い人のいる場所へ行くようにしています。というか、近くにいて
  雷が落ちたら同じなんだと思いますが、気分的なものです。

  さて、今回は最後のページ「info.html」の解説をします。
  最後までどうぞ宜しくお付き合いお願い致します。


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

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


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


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


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

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

  4ページ目のファイル名は「info.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 -->
12 </style>
13 <head>
14 
15 <body>
16 <table border="0">
17 <tr>
18 <td width="400" align="center">
19 
20 <table border="0" cellspacing="7" cellpadding="10" width="350">
21 <tr>
22 <td colspan="2" bgcolor="#000000" align="center">
23 <img src="infomation.gif" border="0" width="170" height="30" alt="infomation">
24 </td>
25 </tr>
26 
27 <tr>
28 <th bgcolor="#9999cc" width="80">
29 所在地
30 </th>
31 <td bgcolor="#ffffff">
32 大阪府○○市○○町1−1−1
33 </td>
34 </tr>
35 
36 <tr>
37 <th bgcolor="#9999cc">
38 TEL
39 </th>
40 <td bgcolor="#ffffff">
41 00-000-0000
42 </td>
43 </tr>
44 
45 <tr>
46 <th bgcolor="#9999cc">
47 FAX
48 </th>
49 <td bgcolor="#ffffff">
50 00-000-0000
51 </td>
52 </tr>
53 
54 <tr>
55 <td colspan="2" bgcolor="#ffffff">
56 パーティーなどのご予約も承ります。
57 予約日の1週間前までに電話にてお問い合わせ下さい。
58 なお、予約が一杯の場合は先着順とさせていただきますので、
59 ご了承くださいませ。
60 </td>
61 </tr>
62 
63 <tr>
64 <td colspan="2" bgcolor="#000000">
65 <img src="cafeinfo.jpg" border="0" width="330" height="248" alt="cafe and sweets">
66 <br>
67 <font color="#ffffff">※ 季節によりデザートメニューは変わります。
68 </td>
69 </tr>
70 </table>
71 </td>
72 
73 
74 <td width="230">
75 <div style="text-align:center;margin:10px 10px 30px 20px">
76 <img src="title.gif">
77 </div>
78 <div style="text-align:center;margin:100px 10px 50px 20px">
79 <a href="index.html">
80 <img src="top.gif" width="100" height="60" border="0" alt="トップ">
81 </a><br>
82 <a href="cafe.html">
83 <img src="cafe.gif" width="100" height="60" border="0" alt="店内">
84 </a><br>
85 <a href="menu.html">
86 <img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
87 </a><br>
88 <a href="info.html">
89 <img src="info.gif" width="100" height="60" border="0" alt="インフォ">
90 </a>
91 </div>
92 </td>
93 </tr>
94 </table>
95 </body>
96 </html>


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


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

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

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


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


07 <style type="text/css">
08 <!--
09  body {background-color:#000000;
10  margin:0px;padding:0px}
11 -->
12 </style>


  <head>〜</head>間のスタイルシートの記述です。
  全て見慣れたものばかりです。


  ▼background-color:#000000

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

  ▼margin:0px

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

  ▼padding:0px

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


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


16 <table border="0">
17 <tr>
18 <td width="400" align="center">
19 
20 <table border="0" cellspacing="7" cellpadding="10" width="350">
21 <tr>
22 <td colspan="2" bgcolor="#000000" align="center">
23 <img src="infomation.gif" border="0" width="170" height="30" alt="infomation">
24 </td>
25 </tr>


  <body>のすぐ後に、テーブルを記述しています。このテーブルは左と右
  のセルに分けられており、左セルは横幅400(width="400")ピクセル、
  セルの内容は中央そろえに設定しています。

  その左セルの内部にもうひとつ、幅350ピクセルの新しいテーブルを
  記述しています。セルの中にテーブルが入れ子になった状態です。
  (cellspacing="7")でセルとセルの間の領域の幅をを7ピクセル、セル
  の内容までの領域の幅を(cellpadding="10")で10ピクセルに設定、
  割と広めに設定しています。

  一つ目の列ですが、(colspan="2")と記述されています。これはセルと
  セルを結合する為の属性です。値が「2」となっているのは、左右に隣り
  合ったセル2つを結合する設定です。(わかりにくい説明ですが、簡単
  な事なので皆さん多分、わかっておられると思います。)

  セルの背景色を黒(bgcolor="#000000")に、セルの内容を中央そろえに
  設定したセルの中身には、「infomation.gif」を表示させています。


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


27 <tr>
28 <th bgcolor="#9999cc" width="80">
29 所在地
30 </th>
31 <td bgcolor="#ffffff">
32 大阪府○○市○○町1−1−1
33 </td>
34 </tr>


  次の列には2つのセルが表示されています。上の列で「colspan="2"」
  を記述したのはそのためです。左と右にそれぞれ、表示させたい文字列
  を記述していきます。

  次の 36〜52 までの2列は同じ事の繰り返しなので解説しません。


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


54 <tr>
55 <td colspan="2" bgcolor="#ffffff">
56 パーティーなどのご予約も承ります。
57 予約日の1週間前までに電話にてお問い合わせ下さい。
58 なお、予約が一杯の場合は先着順とさせていただきますので、
59 ご了承くださいませ。
60 </td>
61 </tr>
62 
63 <tr>
64 <td colspan="2" bgcolor="#000000">
65 <img src="cafeinfo.jpg" border="0" width="330" height="248" alt="cafe and sweets">
66 <br>
67 <font color="#ffffff">※ 季節によりデザートメニューは変わります。
68 </td>
69 </tr>
70 </table>
71 </td>


  TELやFAXなどの情報を記述しおえたら、また「colspan="2"」が設定さ
  れた列が出現します。ここも2つのセルをひとつに結合しています。
  必要な文字列を記述した後、次の最後の列、「colspan="2"」を設定して
  結合されたセルの中に、画像と白色に設定された文字列を記述した後
  テーブルを閉じて左セルを</td>で閉じれば、左側のセルは完了です。

  右側のセルは毎回言っているように、全てのページで同じ記述なので解
  説しません。以上で、とても簡単なものでしたが作成は終了しました。


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


  できるだけHTMLを使用して作成しようとすると、やはり表現力に限
  界がありますね。スタイルシートはとても便利なものですが、使い方を
  誤るととんでもない表示になってしまうプロパティなどもあります。
  (よくネットサーフィンしていて、スタイルシートが多用されているブ
  ログなどは、読みづらい・・なんてものではなく、文字が全て重なって
  しまっていたりするために全く読むことができないものなども見かけま
  す。多分作成者のブラウザではきちんと見えているのだと思いますが・
  ・)注意が必要です。

  次回のメルマガですが、内容は一体何にしようかと色々考えてみたので
  すが、寝不足で疲れ果てた頭では一向に考え付きません。
  というわけで、もしこのメルマガを読まれている方で「こういう事を教
  えて欲しい」「もう一度この説明をして欲しい」・・などご要望がござ
  いましたらYKR宛にお便り下さい。なお、掲載できるとは限りません
  し、多分返信もしませんので、勝手ですが本当にお暇な方で時間があっ
  たら宜しくお願い致します。

  もし何か思いついたらその内容でメルマガを執筆します。


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


来週は・・・

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

    1.思いつくまま

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

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


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


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

  あっという間の1週間です。もう眼精疲労のことなど考えていられない
  位色々やることがあります。でも最近思うのですが、多分私はボーっと
  している事ができない性格なので、忙しくしている方が性にあっている
  のだと思います。ただ、もう少し睡眠時間が欲しいです。

  さて、上記にも書きましたが、内容を一向に考え付かない為、もしこの
  メルマガを読まれている方で「こういう事を教えて欲しい」「もう一度
  この説明をして欲しい」・・などご要望がございましたらYKR宛にお
  便り下さい。なお、掲載できるとは限りませんし、多分忙しくて返信も
  できないと思いますので、勝手なお願いですが本当にお暇な方で時間が
  あり、「まあお便りでもしてやるか」なんて方宜しくお願い致します。
  (HTMLについての質問等でお願いします。スタイルシートでもOK
  です。あまり解説に時間のかかりそうなものは時間的なもので掲載でき
  ないかもしれません。お!と思うようなものがあれば分けて掲載するか
  も・・ただ、理解できるように説明できるかどうかはわかりませんので
  その辺はご了承下さい。)また、何か思いついたらその内容にするかも
  しれません。思いつくままという事で・・

  というわけで、次回のメルマガもどうぞ宜しくお願いいたします。


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

■■■「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
         http://ykr414.com/
  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
    読者数:
    4682人

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

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

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

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

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

    最終発行日:
    2017/04/23
    読者数:
    1129人

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

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

    最終発行日:
    2017/03/04
    読者数:
    972人

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

発行者プロフィール

過去の発行記事