ホームページできるかな／超初心者さん向きＨＰ作成

トップページ

HPはどこにある？
HPのなかみ
HTMLって？
相対・絶対パス

用意するもの
作成手順
HP用素材
基本の小技集
HPを公開！

タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム

メールフォーム

掲示板

リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献

Photo日記

page01 page02 page03 page04

Page02
６．イメージの入っている左のセルの幅を230に固定しましょう
７．イメージの入っていない右のセルの縦揃えをしましょう
８．右のセルに画像の題名を入れましょう
９．コメントを入力しましょう
１０．続けてコメントを入力しましょう

６．イメージの入っているセルの幅を230に固定しましょう

DreamWeaver4.0操作説明

画像の入っている左側のセルをポチっとクリックしましょう。セルを選択するので、この時画像をクリックして選択するのはNGです。画像の真横などをクリックしましょう。
左側のセルの中にポインタが入っている状態で、プロパティパネル（画面下に表示されているパネル）の下段左寄りの「幅」欄に画像の幅である「230」を半角英数字で記入しましょう。（プロパティパネルに記入するのはフォント指定欄以外、すべて半角英数字です。）
左側のセルが画像の大きさに合わせてキュっと縮めばOKです。230ピクセルに固定されました。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

左側のセル（画像が入っている、ソースでは上方の<td></td>組）の開始タグ<td>に、半角スペースを入れ、 width="230"と記入しましょう。
セルの幅が230ピクセルに固定されます。

このページのトップへ

７．イメージの入っていない右のセルの縦揃えをしましょう

DreamWeaver4.0操作説明

今度は空欄の右のセルを中をクリックしましょう。ポインタはセルの左側中央にありますね。これは縦揃え・横揃えを特に指定していない時の表示のされ方です。セルの中のものは左から右へ、中央から内容が増えるにしたがって広がるように表示されます。
そこで上から表示させたい時は縦揃えの指定をします。プロパティパネル（画面下に表示されているパネル）の下段左側の「縦」欄のセレクトメニューから「上」を選びましょう。
左側中央にあったポインタがピコっと上にあがればOKです。上から表示されるようになります。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

右側のセル（空欄の、ソースでは下方の<td></td>組）の開始タグ<td>に、半角スペースを入れ、 valign="top"と記入しましょう。
ブラウザの仕様で、特に指定のない場合セルの中のものは左から右、中央から内容が増えるにしたがって広がるように表示されます。
上から表示させたいときは valign="top"、下から表示させたいときは valign="bottom" と開始タグの中に入れるようにしましょう。

このページのトップへ

８．右のセルに画像の題名を入れましょう

DreamWeaver4.0操作説明

縦揃えを済ませた右のセルに画像の題名を入れてみましょう。ここでは「Rose A」と記入しています。文字入力に関しては難しいことは何もありませんので、普段通りに行ってください。
記入し終わったらキーボードの「Enter」キーを押してください。すると段落として改行され、次の段落に記入できるようになります。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">
Photo日記
<table width="600" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="230"><img src="rose-a.gif" width="230" height="250"></td>
<td valign="top">
Rose A
　
</td>
</tr>
</table>
</body>
</html>

右側のセル、ソースでは下方の<td>～</td>の中に、画像の題名を入れてみましょう。ここでは「Rose A」と記入しています。そしてその「Rose A」の文字をタグで囲み、<td></td>の中に入れ子にしましょう。
タグは「パラグラフ」、段落という意味です。この作業は題名と本文の段落分けです。もちろん、段落分けが必要ない方は省いてもよい作業ですよ。
題名をタグで囲んだら、次の段落のタグも記述しておきましょう。

このページのトップへ

９．コメントを入力しましょう

DreamWeaver4.0操作説明

次の段落に本文を記入しましょう。ここでは「今日は良いお天気でした。」と記入しています。記入し終わったらキーボードの「Shift」キーを押しながら「Enter」キーを押してください。すると改行されます。この場合の改行は、本当に普通の改行、といったらいいでしょうか。
「メモ帳」や「Microsoft Word」などの文書作成ソフトなら改行は「Enter」キーですが、ドリームウィーバーではそれは段落として分けることになります。改行は「Shift」キーを押しながら「Enter」キーを押さなくてはならないんですね。
改行はよくする作業だと思います。慣れないうちは思わず段落ばかり作ってしまうかもしれませんが、メニューバーの「編集」→「取り消し」ですぐ取り消すこともできるので（この「取り消し」はどの作業にも言えることですが）、大丈夫ですよ。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

次の段落に本文を記入しましょう。ソースではRose Aの次に記述しておいた～タグの中です。ここでは「今日は良いお天気でした。」と記入しています。記入し終わったら改行タグ を記述しましょう。
 は開始タグではなく、これ１コで完結しているタグです。このようなタグを「空要素」といいます。つまり、開始タグと終了タグで囲む、中身があってこそ成り立つタグではなく、空っぽでも役割を果たせるタグ、と言ったらいいでしょうか。
ちょっと分かりづらくてスミマセンが、とりあえず改行は タグを１コ入れておけばOKです（笑）。

このページのトップへ

１０．続けてコメントを入力しましょう

DreamWeaver4.0操作説明

「Shift」キーを押しながら「Enter」キーで改行したら、また同じように文章を記入してみましょう。ここでは「薔薇の花を買いました。」と記入した後に改行（「Shift」キーを押しながら「Enter」キー）し、「春を感じました。」と記入しています。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

タグで改行したらまた同じように文章を記入してみましょう。ここでは「薔薇の花を買いました。」と記入した後に を入れ、「春を感じました。」と記入しています。
ちょっと書くのが遅れてしまいましたが、ソース中の改行はブラウザには反映されません。ソース内でいくら改行しても、タグを入れなければ意味がないんですね。ソースは自分が見やすいように、好きなように改行してかまわないですよ。

このページのトップへ