まぐまぐで発行中！なるほど！よくわかる！ホームページ運営
━━━━━━━━━━━━━━━━━━━━━━ vol.6━ 2006.07.27 ━
なるほど！よくわかる！ホームページ運営！
━━━━━━━━━━━━━━━━━━━━━━━━━━発行部数99部━
■ カレンダー・暦 イベント
■ まったくの素人にでも出来るホームページ作成！ 第２回
■ 編集後記
◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
カレンダー・暦 イベント 2006.07.31〜2006.08.12
◆───────────────────────────────◆
・土用の丑の日 ８月４日
・青森ねぶた ８月２日〜７日
・秋田竿燈まつり ８月３日〜６日
・山形花笠まつり ８月５日〜７日
・仙台七夕まつり ８月６日〜８日
※土用の丑の日については４号参照のこと
▼「なるほど！よくわかる！ホームページ運営」第４号バックナンバー
http://blog.mag2.com/m/log/0000199475/
※各地の祭りについては前号参照のこと
▼「なるほど！よくわかる！ホームページ運営」第５号バックナンバー
http://blog.mag2.com/m/log/0000199475/107501697.html
・広島平和記念日 ８月６日
・長崎原爆の日 ８月９日
1945年（昭和20年）8月6日午前8時15分、広島市に原子爆弾が投下され
一瞬にして市街は壊滅し、十数万人の命が奪われました。
続いて8月9日午前11時2分、長崎市に原子爆弾が投下され
7万数千人の命が奪われました。
翌10日、日本政府はポツダム宣言の受諾を決定しました。
8月6日は広島市で、8月9日は長崎市で
犠牲者の霊を慰め世界平和を祈念する式典が開催され
夜には精霊流しが行われます。
この日を忘れてはいけませんね。
・阿波おどり ８月１２〜１５日
徳島市で阿波おどりが開催されます。
「連」と呼ばれる数十人単位の踊りのグループごとに
男性は鉢巻き・足袋姿、女性は鳥追い笠に蹴出（けだし）姿などで
市中を踊り歩きます。
連に入っていない人も「にわか連」として参加し
自由に踊ることができます。
徳島市以外でも、徳島県内各地で阿波踊りが行われます。
踊る阿呆に見る阿呆 同じ阿呆なら踊らな損々
阿波の殿様蜂須賀公が 今に残せし阿波おどり・・・
夏休みですね〜。
旅行にお出かけする方も多いのではないでしょうか。
楽しい旅行にするために日中症など健康には注意してください！
◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
まったくの素人にでも出来るホームページ作成！ 第２回
◆───────────────────────────────◆
とにかくホームページを作りたい！
とにかく無料で作ってみたい！
そうそう、ホームページを作って楽しい生活を始めましょう！！
◎無料で作ってみよう！ホームページ！
前回、「なるほど！よくわかる！ホームページ運営！」第4号にて
第１回をお送りしました。
※ご参考まで 第４号バックナンバーです。
▼http://blog.mag2.com/m/log/0000199475/
忍者ツールズさんを使って本気で作ってみよう！というコーナーです！
では、第２回早速いってみましょう！！
『第２回 トップページを飾ろう！』
まずホームページを作るにあたってはじめに作成するのが
トップページです！
前回 index.html を作成しました。
今回はその index.html を膨らませてみようと思います。
◎THEレイアウトを決めよう！！
１）レイアウト決め！
ホームページの見た目を決めましょう！
【レイアウト １】
現在、主流となるのはやはり ブログ のようなタイプ
サイドメニューで縦長になります。
┌───────────────────────────┐
｜ ホームページ ヘッダ部 ロゴやらコメントやら ｜
├───────┬───────────────────┤
｜ メニュー ｜ ｜
｜ ｜ コンテンツ ■■■■■■■■■■ ｜
｜ ｜ 新着情報 ■■■■■■■■■■ ｜
｜ ｜ ｜
｜ ｜ ｜
｜ ｜ ｜
｜ ｜ 更新情報 ■■■■■■■■■■ ｜
｜ ｜ ｜
｜ 問合せ先 ｜ ｜
｜ ｜ ｜
└───────┴───────────────────┘
今回はこのタイプを作成します！
【レイアウト ２】
これも多いですね。
ヘッダ部に横に並べたメニューです。
┌───────────────────────────┐
｜ ホームページ ヘッダ部 ロゴやらコメントやら ｜
├───────────────────────────┤
｜ メニュー メニュー メニュー メニュー 問い合わせ ｜
├───────────────────────────┤
｜ コンテンツ ■■■■■■■■■■ ｜
｜ 新着情報 ■■■■■■■■■■ ｜
｜ ｜
｜ ｜
｜ ｜
｜ 更新情報 ■■■■■■■■■■ ｜
｜ ｜
｜ 問合せ先 ｜
｜ ｜
└───────────────────────────┘
このタイプはメニューが増えると横に伸ばすことが難しいので
メニューイメージボタンなどの幅で対応しなければならなくなり
変更が辛いかもしれません。
ただ、デザイン的にこれでないと・・・というものもありますので
一概にはいえませんが。
２）HTML作成！！
もう作ります！（笑）
なんでもとりあえず作って覚えましょう♪
【レイアウト １】の場合
１．画面上に大きなテーブルを作り
↓
２．中を上記のように分割します。
具体的に書くと・・・
＜ 全体的にテーブル （大枠） ＞
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃
┃ ヘッダ部分 ┃
┃ ┃
┃ カラム 横つなぎ２つ ┃
┃ ┃
┠───────┬───────────────────┨
┃ │ ┃
┃ │ コンテンツ部分 ┃
┃ メニュー │ ┃
┃ 部分 │ ┃
┃ │ ┃
┃ │ ┃
┃ │ ┃
┃ │ ┃
┃ │ ┃
┃ │ ┃
┗━━━━━━━┷━━━━━━━━━━━━━━━━━━━┛
上の例を HTML にしますと・・・
-------------------------------------------------------------
<TABLE width="680" cellpadding="0" cellspacing="0" border="0">
<TR>
<TD colspan="2">
<!-- ヘッダ部 -->
</TD>
</TR>
<TR>
<TD width="145">
<!-- メニュー部 -->
</TD>
<TD width="535">
<!-- コンテンツ部 -->
</TD>
</TR>
</TABLE>
-------------------------------------------------------------
このようになります。
※この場合、テーブル幅は680ピクセルに設定しています。
では、実際に index.html として作成してみましょう。
前回作成した index.html 内の文章はせっかくなので「ヘッダ部」へ
入れてみました。
------こ-こ-か-ら------------------------------------
<HTML>
<HEAD>
<TITLE>なるほど！よくわかる！ホームページ運営！</TITLE>
</HEAD>
<BODY>
<TABLE width="680" cellpadding="0" cellspacing="0" border="0">
<TR>
<TD colspan="2">
<!-- ヘッダ部 -->
とんでもねえ！<BR>
わたしゃ神様だよ！
</TD>
</TR>
<TR>
<TD width="145">
<!-- メニュー部 -->
</TD>
<TD width="535">
<!-- コンテンツ部 -->
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
------こ-こ-ま-で-------------------------------------
このテキストを index.html（または任意のファイル名.html）として
保存してください。
メルマガ第４号で解説したとおり FTP でアップロードします。
※＜ http://blog.mag2.com/m/log/0000199475/ ＞ 参照のこと
△このまま 第４号 で設定した ホームページアドレス
（私の場合・・・ http://comsize.nobody.jp/ ）
で見ても「おやおや？？？」となるはずです。
なぜか？というとこのままでは 前回までと表示が「変わっていない」
もしくは「中央寄せになっただけ」のはずですから。
枠線がないためテーブルの中にあるということがわからないんですよね。
◎そこで、ちょっと改造してみましょう！！
注）このテクニックは後々まで使えると思います。覚えておいてください。
・枠線をつけると言っても普通に テーブルタグ<TABLE>の border="0" を
border="1" にするだけでは ダサい んです。
※実際にやってみるとわかりますが額縁のような感じになります。
味があってイイ！場合もありますが、洗練されてないですよね・・・
そこでこうします・・・・・・・
------こ-こ-か-ら------------------------------------
<HTML>
<HEAD>
<TITLE>なるほど！よくわかる！ホームページ運営！</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE width="680" cellpadding="0" cellspacing="1" border="0"
bgcolor="#CCCCCC">
<TR bgcolor="#FFFFFF">
<TD colspan="2">
<!-- ヘッダ部 -->
とんでもねえ！<BR>
わたしゃ神様だよ！
</TD>
</TR>
<TR bgcolor="#FFFFFF">
<TD width="145" height="200">
<!-- メニュー部 -->
メニュー１<BR>
メニュー２<BR>
</TD>
<TD width="535" height="200">
<!-- コンテンツ部 -->
■ おもしろバナシ<BR>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
------こ-こ-ま-で-------------------------------------
［解説］
まずボディタグ<BODY>で背景色とテキスト色を決定します。
今回 背景を白（#FFFFFF）、テキストを黒（#000000）に設定しました。
通常のブラウザではこれが初期設定（デフォルト）の状態です。
好みに応じていろいろ変えてみても面白いです。
※色はＲＧＢ形式で指定します。こんなページを発見！参考まで
http://www.pep.ne.jp/club/doujou/step/step38.html
▼ホームページ作成道場さん
http://www.pep.ne.jp/club/doujou/
その後、テーブルの背景色をシルバー（bgcolor="#CCCCCC"）にします。
テーブル内のカラム同士の間を１ピクセル空けます。（cellspacing="1"）
↓この部分
<TABLE width="680" cellpadding="0" cellspacing="1" border="0"
bgcolor="#CCCCCC">
そして各行の背景色をまた白に戻すのです。
↓この部分
<TR bgcolor="#FFFFFF">
するとどうですか！？
枠線がシンプルな線になりますね。
▼こういう風になります。
http://comsize.nobody.jp/
初めて作成する方には難しいかもしれません。
ですが、余計なことを覚えるより 「とにかく！使えるページを作る！」
というのが趣旨ですので 「使えること」 はどんどん教えますよ〜！
今回はここまで！
背景色などをアレンジして楽しんでみてください。
レイアウトについて・・・まだまだ奥が深いですが、今後も随時取り上げて
いきたいと思いますのでお楽しみに！
次号は、お仕事コラムです。
◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
編集後記
◆───────────────────────────────◆
第６号いかがでしたでしょうか。
まったくの素人にも〜シリーズ第２回でしたが、やはり難しいですね。
伝えたいことがなかなかメール上では・・・ということで
近々、ホームページとしてまとめていきたいと思います。
ブログ形式にしようかな。
しばしお待ちくださいませ！
今回、ちょっと飛ばしすぎ！？感が私自身にもありましたが思い切って
書いてみました。
（ちょっと考えすぎて発行時刻が遅れましたが・・・申し訳ございません。）
「むずかしい！」や「ここを詳しく！」などご意見・ご感想・ご質問等
ございましたらお気軽にメールをくださいね。
今後も皆さんが「使える」情報を発信できるよう努力してまいります！
このメルマガを読んで生まれた「疑問」「質問」「ご意見」「ご感想」
ございましたお気軽にメールをください！
よろしくお願いします！
「ホームページを優秀な営業マンに！」
私もそのお手伝いをします！
◎ このメールマガジンを読んだご感想・ご意見・ご質問、また仕事依頼
などございましたらなんなりとお気軽にメールをください。
お返事は必ず書きます！
------------------------------------------------------------------
☆ ホームページ運営コンサルタント
☆ 発行人： 株式会社コンサイズ さとう たけし
☆ 弊社HP： < http://www.comsize.com/ >
☆ メール： < mag@comsize.com >
★ 購読・解除はこちらでできます！
まぐまぐ →→ http://www.mag2.com/m/0000199475.html
------------------------------------------------------------------
PR--- ブログ「ホームページ運営コンサルタント−さとうたけし」
是非、ご覧になって下さい！
http://blog.comsize.com/
------------------------------------------------------------------
