|
|
|
|
|
| 初めてホームページを作ろう、となるとまずHTMLエディタソフトを使うか、またはHTMLを覚えよう、ということになります。エディタソフトの使い方は、それぞれのガイドブックやテュートリアルを参考にして覚えていただくしかありませんが、HTMLはメモ帳やシンプルテキストで書いても作ることができます。
ホームページのひな形が、初めからパソコンに入っていることが多いので、それを書き直していったり、「こんな感じ」というページを見つけて、HTMLでダウンロードして、それを書き直していくことも可能ですが、少なくとも基礎的なタグ（<html>のように<>ではさまれた命令文）を見て意味がわかるようにならなければなりません。（参考にしたページと印象が違うページに出来上がれば、著作権などの心配はありません） 慣れてくれば、HTMLは難しいものではないのですが、初めからタグを書いていくのは、やはりハードルが高いと思いますので、最初はHTMLエディタを使って、なにはともあれ、編集からアップロードまで一通りやってみることをオススメします。 まずは、どんなデザインにしようか、というところをラフにしてみます。「ここらへんにロゴを載せて、それからボタン。ここにイメージ画像を載せよう」などと考えていきます。そうすると、必要な画像がはっきりしてきますので、画像を用意しておきます。画像は GIF形式か JPEG形式で原寸大のものを用意しておきます。原寸大というのは、モニタで見える大きさのことです。モニタ上のものですから、解像度を７２PPiで、ピクセル寸法で処理します。グラフィックソフトでは、表示を１００％にしたときの大きさです。大きさはレイアウトが決まってきたら、また調整する必要があるかもしれませんが、とりあえず、先に用意できていると、レイアウトも楽です。 さて、ここからが問題です。エディタソフトがあると、レイアウトを編集するウィンドウに画像や文字を並べていけるのですが、何もしないと画面の左上隅に配置されます。テキストカーソルの位置を変えて、右寄せや中央にもできますが、それだけでは見やすくて、変化のある、センスのいいページを作るのは困難です。 そこで、テーブルを使ってホームページの部品をうまく並べる工夫をします。ここで、やっと「テーブル」が出てきましたが、これは表のことです。表というと一覧表のようなものが頭に浮かんでしまうかもしれませんが、ホームページのレイアウトは、ほとんどがこのテーブルで決めていくことになります。 一見表などないページでも、HTMLソースを表示してみると、<tr>や<td>というタグが大量に出てきて、目に見えない形でテーブルが使われているのがわかります。逆に言えば、テーブル<table>タグを上手に使えれば、最低限の画像で見栄えのいいページデザインも自由自在なのです。 単に文字を並べるだけのページでも、テーブルを作れば周囲に余白を作るなどして読み易くできます。 次回はテーブルの設定を具体的に説明していきます。 |
インターネットマガジン特別編集 (著) インプレス (2005/07/11) ビジネス向けウェブマスターを対象としたムック。ウェブマーケティングや効率的なサイト運営などに関する情報を提供する。 ひとこと 有償のCMS、アクセス解析、レンタルサーバーの移行など、Webに携わるプロや企業のWeb関係者向け
泣ける2ちゃんねる管理人 コアマガジン 巨大匿名掲示板「2ちゃんねる」に書き込まれた「泣ける話」の集大成。胸に秘めて言葉に出せない気持ち、どうしても言えなかった一言、宝石のように輝く思い出たち…。珠玉の書き込みを厳選して一冊にまとめる。 |
| 【補足05.9.30】
現在、ウェブデザインは、CSSでレイアウトをして、SE0を工夫するというのが一般的です。しかし、それにつけてもテーブルは必要ですし、CSSって何？SEO？？という方は、とりあえずHTMLだけ考えれば十分です。実際、よく分らないことをやってエラーを出したり、ブラウザによっては表示がおかしくなるようなページを作るなら、ごくごくシンプルなページの方が、はるかに検索エンジンにもヒットしやすいものです。 |
| ホームページ作成ソフトを使うと、レイアウト画面に直接、文字を打ち込むことができます。しかし、直接打ち込むと、左寄せか右寄せ、中心揃えの３種類しかできません。
そこで、まず、テキストカーソルを中心揃えにした状態で、カーソルのところにテーブル（表）を挿入します。そしてテーブルの設定を幅８０％〜９０％にして枠線の幅を０にします。デフォルトで数行数列の表になっている場合は、１行１列に直します。このテーブルの中に文字を打っていくと、まわりに適度な余白を作ることができます。横に画像を入れる場合は、２列にすれば、気持ち良く画像を入れることができます。
<center>から</center>の間が中心揃えになります。 ホームぺージでは、文字の大きさは見る人次第ですので、幅を決めたら縦（高さ）は自動にしておきます。そうすると、文字が大きくなってもテーブルなどが縦に伸びて文字を全て表示することができます。 <tr>から</tr>は１行です。<td>と</td>にはさまれた部分が一つのセルになります。この例では「あいうえお」と表示されます。次のセルでは画像が表示されます。 さらに、テーブルの中や、セルの内部も文字の並べ方や色を指定していきます。cellpadding="0" というのはセルの高さのことで、この数字を増やしていくと、セル内部の文字や画像のまわりに余白をつくることができます。 cellspacing="2"はセルとセルの間の隙間のことです。これを０にすれば隙間なくセルとセルとくっつけることができます。 テーブルの中にテーブルを入れることも出来ます。枠線の太さやその他の設定の違うテーブルを使いたい場合には、別のテーブルを作って配置していきます。 全部が中心揃えではつまらない、という場合もありますね。そんな場合はテキストカーソルでリターンキーをおして改行し、中心揃えを解除、あるいは右寄せや左寄せにします。 HTMLでは</center><div align="left"><p>などとなります。それまで中心揃えだったものをやめて左寄せに変えるところです。<p>はリターンからリターンまでです。左寄せは</div>というタグが出るまで続きます。 一覧表などなら、縦横同じ数づつのセルがあってもいいのですが、レイアウトのためのテーブルでは、それだけでは上手くいかないことが多いですね。つまり区切りの線が途中で終わって欲しいという時もあります。 そういうときには、行や列を連結します。行、列という言い方が混乱しがちだと思います。左から右に横に並んでいるものが行です。（図ではＡＡＡＡ）上から下へ並んでいるものが列です。（図ではＡＢＣ）文字を入力する場合、文字は改行するまで左から右へ並んでいきますね。それを行と呼ぶのと同じです。
１列目のＡＢＣを繋げて一つにしてしまったり、１行目のＡをいくつか連結したりすることができます。
これらを、どう使うかは、始めに作ったラフを実現するためにはどうしたらいいかと考える流れの中で、出てくることと思います。 次回はもう１回だけレイアウトについて |
スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術 エ・ビスコム・テック・ラボ (著) 毎日コミュニケーションズ HTML＋CSSを使用したWebページデザインのテクニックを、サンプル制作を通して解説します。CSSで自分の思い通りのサイトにデザインするとともに、「Web標準」としてクローズアップされつつある「検索エンジンへの最適化」「ユーザビリティの向上」「より高いアクセシビリティの実装」などを実現する手法を丁寧に解説。デザインとWeb標準準拠の両立を目指すWebデザイナーや制作者は必読の1冊です。
高森 英昭 (著) 毎日コミュニケーションズ ネットショップは、「こだわりの品揃え」「便利なサイト構成」「対話型顧客サービス」のバランスさえ良ければ、初心者オーナーでも繁盛店になることのできるネットビジネスとして大人気です。 |
||||||||||||||||||||
| 【補足05.9.30】
テーブルで注意しなくてはならないのは、「入れ子」です。 |
