筑波大学共通科目情報処理実習 HTML 練習問題【13】既存 HTML へのスタイルの適用練習 1 ■ <h1>や<p>などの HTML タグに CSS を設定する。 DreamWeaver のトップから[ファイル]メニューの[開く]を選択し、これまでの練習で自身が作成した html ファイル(test2.html)を開く。 HTML ファイルが開くので、スタイルを指定したいタグを使用している場所をドラッグして選択する。右クリックから[CSS スタイル] ⇒[新規]を選択。 [新規 CSS ルール]ダイアログが開く。 [セレクタタイプ]から[タグ]を選択し、[セレクタ名]からスタイルを指定したいタグ名を選択する。 [ルール定義]で[(新規スタイルシートファイル)]を選択し、OK をクリック。 1 筑波大学共通科目情報処理実習 HTML 練習問題 [スタイルシートファイルの新規保存]ダイアログが開く。ファイル名を「test2.css」として、保存を選択する。 [CSS ルール定義]ダイアログが開く。好きなように装飾の設定を行い、 [適用]をクリックする。 ■ 練習 2 CSS ファイルを既存のページに添付する。 [ファイル]メニューの[開く]から「sample.html」を開く。 2 筑波大学共通科目情報処理実習 HTML 練習問題 [フォーマット]メニューの[CSS スタイル] の[スタイルシートの添付]を選択する。 [外部スタイルシートの添付]ダイアログが開く。 [ファイル/URL]の[参照]をから"test2.css" を選択し、[追加方法]から[リンクさせる]を選択し、OK をクリックする。練習 3 ■ 新しい class,id を既存の CSS ファイルに追加する。class,id をページ内のテキストに設定する。装飾を設定したい箇所で右クリックし、 [CSS スタイル]⇒[新規]を選択する。 [セレクタタイプ]から[クラス]または[ID] を選択し、[セレクタ名]を入力し、[ルール定義]から「test2.css」を選択し、OK を選択する。好きなように装飾の設定を行い、[適用]をクリックする。 3 筑波大学共通科目情報処理実習 HTML 練習問題装飾を設定したい箇所で右クリックし、 [CSS スタイル]から設定したい class,id を選択する。 4