ホームページ製作のつぼ。素人による素人のためのホームページ作成方法公開サイト。スキルあがると更新 更新履歴 サイトマップ
作例1
上部にタイトル、そして記事が大きく中心、両脇にコンテンツやお知らせを置くホームページの枠のつくり方
ホームページ製作のつぼ
トップページ
作例
作例1 作例2
一般コンテンツ
HPビルダー系
まずは標準モード
表の使い方
作例1
 手順1・・・・・・・・・全体の枠を確定させる(このページではスペースの都合上小さく作ります。
            実際の1/3スケールでの作成とします。220×180でつくります(まあ適当な大きさです)
 枠を確定させる・・・・・上部のバーから表を選択し表の挿入を選びます。そうするとボックスが出てきます。
              選択する項目・・・行は1、列も1、その他のチェックボックスはすべてチェックをはずします。
         

そうすると画面上にこのような小さな枠が表示されます。(作例作成の都合上、表の枠の表示をしています。実際は表示しないほうがよいです)この枠が基準になります。
次にこの枠の大きさを指定します。右上(作図している画面の枠の右上)にTABLE,BODY,TD,TH、FONT等の表示がされているものがあると思います。をそこをクリックする下からBODYの属性、CENTERの属性,TABLEの属性、TRの属性、TDの属性といったものが出てきます。実際にはBODYの属性で画面全体の色を指定しますが、ここでは無視します。TDの属性を選択するとセルの内容の指定をするボックスが出てきます。まずはここでセルの高さと横幅を指定します。改行の問題はしたの自動的に行を折り返すのチェックボックスで指定をします。またこの枠の中の色は下の背景のところで指定することが出来ます。ここでは枠作成ということに絞りますので色の指定はしません。又ボックスの中の上の方に表というところがありますのでこちらをクリックします。そうするとレイアウトが出てきて位置揃えという項目が出てきます。画面の左寄せで作成する場合は左揃えを面倒であれば自動を(左揃えになります)王道である中央にする場合には中央揃えを選択します。
 手順2・・・・・・・タイトルを入れる枠を確保する。大きさは自分の感性で決めましょう。
 土台となる枠が出来たら次の作業に入ります。タイトルを入れる枠の挿入です。やり方には2つあります。単独でこのタイトルの枠と取る方法とその後のための枠をまとめてとってしまうやり方です。ここでは解説のため単独で挿入する方法でやります。まずはどのくらいの大きさでタイトルを表示するかを考えます。ここでは全体の6分の1とします。特に根拠はありませんので、作る人の考えでやればよいのではないかと思います。枠の取り方で注意しなければならないのは外枠に対して内枠はいくらか小さくしなければならないということです。特に自動改行をしないという選択をする際にはこれは重要です。ここでは両側の5ピクセル(全体で10ピクセルほどカットしてタイトル用の表を挿入します。まず位置を決めます。上部の書式で位置揃えを選択します。位置揃えは中央揃えと上揃えを選択します。このようにしてから上記の表の挿入を再度行います。枠の指定も同じやり方です。大きさは210×30です。解りやすくするために薄いグレーで色を入れておきます。
 手順3・・・・・・・本文やコンテンツ、お知らせ等を入れるための枠を挿入する。
 このタイトルの下に入れ表の入れ方にはいろいろな考えかTあがあります。今回は表を挿入するということの練習ですのでこの場合も表の挿入という形でやります。手順2の状態で再び表を挿入します。手順1のところで指定したことがあるやり方で行と列を指定しますが、今回は3つに分けますので列を3で指定して表を挿入します。そしてまたTDの指定でこの3つに分けた表のそれぞれの大きさを指定していきます。両脇は当然細く、本文等が入る真ん中の部分は大きく取ります。ここでは両脇を35とし中心を130とします。たての長さは145とします。解りやすくするために右側の枠は薄いブルーを左側は薄いグリーンを真ん中には薄いピンクを入れておきます。この段階で基本的な枠の取り方は完成です。案外簡単にできるのではないかと思います。この枠の取り方と後述するセルの結合、分割、表の重ね合わせをやっていくといろいろな形のホームページが手軽にできるのではないかと思います。後はいろいろな枠を考えて試みる事です。考えるよりも実行が大事です。
(C)2005-2006アンクルマツ・ドット・コム All RIGHT RESERVED