ホームページ作成・素材

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

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

全て表示する >

HTMLの基礎 Vol.51 実際にウェブぺージを作成する 2

2005/06/17

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

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

      2005/06/17(Fri) Vol.51       執筆:ykr
              http://ykr.main.jp/html/index.html

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

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

    1.実際にウェブぺージを作成する 2

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


  ものすごく睡眠不足が続いており、ついに先日熱を出してしまいました。
  私は熱が出ると一気に上がってしまうのですが、ゆっくり休んでいるわけ
  にもいかないので(じっとしていられないのもありますが)いつもと同じ
  ように過ごしています。

  さて、今回は前回の続きです。前回はテーマを決めました。
  それでは今回も最後までお付き合い宜しくお願いいたします。


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


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


1.大まかなレイアウトを考える

  前回テーマを「喫茶店のオーナーになったつもりでデザート等を紹介する
  ウェブサイトを作成」と決めました。以下はそのテーマに沿ったコンテン
  ツです。


   ▼喫茶店のデザート紹介

    タイトル「カリスマパティシェの拘りデザート CAFE&SWEETS」

     ▽お店・シェフの紹介
     ▽店内のイメージを掲載したページ
     ▽お店のインフォメーション(所在地・連絡先など)
     ▽デザートメニュー

       ・シェフ一押しの木苺ムース 450円(写真)
         木苺の甘酸っぱいソースと生クリームのコクが絶妙にマッ
         チした当店一押しのデザートです。

    (今の時点では、上のメニューなどは仮です。)


  テーマと大体の構成が決まったところで、レイアウトを考えます。とい
  っても、色などの装飾ではなく、コンテンツの配置です。よくありがちな
  のが、作成している最中に「やっぱりこっちの方が・・」などと変更した
  くなることなのですが、はじめにある程度頭で決めておかないと、場合に
  よっては作り直ししなくてはならないことにもなるかもしれません。


  なので、それぞれの配置を決めるのですが、メールマガジンでは非常に説
  明しにくいので、以下のページから表示例をご覧下さい。


  http://ykr.main.jp/html/sam/sample.html


  上記のページに表示された画像のような配置を元に、HTMLを記述しま
  す。

  ※作成方法は人によってそれぞれ適したやり方があると思うので参考程度
   にしてください。


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


2.実際に作成するものは何かを考える

  ここでは具体的に何を作成するのかをあげます。まず・・


  ▼ ページ   4P
  ▼ トップの画像
  ▼ 店内の画像 3枚
  ▼ デザートの画像 2枚(にしておきます)
  ▼ お店のロゴ
  ▼ コンテンツメニューのボタン 4つ


  今思いつくのはこんなものでしょうか?ページの出来具合を見て、余りに
  も殺風景になるようでしたらもう少し追加するかもしれません。
  はじめにこうやってきちんと決めておけば、あとはそれに基づき組立てて
  行くだけなので、割と完成まで早いと思います。


  というわけで、次回はページにHTMLを記述していきます。
  素材等は次回用意いたします。(もし使用されるのでしたら、ダウンロー
  ドしてお使い下さい。直リンクはサーバに負担がかかるので禁止しており
  ます。)


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


来週は・・・

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

    1.実際にウェブぺージを作成 3  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!: - 点   

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

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

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

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

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