による css デザイン...
TRANSCRIPT
![Page 1: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/1.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.1
小松
学史
アドビ認定インストラクター(ACI)
Dreamweaver
CS3 による CSS デザイン
入門
![Page 2: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/2.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.2
小松学史
アクティブファクター
Dreamweaverおよび、Flash アドビ認定インストラクター(ACI)
2000年よりフリーランスとして、マルチメディアコンテンツ、Web サイト制作に携わる。現在多数の教育機関で講義を担当する。
*A 10 point footnote can go here, if necessary
Who is this guy?
![Page 3: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/3.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.3
本日のテーマ
Dreamweaver CS3を用いて、 CSSレイアウトの初歩をハンズオン
を通して習得します。
Dreamweaver CS3を使用して、効率の良いHTML、CSSの記述
方法を解説します。
Dreamweaverを使用して、CSSレイアウトの初歩の考え方、作成の仕方を解説します。
![Page 4: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/4.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.4
本日の内容
1.
Dreamweaverの基本設定
1.
サイトの定義
2.
HTML、CSSの設定の基本
2.
CSSレイアウトの初歩
1.
ボックスモデルの作成
2.
読みやすい文字の設定
3.
3段カラム、 3列カラムの作成
3.
その他、Tips等
![Page 5: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/5.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.5
サイトの定義
![Page 6: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/6.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.6
サイトの定義
Dreamweaverを起動したら、 初に行うことは、サイトの定義です。
サイトの定義とは、ローカル上にWebサイトのコピーとなるディレクトリを作成
する作業です。
色々と設定できる箇所はありますが、 初はローカル環境で作成するために必要な、2箇所だけ設定しましょう。
ファイルの転送が必要になった場合は、さらにファイルの転送の設定等をします。
![Page 7: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/7.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.7
サイトの定義画面
![Page 8: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/8.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.8
サイトの定義画面(2)
初に設定をする
のはこの2箇所だけ
![Page 9: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/9.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.9
ローカルサイトの定義は詳細設定で!
ローカルサイトの定義は、「基本」タブのウィザード形式も良いですが、「詳細設定」の方がより、シンプルかと思います。
サイトの定義を行う項目はたくさんありますが、基本的な機能を使用するのなら、「詳細設定」タブの「ローカル情報」カテゴリ内の、「サイト名」とローカルルートフォルダのみでもかまいません。
これだけで、基本的な機能の多くが使用できるようになります。
![Page 10: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/10.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.10
なぜローカルサイトの定義をするのか?
色々と意味はありますが、以下のような理由で設定する必要があります。
HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。
データをアップロードする時に、データの管理や保持する機能を使えるようになる。
ファイルパネルを使用できるようになり、コード作成やファイル管理が便利になる
![Page 11: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/11.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.11
Dreamweaverのインターフェイス
![Page 12: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/12.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.12
Dreamweaver起動画面
スタートページからできること
・ 近開いた書類を開く
・各種新規ファイル作成
初に表示しなくてもよい
![Page 13: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/13.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.13
Dreamweaverインターフェイス
ドキュメントウィンドウ
プロパティパネル
各種パネル
挿入バー
メニューバー
ビュー切り替え
タグセレクタ
![Page 14: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/14.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.14
Dreamweaverインターフェイスのそれぞれの役割
メニューバー
Dreamweaverそ操作の基本になるメニュー
挿入バー
複数のカテゴリの中から、必要な要素を直感的に挿入できます。
お気に入りには、よく使用するボタンをカスタマイズして構築できます。
ファイルの切り替え
複数開いているファイルをすぐに選択表示することが可能です。
![Page 15: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/15.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.15
Dreamweaverインターフェイスのそれぞれの役割(2)
ビューの切り替え
通常Webページを作成するときには、ブラウザ上での表示とコードを見比べて作成します。
その都度プレビューすることなく、見栄えのチェックとコードのチェックをするために、すばやく画面を切り替えることができます。
![Page 16: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/16.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.16
ドキュメントビューの切り替え→コードビュー
![Page 17: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/17.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.17
ドキュメントビューの切り替え→デザインビュー
![Page 18: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/18.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.18
ドキュメントビューの切り替え→分割ュー
![Page 19: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/19.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.19
Dreamweaverインターフェイスのそれぞれの役割(3)
タグセレクタ
デザインビュー上で選択した要素がどのように入れ子になっているかをチェックできます。
また、それぞれの要素をすばやく選択できます。
プロパティパネル
現在選択している要素の属性を、参照および編集することができます。
Dreamweaverを使用する上で、よく使用するパネルのひとつです。
![Page 20: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/20.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.20
Dreamweaverインターフェイスのそれぞれの役割(4)
各種パネル
各種のパネルは、「メニューバー」→「ウィンドウ」の中から選択し表示することが可能です。
各種パネルはフローティングにしたり、必要なパネルだけを表示することができますので、自分の作業に合わせたワークスペースを構築することが可能です。
![Page 21: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/21.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.21
環境設定
![Page 22: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/22.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.22
環境設定について
「環境設定」のパネルを使用することで、アプリケーションの詳細な設定ができます。
![Page 23: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/23.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.23
環境設定(新規書類)
新規ドキュメントのカテゴリでは、Dreamweaver上で新規で作成する初
期ドキュメントの設定をすることができます。
![Page 24: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/24.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.24
環境設定(ブラウザでプレビュー)
確認するためのブラウザを設定することができます。
ブラウザを立ち上げる、ショートカットキーを割り当てることができます。
![Page 25: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/25.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.25
ブラウザでプレビューの方法
メニューから選択するか、ショートカットキーを使用することで、ブラウザですぐに確認できます。
プライマリブラウザに設定されたブラウザは、F12キーですぐに確認することができます。
セカンダリブラウザを設定した場合は、Cntl+F12でチェックできます。(Macintoshのh場合は、 Command+F12)
![Page 26: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/26.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.26
HTMLの基本設定
![Page 27: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/27.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.27
見出し、段落の設定
Dreamweaverで見出しや、段落を設定する
には、テキストを選択した上で、プロパティパネルからプルダウンメニューで設定できます。
![Page 28: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/28.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.28
段落と改行
段落を作る場合はデザインビュー上で「Enterキー(MacはReturnキー)」で作
成します
<br>タグを2つ入れて段落を作成することはやめましょう。見た目が似ているとは言え、
まったく意味が異なります。
改行を作る場合には、Shiftキーを押しながら、「Enterキー(MacはReturnキー)」で作成します
改行は、同じ段落内で、行を変更したい場合に使います。
![Page 29: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/29.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.29
リスト
Dreamweaverで設定する場合には、段落を作成し、プロパティパネルでリストを作成
するボタンを押すことで作成できます。リスト項目を増やす場合は、作成したリストの末尾で「Enterキー(MacはReturnキー)」を押すことで、リストの項目が増えます。
![Page 30: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/30.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.30
画像の挿入
ドラッグされた画像は
すぐにファイルパスが
設定されます。
ファイルパネルからド
ラッグすることできま
す。
Dreamweaverでは、ファイルパネルから、デザインビューに画像をドラッグす
ることで、簡単に画像を挿入することができます。
![Page 31: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/31.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.31
イメージタグのアクセシビリティ属性
Dreamweaverでイメージを挿入すると、イメージタグのアクセシビリティ属性の設定が出ます。
代替テキストは必ず挿入しましょう。
挿入することで、imgタグのalt属性を設定することでき、スクリーンリーダーに対応したり、画像が表示されない設定でも、この代替テキストが表示されます。
![Page 32: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/32.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.32
リンクの設定
Dreamweaver上で、リンクを設定する
には、リンクを設定したい、テキストや画像を選択した上で、プロパティパネルで設定します。
直接入力することもで
きます。
ターゲットアイコンをド
ラッグし、ファイルパ
ネルにドラッグするこ
とで、リンクするファイ
ルの指定ができます。
参照ボタンを押すことで、ファイルを選択す
ることもできます。
![Page 33: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/33.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.33
CSSの適用
![Page 34: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/34.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.34
新規CSSの作成
CSSパネルから「新規作成」
を選択すると、現在開いているHTML書類にCSSを設定で
きます。
パネルメニューをクリック!
![Page 35: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/35.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.35
新規CSSルール設定
セレクタタイプを選択し、セレクタの内容を設定します。
クラス、タグ以外のセレクタは、全て詳細設定にします。
定義場所を「現在のドキュメント」にすると内部スタイルシートに記述されます。
定義場所を「新規スタイルシートファイル」にすると、OKボタンを押した後に外部CSSファイルの保存することになります。(保存と同時にリンクのタグを記述してくれます)
![Page 36: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/36.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.36
CSSルール定義
設定したい、CSSルールのカテゴリを選択し、各項目を設定しま
す。
![Page 37: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/37.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.37
新規外部CSSの作成
CSSパネルから、ルールを新規作成すると同時に作成することもできますが、初から外部CSSを作成することもできます。
![Page 38: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/38.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.38
外部CSS書類の変更
直接入力
してもOK 外部CSS書類上でCSS
パネルを使うのもOK
![Page 39: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/39.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.39
外部CSSの関連付け(1)
Dreamweaverで外部CSSファイルを関連付ける場合、CSSパネルの「スタイル
シートの添付」を選択します。
プロパティパネルの「スタイル」プルダウンメニューから「スタイルシートの適用」を選択でも同じことができます。
![Page 40: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/40.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.40
外部CSSの関連付け(2)
「スタイルシートの添付」選択後ファイルを選択すると、htmlとcssのファイル間のパスを自動的に検出し、linkのタ
グを挿入し、関連付けをしてくれます。
メディアを指定すると、linkタグに
media属性が入力され、CSSの
レンダリング適用先を設定でき
る。
![Page 41: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/41.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.41
CSS修正方法
CSSスタイルパネル
カテゴリビュー
カテゴリ毎にプロパティを表示する
リストビュー
全てのプロパティをアルファベット順に
表示し、現在設定しているものだけ、上
位に表示する
設定済みプロパティのみ表示
設定しているプロパティのみ表示する
新規スタイル作成
外部CSSの添付
CSSスタイルの編集
CSSスタイルの削除
各プロパティを直接編集可能
現在ドキュメントに関連して
いるスタイルがすべてが表示
されます。
現在ドキュメント上で選択
している要素についての
み、関連しているスタイル
がすべてが表示されます。
外部のスタイル名(<style>になっている
場合は内部スタイルを指します。)
セレクタ名、現在選択しているセレクタ
のみ下のプロパティに表示される。
ダブルクリックすると、編集用のパネル
が表示される。
![Page 42: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/42.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.42
divタグの挿入
Dreamweaverではdivタグの挿入が簡
単にできます。
divタグを挿入したい要素を選択して、divタグを挿入ボタンを選択します。
![Page 43: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/43.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.43
div挿入ダイアログ
Divタグを挿入と同時に、クラス名やID名なども設定できます。
また、「新規CSSスタイル」ボタンを押すと、divタグを設置しつつ、CSSスタイル
ルールを同時に作成することができ便利です。
挿入場所を指定できる
ID名、クラス名を設定で
きます。必須ではありま
せん。
新規CSSを作成するこ
ともできます。必須では
ありません。
![Page 44: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/44.jpg)
2007 Adobe Systems Incorporated. All Rights Reserved.44
ありがとうございました。
![Page 45: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/45.jpg)
Dreamweaver CS3 による CSS デザイン入門 <実践偏>
①CSS の適用の基本
ここでは、文字を読みやすくするための、テキストボックスのクラスを作成しながら、
DreamweaverCS3 を使った CSS の適用方法を学習します。 Step01 始めに、以下のような HTML ファイルを用意します。 (完成例「01basic/finished/textbox01.html」)
↓デザインビュー ↑コードビュー
![Page 46: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/46.jpg)
Step02 CSS パネルを開き、オプションメニューから、CSS を新規作成します。
パネルメニューをクリック!
↓
セレクタタイプを「タグ」に、タグを「body」にします。 定義場所は、外部ファイルに設定したいため、「新規スタイルシートファイル」を選択しま
す。 「OK」ボタンを押すと、外部 CSS ファイルの保存先を指定するダイアログが起動します。 今回は、HTML と同じ箇所に「style.css」という名称で保存します。
![Page 47: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/47.jpg)
Step03 スタイルシートの設定をパネルで設定します。
上図は、背景カテゴリーの背景色を設定した例 その他にも、自身で編集します。編集が完了したら、「OK」ボタンを押して確定します。 コードビューを見ると、以下の図のように、外部ファイルとのリンクが完了し、html ファ
イルに CSS のスタイルルールが適用されています。
もう一度、上図のダイアログを出すには、以下の図の「body」部分をダブルクリックしま
す。
![Page 48: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/48.jpg)
Step04 テキストボックスのスタイルを与えたい部分を<div>タグを使用して、グループ化します。 グループ化したいタグ部分を、コードビュー、デザインビュー、どちらでもいいので選択
し、挿入バーの「Div タグを挿入ボタン」を押します。
↓
この時点で、クラス名や ID 名を設定することができますが、そのまま「OK」を押してお
きます。 選択範囲の前後に、<div>タグがつきます。
![Page 49: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/49.jpg)
Step05 テキストボックスの作成を行います。 新規 CSS を作成します。
セレクタタイプを「クラス」に、名前を「.textBoxStyle01」と設定します。 定義場所は、同じく、「style.css」設定を行います。
ボックスカテゴリの幅のプロパティ(width プロパティ)の値を 530 ピクセルとします。 その他の設定は、後で行いますので、とりあえず、「OK」を押します。
![Page 50: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/50.jpg)
Step06 コードビュー、もしくはデザインビューで Step04 で設定した、div タグを選択します。 選択後、プロパティパネルから、作成したクラスを適用します。横幅が 530 ピクセルにな
れば成功です。
(完成例「01_basic/finished/textbox02.html および style02.css」)
![Page 51: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/51.jpg)
Step07 Step02~07 の作業を行い、以下のような設定を行います。 .textBoxStyle01 クラス セレクタ ・ ボックスカテゴリ 幅 → 500 px ・ ボックスカテゴリ 余白 → 全て同一 10px ・ 背景カテゴリ 背景色 → #FFFFFF(白) ・ ボーダーカテゴリ ボーダー → スタイル、幅、カラーは任意で設定 ・ タイプカテゴリ ライン高(行間) → 120% *(アスタリスク:全称)セレクタ ・ ボックスカテゴリ マージン → 0px ・ ボックスカテゴリ 余白 → 0px ・ タイプカテゴリ サイズ → 100% ※全ての要素の、余白、マージンをなくし、ブラウザの初期設定で空いている余白などを
リセット。フォントサイズ、100%にすると、<h1>~<h6>のタグの文字が通常サイズにな
る。 h1,h2 タイプ セレクタ ・ ボックスカテゴリ 余白 → 全て同一のチェックを外し 下に 10px .textBoxStyle01 h3 セレクタ ・ ボーターカテゴリ 下線の作成 →スタイル、下にのみ幅 1px、カラーは任意で設定 ・ ボックスカテゴリ 下線への余白 → 2px ・ ボックスカテゴリ 下のマージン → 0.5ems .textBoxStyle01 p セレクタ ・ ボックスカテゴリ 下のマージン → 1ems .textBoxStyle01 img セレクタ ・ ボックスカテゴリ フロート → 右 ・ ボックスカテゴリ 左の余白 → 2px (完成例「finished/textbox03.html および style03.css」)
![Page 52: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/52.jpg)
CSS 完成例(01basic/finished/ style03.css) ----------------------------------------------------------------------------------------------------------- @charset "utf-8"; body { background-color: #996633; } .textBoxStyle01 { width: 500px; padding: 10px; line-height: 120%; border: 5px double #990000; background-color: #FFFFFF; } .textBoxStyle01 h3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #990000; padding-bottom: 2px; margin-bottom: 0.5em; } .textBoxStyle01 p { margin-bottom: 1em; } .textBoxStyle01 img { float: right; padding-left: 10px; } * { margin: 0px; padding: 0px; font-size: 100%; } h1, h2 { padding: 10px; }
![Page 53: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/53.jpg)
②CSS レイアウトの初歩
この演習では、簡単な 3 段カラムの作成、中段のカラムを 2 列作成する項目を考えます。
![Page 54: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/54.jpg)
Step01 作成するレイアウトのアウトラインの確認をします。 完成例の中身を以下のような、グループに分け、名前を付けます。
横幅、750 ピクセル。3 段レイアウト、#header、#content、#footer。 中段の#content 部分は、左 180 ピクセル、右 570 ピクセルの 2 列の設計です。
![Page 55: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/55.jpg)
Step02 「02layout/layout.html」を開きます。 開いたら、中の HTML を確認します。 それぞれの要素を以下のように、Div タグを使用して、HTML 内のグループ分けし、それ
ぞれ ID 属性を設定し、名称を設定します。
<div id="#header"> id "#header" の内容</div> <div id="content">
id "content" の内容 <div id="sub"> id "sub" の内容</div> <div id="main"> id "main" の内容/div> </div> <div id="footer"> id "footer" の内容がここに入ります</div>
(完成例「02_layout/finished/layout02.html」) Step03 外部 CSS ファイルの作成をします。 [ファイル]→[新規]を選択し、[空白ページ]→[CSS]を選択し、作成を押します。
![Page 56: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/56.jpg)
CSS パネルを開き、新規 CSS スタイルを作成し、以下の設定を行います。 *(アスタリスク:全称)セレクタ ・ ボックスカテゴリ マージン → 0px ・ ボックスカテゴリ 余白 → 0px ・ タイプカテゴリ サイズ → 100% 外部 CSS 書類を「layout.css」という名前で保存します。 保存が完了したら、HTML ファイルに戻ります。 CSS パネルのオプションメニューから「スタイルシートの添付」を選択し、リンク設定を
行います。
↓
(完成例「02_layout/finished/layout03.html および style03.css」)
![Page 57: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/57.jpg)
Step04 ・各 ID に設定した、ブロックのサイズを設定 #header ID セレクタ ・ ボックスカテゴリ 幅 → 750px ・ ボックスカテゴリ 余白 → 全て同一 10px #content #main ID セレクタ ・ ボックスカテゴリ 幅 → 160px ・ ボックスカテゴリ 余白 → 全て同一 10px #content #sub ID セレクタ ・ ボックスカテゴリ 幅 → 550px ・ ボックスカテゴリ 余白 → 全て同一 10px # footer ID セレクタ ・ ボックスカテゴリ 幅 → 750px (完成例「02_layout/finished/layout04.html および style04.css」) Step05 各 ID に float および、clear のプロパティの設定をする #content #main ID セレクタ ・ ボックスカテゴリ フロート → 右 #content #sub ID セレクタ ・ ボックスカテゴリ フロート → 左 # footer ID セレクタ ・ ボックスカテゴリ クリア → 両方
![Page 58: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/58.jpg)
ブラウザで見ると形が崩れるので、ID「content」の幅を設定する #content ID セレクタ ・ ボックスカテゴリ 幅 → 750px ・ ボックスカテゴリ クリア → 両方 ※この時点で#content ID のクリアは必要は無いですが、後々必要になるので、設定してあ
ります。 (完成例「02_layout/finished/layout05.html および style05.css」) Step06 その他の見た目の調整を行って見ましょう。 ・body タグの設定、背景色の設定 ・①で作成した、textBoxStyle01 クラスをコピーして、ID「main」内のテキストに適用、
調整します。(適当にテキストの範囲を div タグで括って設定します。) ・ID「header」部分、メニューの部分のリストの設定 ・ ID「sub」部分、ul タグ、h2 タグ、イメージのタグの設定 (完成例「finished/layout06.html および style06.css」) ※ 完成例の CSS ファイルのスタイルルールを DreamweaverCS3 で開いて確認してみま
しょう! Step07 全ての要素をセンターに来るように設定します。 body 内の全ての要素を包む、div タグを作成し、ID 名を「wrapper」と名前を付けます。 その要素のマージンを「自動」に設定し、全ての要素をセンターに来るように設定します。 (完成例「02_layout/finished/layout07.html および style07.css」)
![Page 59: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/59.jpg)
CSS 完成例(02_layout/finished/ style07.css)------------------------------------------------------------------------------------------------------------------ @charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; font-size: 100%; } #content #sub ul { margin-bottom: 20px; } #content #sub h2 { margin-bottom: 5px; padding-bottom: 2px; padding-left: 5px; border-left-width: 10px; border-left-style: solid; border-left-color: #996633; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996633; } #wrapper { margin: auto; width: 750px; text-align: left; } body {
![Page 60: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/60.jpg)
background-color: #996633; text-align: center; } #header { width: 750px; } #content #main { padding: 10px; width: 550px; float: right; } #content #sub { width: 160px; padding: 10px; float: left; } #footer { width: 750px; clear: both; } #content { width: 750px; clear: both; background-color: #FFFFFF; overflow: auto; } #header li { padding: 10px; float: left; } #header a { color: #FFFFFF; } .textBoxStyle01 {
![Page 61: による CSS デザイン 入門...色々と意味はありますが、以下のような理由で設定する必要があります。 HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。](https://reader031.vdocuments.us/reader031/viewer/2022013020/5e605251827f1d79e73d2bd0/html5/thumbnails/61.jpg)
width: 500px; padding: 10px; line-height: 120%; border: 5px double #990000; background-color: #FFFFFF; margin-bottom: 15px; } .textBoxStyle01 h3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #990000; padding-bottom: 2px; margin-bottom: 0.5em; } .textBoxStyle01 p { margin-bottom: 1em; } .textBoxStyle01 img { float: right; padding-left: 10px; } li { list-style-type: none; } img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; vertical-align: bottom; }