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

トップページ

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

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

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

メールフォーム

掲示板

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

Photo日記

page01 page02 page03 page04

Page03
１１．タイトルを「見出し」にしましょう
１２．「CSSスタイル」でスタイルシートの定義をしてみましょう
１３．スタイルシートで<table>（テーブル）に枠を付けましょう
１４．「スタイルシートで<img>（画像）に枠を付けましょう

１１．タイトルを「見出し」にしましょう

DreamWeaver4.0操作説明

<body>～</body>タグ内に最初に記入したタイトル「Photo日記」を範囲選択しましょう。
範囲選択したままの状態で、プロパティパネル（画面下に表示されているパネル）の上段左寄りの「フォーマット」欄からプルダウンメニューで「見出し１」を選びましょう。
「見出し」は、記事の重要度によって付けられる<h1～6>のタグです。数字が小さいほど重要度は高く、また通常ブラウザで表示される字も大きくなります。
「見出し」は、ただ単に表示に関係するだけでなく「記事の重要度」という役割をもっています。「字が大きすぎるから」と、タイトルなのに「見出し1」ではなく他の「見出し○」選んでしまっては意味がありませんので、気をつけましょう。
この字の大きさなどは次にご説明する「CSSスタイルシート」でどのようにも変えることができますよ。

ソース

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

<body>～</body>タグ内に最初に記入したタイトル「Photo日記」を<h1></h1>タグで囲みましょう。
<h1>タグは他に<h6>まであります。これらは記事の重要度によって付けられる「見出し」タグです。数字が小さいほど重要度は高く、また通常ブラウザで表示される字も大きくなります。
ここでは一番初めのタイトルなのでもっとも重要度の高い<h1>タグを使っています。ブラウザで表示するとかなりの字の大きさですが、これは次にご説明する「CSSスタイルシート」でどのようにも変えることができますよ。

１２．「CSSスタイル」でスタイルシートの定義をしてみましょう

DreamWeaver4.0操作説明

「CSSスタイル」でスタイルシートの定義をしてみましょう。テーブルとイメージ画像に1ピクセルの枠を付けます。メニューバーの「ウィンドウ」→「CSSスタイル」をクリックして「CSSスタイル」パネルを出しましょう。

ソース

これから「CSSスタイル」、スタイルシートでテーブルとイメージ画像に1ピクセルの枠を付けます。
スタイルシートは<head>～</head>部分に、以下のように記述します。

<style type="text/css">

</style>

１３．スタイルシートで<table>に枠を付けましょう

DreamWeaver4.0操作説明

「CSSスタイル」パネルの下段右から3番目の「新規スタイル」ボタンをクリックしましょう。
すると「新規スタイル」パネルが現れます。<table>タグに枠を付けますので、以下のように設定してください。

タイプ：「HTMLタグの再定義」をチェックします。
タグ：プルダウンメニューで「table」を選択します。
定義場所：「このドキュメントのみ」を選択します。
※このとき「新規スタイルシートファイル」を選ぶと外部ファイル扱いになります。
ここまで終えたら「OK」をクリックしてください。「table のスタイル定義」パネルが現れます。

幅：上、右、下、左、それぞれ1ピクセル／カラー：すべて#CCCCCC／スタイル：実線

「table のスタイル定義」ここで<table>タグに枠を付ける設定をします。
まずパネル画面左の「カテゴリ」から「ボーダー」を選びましょう（「ボーダー」の文字をクリック）。するとパネル画面右に「ボーダー」の設定画面が出ますので、上記図の通りに設定してください。
このとき「スタイル」で「実線」を選び忘れるとブラウザでなにも表示されないので注意しましょう。
設定を終えたら「OK」をクリックしてください。<table>タグの定義が終わりました。この定義結果はDreamWeaverの操作画面には表示されません。ブラウザではちゃんと表示されますのでご安心ください。

ソース

<body bgcolor="#FFFFFF" text="#000000">
<h1>Photo日記 </h1>
<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">
<p>Rose A</p>
<p>今日は良いお天気でした。<br>
薔薇の花を買いました。<br>
春を感じました。</p>
</td>
</tr>
</table>
</body>
</html>

<head>～</head>部分に記述した<style type="text/css">～</style>のなかに、<table>タグに枠を付ける定義をしましょう。
table 定義するタグ。<　>はいりません。
{ } 内容を囲みます。
border: #CCCCCC ボーダーの色
border-style: solid ボーダーのタイプ。「solid」は実線です。「dotted」だと破線になります。
border-top-width: 1px ボーダートップ、上の線です。1ピクセルの設定です。ピクセルの数字を大きくすると線も太くなります。
border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px　右、下、左の線です。上の線と同じく1ピクセルの設定です。
；設定のひとつひとつはセミコロンで区切ります。

１４．スタイルシートで<img>（画像）に枠を付けましょう

DreamWeaver4.0操作説明

続けて画像（グラフィックイメージ）の<img>タグにも枠を付けましょう。
先程の<table>に追加する形になるので、「CSSスタイル」パネルの下段右から2番目の「スタイルシートを編集」ボタンをクリックしましょう。すると「スタイルシートの定義」パネルが現れます。「新規作成」をクリックしてください。
<table>タグのときと同様「新規スタイル」パネルが現れるので、同じように設定してください。
サンプルではボーダーの色のみ「#E3E3E3」に変えています。

ソース

<html>
<head>
<title>Photo日記</title>
<style type="text/css">

</style>
</head>

続けて画像（グラフィックイメージ）の<img>タグにも枠を付ける定義をしましょう。
img 定義するタグ
border: #E3E3E3 ボーダーの色
上記以外すべて同じ記述です。

このページのトップへ