入門!Dreamweaver使い方講座

CSS修正(前編)

前回と同様、作りながら学べるように説明しています。前回はレイアウトにテーブルを使用しました。今回はそれをCSSで修正します。

Lecture-03

Lecture-03では主にCSSを使って修正していきます。 では、前に作ったファイルを利用し、修正作業を説明します。まずは下準備をしましょう。 [dwlec02]フォルダをコピー[Ctrl+c]してください。それを適当なところに保存し、「dwlec03」と名前を変更してください。変更したらそれをカット[Ctrl+x]し、[dwlec]フォルダにペースト[Ctrl+v]してください。中身は前に作ったindex.htmlと一緒ですね。なのでタイトルをdwlec02からdwlec03に変更してください。これで準備完了です。 まずCSSファイルを作成します。 もちろんやり方は一つではありません。ここで紹介するのはそのうちの一つです。では[Ctrl+n]を押してください。

【Dreamweaver新規ドキュメントでcssを選択】

カテゴリはいつものままです。いつもは基本ページからHTMLを選んでましたよね。今回はその下のほうにあるCSSを選択し、作成をクリックしてください。 開くと先頭に/* CSS Document */と書いてあるはずです。これはいらないので消してください。消したら保存しましょう。index.htmlファイルと同じ階層に保存してください。名前は「dwlec03.css」にでもしましょうか。では次にテーブルを使ったファイルをDreamweaverで開いてソースを見てください。

【Dreamweaver、css記述画面】

コードビューを見てください。上のほうに<style type="text/css">とありますね。そこから</style>までがCSS-スタイルシートの記述部位です。こいつらは本当ならHTMLファイルの中にあるのは望ましくはありません。なのでこのCSSを外部に保存し、HTMLファイル内に読み込む形、つまり外部ファイルとして使用します。それではやってみましょう。

<style type="text/css">から</style>までを選択し、カット[Ctrl+x]してください。そのまま先につくったCSSファイルにペースト[Ctrl+v]してください。ペースト[Ctrl+v]したら上書き保存[Ctrl+s]してください。ちなみに必ず保存しなければならない訳ではないので。一応念のためです。さて、CSSファイルを作成しましたが、ただペーストして終わりではありません。余計な文が入ってますからね。それを削除します。現在のCSSファイルのソースはこのようになっているはずです。



<style type="text/css">
<!--
body,td,th { 
font-family: MS Pゴシック, ヒラギノ角ゴ Pro W3, Osaka; 
font-size: 14px; 
color: #333333; 
} 
body { 
background-color: #FFFFFF;
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
}
-->
</style>	


<style type="text/css"><!-- ○○○〜(←css記述部分) --></style>というのはHTMLファイル内でCSSを使用し、且つHTMLファイル内に記述するときに使用します。さっきHTMLファイルから外部CSSファイルにカットペーストしましたよね。CSSファイル内にCSSを記述するときにはこの文はいらないのです。なので消してしまいます。するとこんな感じになります。※<style type="text/css">〜は将来使えなくなります。すでに「XHTML basic」では廃止されています。そういうわけでHTML内にCSSを記述するのは今から控えたほうが賢明かと思われます。詳しくは別ページで解説します。



body,td,th {
font-family: MS Pゴシック, ヒラギノ角ゴ Pro W3, Osaka;
font-size: 14px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


どのCSSがどの役割?

ではでは、更にこのCSSがどこの何の役割を担っているのかを説明します。
body,td,th {
(↑どこの?場所を指定してます。この場合はほぼページ全体ということです。)
font-family: MS Pゴシック, ヒラギノ角ゴ Pro W3, Osaka;
(↑何のフォントを使うの?「MS Pゴシック, ヒラギノ角ゴ Pro W3, Osaka;」というフォントを使います。優先順位は左なほど高いです。)
font-size: 14px;
(↑フォントの大きさは?14pxです。※pxという単位は絶対値です。後に解説します。)
color: #333333;
(↑フォントの色は?#333333です。黒に近い灰色です。これについては#333と省略可能です。これも後に解説します。)
}
body {
(↑どこの?body、つまり見えるところ全てですね。)
background-color: #FFFFFF;
(↑背景の色は?#FFFFFFです。白です。)
margin-left: 0px;
(↑左側にどれくらいのマージンを確保するか。0pxということはマージンは無しです。)
margin-top: 0px;
(↑上にどれくらいのマージンを確保するか。)
margin-right: 0px;
(↑右側にどれくらいのマージンを確保するか)
margin-bottom: 0px;
(↑下にどれくらいのマージンを確保するか)
}

CSSファイルを読み込む

さて、現時点のHTMLファイルをプレビューしてみると、今まで無かったmargn(隙間)が上と左にできています。これはHTMLファイル内のCSSをCSSファイルに移動したからです。ただCSSファイルに記述を移してもHTMLファイルにはCSSが読み込まれていません。では、これからCSSファイルをHTMLファイルに読み込ませます。 HTMLファイルを開き、デザインビューをアクティブ(デザインビューの何も無いところをクリックしてください。※テーブルをクリックすると違うプロパティが出てしまうのでご注意ください。)にしてください。

【Dreamweaverプロパティスタイル】

上の画像のようにプロパティにスタイルと表示されているはずです。そこを開くとこのようになります。

【Dreamweaverスタイル開】

開くと下に名前の変更とスタイルシートの適用とありますね。このスタイルシートの適用のほうをクリックしてください。下のようなウインドウが開きます。

【Dreamweaverスタイルシートの編集ダイアログ】

参照をクリックしてください。すると次のウインドウで、スタイルシートファイルを選択という画面が出てきます、dwlec03.cssを選択して追加方法のリンクをさせるにチェックを入れてOKをクリックしてください。ファイルを読み込ませてしまうとCSSファイルを作った意味が無いのでリンクのほうをチェックし、OKをクリックし、プレビューしてみましょう。上と左のmarginがなくなったはずです。次はHTMLファイルのソースを見てみましょう。

【Dreamweaverスタイルシートの編集】

<head>の上に<link href="dwlec03.css" rel="stylesheet" type="text/css">という一行が追加されました。この一行がどこのCSSファイルを読み込むかの指令を出しています。現段階では深い意味を覚える必要はありません。Dreamweaverの機能で簡単にできますから。CSSファイルを読み込むときはこうするんだということを頭に入れといてください。もちろん覚えといて損はありませんけどね。後々役立ちます。

さて、まだ終わりではありません。現在では背景画像などは全てCSSで指定することが推奨されています。今のテーブルを作ったHTMLファイルはHTMLで背景画像を指定しているのでこれを修正する必要があります。 初めはこの内容はこのページで完結の予定だったんですが、予想以上に長くなったために2ページに分けました。偶然ですが、いい例が出来てしまいました。あまりにも1ページが長くなるようでしたらページを分けましょう。下まで見た後、一番上に戻るのはかなり億劫だったりしますし、ユーザーにストレスが溜まってしまいます。ページの一番下、フッターの上などの適当なところに「ページの一番上に戻る」などのページ内リンクを置くのも良いと思いますよ。続きをご覧には下のリンクをクリックしてください。

次のページへ >> CSS修正(後編)

dreamweaver初級
練習講座
dreamweaver中級
便利機能 & トピックス
番外編
その他
ショッピングのことなら
BOOKMARK