Dreamweaver CC入門

新規CSSファイルを作成し、HTMLに関連付けしよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSデザイナーパネルを使って、新規CSSファイルの作成とHTMLファイルへの関連付ける方法について学びます。
講師:
04:31

字幕

このレッスンではCSS デザイナーパネルを使って新規の CSS ファイルの作成とHTML ファイルとの関連付けの方法について解説します。CSS は Web ブラウザーの見た目に関するルールのことです。CSS ファイルを作ってHTML ファイルに関連付けすることでWeb ブラウザーの見た目を調整することができます。現在は Dreamweaver が起動されている状態です。パネルグループの中のファイルパネルを開きます。ファイルパネルから index.html をダブルクリックして開きます。既に HTML タグで見出しやリスト等の情報の意味づけが完了している状態です。CSS デザイナーパネルを開きます。パネルグループの中の「CSS デザイナー」タブをクリックします。もし CSS デザイナーパネルがパネルグループに無い場合は「ウィンドウ」メニュー>「CSS デザイナー」をクリックして表示をさせておきます。CSS デザイナーパネルの左側にある+ボタンをクリックしてプルダウンメニューから「新規 CSS ファイルを作成」をクリックします。「新規 CSS ファイルを作成」ダイアログボックスが出てきました。 ここから CSS ファイルのファイル名と保存先を設定します。「ファイル / URL」のテキストボックスの右側にある「参照」ボタンをクリックします。「スタイルシートファイルを別名で保存」というダイアログボックスが出てきました。ここでは予めサイト設定をしてあるサイトフォルダーが表示されています。サイト設定をしたサイトフォルダーでない場合はサイト設定をしたサイトフォルダーに移動してください。もしくは正しくサイト設定がされているかどうかを改めて確認してみてください。今回は scoppcafe フォルダーの直下に保存します。img フォルダーや sozai フォルダーが見えている状態です。この状態でファイル名を半角文字でcafe.css と入力します。入力できたら、ダイアログボックスの右下にある「保存」ボタンをクリックします。これで設定は完了です。ダイアログボックスの右下のOK ボタンをクリックします。CSS ファイルの作成と HTML ファイルへの関連付けができるとindex.html のコードビューの6行目にlink タグが追加されます。そしてもう1つ、CSS が関連付けられるとDreamweaver の「名前」タブの下に1つバーが追加されます。 このバーのことを関連ファイルツールバーと呼びます。この関連ファイルツールバーというのはCSS ファイルや JavaScript ファイルなどドキュメントに関連するファイルがリンクされてる場合に表示されます。最後にもう1つ確認をしておきます。パネルグループの中の「ファイル」タブをクリックしてファイルパネルを表示します。ファイルパネルの中に cafe.css が追加されてることを確認しておいてください。確認が取れない場合はファイルパネルの上の「更新」ボタンをクリックします。「更新」ボタンをクリックしてもcafe.css が表示されない場合は保存先が間違っている場合があるかもしれません。その場合はもう一度 CSS のファイルの設定から作業をし直してみてください。最後に、上書き保存をします。今回は index.html と cafe.css両方にアステリスクがついています。この場合は「ファイル」メニュー>「すべてを保存」をクリックして全てを保存しておきます。作業は以上です。このレッスンでは CSS デザイナーパネルを使って新規の CSS ファイルの作成とHTML ファイルへの関連付けの方法について解説しました。

Dreamweaver CC入門

DreamweaverはWebサイトに関係するHTMLファイルやCSSファイルなどを効率よく作成できるアプリケーションです。このコースではDreamweaverを使ってみたい、使ってみたけれどよくわからないという方に向け、サイト設定やHTMLのマークアップなどの基本操作を紹介します。またWebサイトを制作するために必要な知識も一緒に解説します。

1時間41分 (42 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年08月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。