ホームページを作成することは、「難しいからムリ」と思っている方もいらっしゃるでしょう。レッドキャップもホームページを作成したことが無い時、「ホームページを作るのはかなり勉強しないとダメなんだろうな〜」と思ってました。
結論からいうと、ホームページ作成はそれほど難しいものではありません。
もちろん、かなりデザインなどに こだわったりする場合は、難しい技術が必要になることもあるでしょう。でも、レッドキャップのこのサイトぐらいのデザインなら、簡単にできます。
ただ、ホームページ作成を簡単に行うには、知っておいてほしいテクニックがあります。
それは、表の使い方です。
レッドキャップは表の使い方がうまくできず、少し苦労しました。ですので、このページでは、表とセルについて少しだけ解説させていだきます。
|
|
 知っておこう！表とセル |
|
|
|
表は、枠や罫線の幅などを変えたり、枠に色をつけたり、表内の背景の色を変えたり、大きさを変えたり、表の中にテキストを記述したり、枠表示をなくしたりといろいろなことができます。
| 罫線を太く |
枠を太く |
罫線に色 |
背景に色 |
大きさを変える |
テキスト記述
枠非表示 |
|
|
|
|
|
|
|
さらに表は、分割することもできます。
|
表 1 |
|
| セル 1 |
セル 2 |
セル 3 |
セル 4
|
セル 5 |
セル 6 |
|
上の表1は、一つの表を 6つに分割したものです。分割された 1つ1つを「セル」といいます。
セル内の縦横の大きさは自由に変えることができますが、上と下のセルの横幅と、左右のセルの縦の長さは互いに影響されます。「セル
1」と「セル 4」の横幅は互いに影響されるので、同じ幅になっていますよね。「セル
1」と「セル 2」と「セル 3」の縦の長さは影響されるので、同じ高さになります。
|
|
知っておきたい！表を使うコツ |
|
|
|
おはようございます
レッドキャップです。 |
こんにちは
レッドキャップです。 |
こんばんは
レッドキャップです。 |
上のには、レッドキャップの挨拶が 3つ並んで配置されています。でもこれ、ホームページ上では、ただ表示したい位置に記述すればいいというわけにはいきません。
テキストを記述すること自体は、キーボードでパチパチと打っていけばいいんですが、配置するには、表をうまく使うことで、簡単にできます。
おはようございます
レッドキャップです。 |
こんにちは
レッドキャップです。 |
こんばんは
レッドキャップです。 |
表の枠を表示してみました。実はこんな感じで表を 3つのセルに分割して、セルの中にテキストを記述していたんですね。セルの中に画像を配置することもできます。
表を使えば、ウェブページの好きなところにテキストや画像を表示することが出来るんですね。
|
|
表をさらに活用しよう！ |
|
|
|
上には、レッドキャップの好きな色と、レッドキャップの趣味を記述しています。これはどのように配置していると思いますか？
これも表をつかってはいるんですが、1つの表ではありません。
枠を表示しました。表を 2つのセルに分けて、それぞれのセルの中にさらに表を入れています。入れた表は、上下に
2つに分割して、下のセルをさらに 3つに分割しているので、合計 4つのセルになってます。
ここで言いたいのは、表の中に表を入れる、というテクニックについてなんです。
ウェブページを作成するとき、コンテンツやテキスト、画像を配置するときに、一つの表をいくつものセルに分割するだけでは限界があります。「表の中に表入れる」、もしくは、「セルの中に表をいれる」ことで、さらに自由なサイトデザインを構成することができます。
表の中に表を入れることは、「そんなのわかってる！」って方もいらっしゃるとは思いますが、レッドキャップは初心者のころ、これにすぐには気づかずに、一つの表をいくつものセルに分割して、あ〜だこ〜だやってました。
上にも解説しましたが、一つの表を分割したセル同士は、縦横の幅などが互いに影響しあうため、こっちのセルの幅をを動かすとそっちのセルの幅が変わってしまい・・・・ってな具合に思うようにいかず、イライラしたりもしました。表やセルの中に新たな表を入れることで、その問題は簡単に解決したんですね。
もちろん、表の中に表をいれて、さらにその中に表を入れてもいいんですよ。表をいくつものセルに分割したり、そしてそのセルの中に表を入れ、さらに分割と、いろいろ試してみてください。
もし初心者の方、これからウェブサイトを作成したい方は、表の中に（セルの中に）表を入れるテクニックは覚えておいてくださいね。表やセルに関しては、ホームページ作成リンク集のページのホームページビルダーの使い方を解説しているサイトさんも参考にしてみてください。いろいろなテクニックが紹介されていますよ。
次のページでは、ウェブページの幅について考えてみましょう！ |
|
|
