初心者のためのホームページ作り 第15号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  目次

プレーンテキスト版バックナンバー

今週<第15号>マガジンのおさらい

                   毎週金曜日配信 What's New 2002/8/23
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■ テーブルの作成 その3

◆今回はテーブルによるレイアウトの表現を中心に講座を進めます。ある意味で
はテーブルを使うハイライトかもしれません。
 初心者にはちょっと難しいと思いますが、繰り返し何度もお読みください。
ポイントとして、どこまでが横の行で、どこまでがセルの範囲なのかをつかんで
おくことが大切です。

当サイトのトップページでも、テーブルを使ってレイアウトを構成しています。ボックスなどブロックレベル要素で記述したコンテンツを横に2つ並べるには、テーブルは不可欠です。テーブルをうまく使うことによって表現豊かなページに仕上げることが可能です。
下記のテーブルのサンプルをご覧下さい。セル内にリストや見出し要素を配置したテーブルです。

Web for beginner

  • Element
  • Propaty
  • Value
  • HTML -- Hyper Text Markup Language
  • CSS --- Cascading Style Sheet

Latest Update Aug,23,2002

HTML文はメールマガジン第15号を参照してください。

スタイルシートとの組み合わせによって、テーブルはどのような表現も可能にする応用の広い要素です。是が非でもテーブルはマスターしておきたいところです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆テーブルの中にテーブルを入れる
いわゆるテーブルの入れ子というもので、セルの中にテーブルを記述して入れ子
にします。慣れないうちはややこしくなってしまいますが、設計段階で整理して
おくと理解が早いと思います。
 ポイントとして、入れ子にするテーブルは、データセル(td)の中で記述する
ようにします。

下記のテーブルをご覧ください。テーブルの横の行は3つのセルから成り立っています。左と右側のセルの中に入れ子のテーブルを記述しています。

真ん中のセルには見出し要素と段落を表わす p要素を記述しています。この中に適当な画像を入れていただいてもかまいませんが、あまり大きなサイズの画像では不意な横スクロールが発生する可能性があります。

なお、コンテンツは適当に選んだものです。この中に画像やアンカーなどを入れるとトップページで使えそうなレイアウトになります。

お料理教室   
  • お弁当のお惣菜
  • お酒の肴
  • 簡単味噌汁
  • 残り物の工夫
季節の野菜料理       
  • かぼちゃの煮付け
  • なすの味噌焼き
  • トマトのソース作り
  • そら豆の豆腐和え

ばんばんの健康料理

残暑を乗り切るためにも栄養たっぷりの料理が欠かせません。健康のためにも野菜を摂るようにしましょう。

(ちなみに私は野菜嫌いで、漬物が食卓にあると怒り出してしまいます。そのためにかなり目が悪く内臓もよろしくありません。野菜はたっぷりと食べましょう。)

スタミナ料理
  • 激辛カレー
  • 鶏胆の煮付け
  • うなぎの蒲焼
  • ニンニク料理
さっぱり料理
  • カラフル冷麦
  • 夏野菜のソーメン
  • スタミナサンドイッチ
  • 冷たいデザート

テーブルに入れ子を入れたりすると複雑になって収拾がつかなくなる場合があります。初めはテーブルに枠線を表示してセルの範囲や行の並びなどを検証するようにすると理解しやすいと思います。なお、テーブルの枠線表示は、第13号をお読みください。

上記のHTML文は今週のマガジンをお読みください。また、上記のサンプルを少し改造した物を用意しました。参考になると幸いに思います。→ Sample



Copyright(C) 2002-2003 banban@scollabo.com