ホームページ制作/WEBサイト制作、システム開発の株式会社コンサイズ東京都渋谷区恵比寿

株式会社コンサイズトップ > メールマガジンバックナンバー > 第６号 2006.07.27
なるほど！よくわかる！ホームページ運営！第６号 2006.7.27
まぐまぐで発行中！なるほど！よくわかる！ホームページ運営
　━━━━━━━━━━━━━━━━━━━━━━ 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/
　------------------------------------------------------------------