による CSS デザイン...

2007 Adobe Systems Incorporated. All Rights Reserved.1

小松

学史

アドビ認定インストラクター(ACI)

Dreamweaver

CS3 による CSS デザイン

入門


小松学史

アクティブファクター

Dreamweaverおよび、Flash アドビ認定インストラクター(ACI)

2000年よりフリーランスとして、マルチメディアコンテンツ、Web サイト制作に携わる。現在多数の教育機関で講義を担当する。

*A 10 point footnote can go here, if necessary

Who is this guy?


本日のテーマ

Dreamweaver CS3を用いて、 CSSレイアウトの初歩をハンズオン

を通して習得します。

Dreamweaver CS3を使用して、効率の良いHTML、CSSの記述

方法を解説します。

Dreamweaverを使用して、CSSレイアウトの初歩の考え方、作成の仕方を解説します。


本日の内容

1.

Dreamweaverの基本設定

1.

サイトの定義

2.

HTML、CSSの設定の基本

2.

CSSレイアウトの初歩

1.

ボックスモデルの作成

2.

読みやすい文字の設定

3.

3段カラム、 3列カラムの作成

3.

その他、Tips等


サイトの定義


サイトの定義

Dreamweaverを起動したら、初に行うことは、サイトの定義です。

サイトの定義とは、ローカル上にWebサイトのコピーとなるディレクトリを作成

する作業です。

色々と設定できる箇所はありますが、初はローカル環境で作成するために必要な、2箇所だけ設定しましょう。

ファイルの転送が必要になった場合は、さらにファイルの転送の設定等をします。


サイトの定義画面


サイトの定義画面(2)

初に設定をする

のはこの2箇所だけ


ローカルサイトの定義は詳細設定で！

ローカルサイトの定義は、「基本」タブのウィザード形式も良いですが、「詳細設定」の方がより、シンプルかと思います。

サイトの定義を行う項目はたくさんありますが、基本的な機能を使用するのなら、「詳細設定」タブの「ローカル情報」カテゴリ内の、「サイト名」とローカルルートフォルダのみでもかまいません。

これだけで、基本的な機能の多くが使用できるようになります。


なぜローカルサイトの定義をするのか？

色々と意味はありますが、以下のような理由で設定する必要があります。

HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。

データをアップロードする時に、データの管理や保持する機能を使えるようになる。

ファイルパネルを使用できるようになり、コード作成やファイル管理が便利になる


Dreamweaverのインターフェイス


Dreamweaver起動画面

スタートページからできること

・近開いた書類を開く

・各種新規ファイル作成

初に表示しなくてもよい


Dreamweaverインターフェイス

ドキュメントウィンドウ

プロパティパネル

各種パネル

挿入バー

メニューバー

ビュー切り替え

タグセレクタ


Dreamweaverインターフェイスのそれぞれの役割

メニューバー

Dreamweaverそ操作の基本になるメニュー

挿入バー

複数のカテゴリの中から、必要な要素を直感的に挿入できます。

お気に入りには、よく使用するボタンをカスタマイズして構築できます。

ファイルの切り替え

複数開いているファイルをすぐに選択表示することが可能です。


Dreamweaverインターフェイスのそれぞれの役割(2)

ビューの切り替え

通常Webページを作成するときには、ブラウザ上での表示とコードを見比べて作成します。

その都度プレビューすることなく、見栄えのチェックとコードのチェックをするために、すばやく画面を切り替えることができます。


ドキュメントビューの切り替え→コードビュー


ドキュメントビューの切り替え→デザインビュー


ドキュメントビューの切り替え→分割ュー



タグセレクタ

デザインビュー上で選択した要素がどのように入れ子になっているかをチェックできます。

また、それぞれの要素をすばやく選択できます。

プロパティパネル

現在選択している要素の属性を、参照および編集することができます。

Dreamweaverを使用する上で、よく使用するパネルのひとつです。



各種パネル

各種のパネルは、「メニューバー」→「ウィンドウ」の中から選択し表示することが可能です。

各種パネルはフローティングにしたり、必要なパネルだけを表示することができますので、自分の作業に合わせたワークスペースを構築することが可能です。


環境設定


環境設定について

「環境設定」のパネルを使用することで、アプリケーションの詳細な設定ができます。


環境設定（新規書類）

新規ドキュメントのカテゴリでは、Dreamweaver上で新規で作成する初

期ドキュメントの設定をすることができます。


環境設定（ブラウザでプレビュー）

確認するためのブラウザを設定することができます。

ブラウザを立ち上げる、ショートカットキーを割り当てることができます。


ブラウザでプレビューの方法

メニューから選択するか、ショートカットキーを使用することで、ブラウザですぐに確認できます。

プライマリブラウザに設定されたブラウザは、F12キーですぐに確認することができます。

セカンダリブラウザを設定した場合は、Cntl+F12でチェックできます。（Macintoshのh場合は、 Command+F12）


HTMLの基本設定


見出し、段落の設定

Dreamweaverで見出しや、段落を設定する

には、テキストを選択した上で、プロパティパネルからプルダウンメニューで設定できます。


段落と改行

段落を作る場合はデザインビュー上で「Enterキー（MacはReturnキー）」で作

成します

<br>タグを2つ入れて段落を作成することはやめましょう。見た目が似ているとは言え、

まったく意味が異なります。

改行を作る場合には、Shiftキーを押しながら、「Enterキー（MacはReturnキー）」で作成します

改行は、同じ段落内で、行を変更したい場合に使います。


リスト

Dreamweaverで設定する場合には、段落を作成し、プロパティパネルでリストを作成

するボタンを押すことで作成できます。リスト項目を増やす場合は、作成したリストの末尾で「Enterキー（MacはReturnキー）」を押すことで、リストの項目が増えます。


画像の挿入

ドラッグされた画像は

すぐにファイルパスが

設定されます。

ファイルパネルからド

ラッグすることできま

す。

Dreamweaverでは、ファイルパネルから、デザインビューに画像をドラッグす

ることで、簡単に画像を挿入することができます。


イメージタグのアクセシビリティ属性

Dreamweaverでイメージを挿入すると、イメージタグのアクセシビリティ属性の設定が出ます。

代替テキストは必ず挿入しましょう。

挿入することで、imgタグのalt属性を設定することでき、スクリーンリーダーに対応したり、画像が表示されない設定でも、この代替テキストが表示されます。


リンクの設定

Dreamweaver上で、リンクを設定する

には、リンクを設定したい、テキストや画像を選択した上で、プロパティパネルで設定します。

直接入力することもで

きます。

ターゲットアイコンをド

ラッグし、ファイルパ

ネルにドラッグするこ

とで、リンクするファイ

ルの指定ができます。

参照ボタンを押すことで、ファイルを選択す

ることもできます。


CSSの適用


新規CSSの作成

CSSパネルから「新規作成」

を選択すると、現在開いているHTML書類にCSSを設定で

きます。

パネルメニューをクリック！


新規CSSルール設定

セレクタタイプを選択し、セレクタの内容を設定します。

クラス、タグ以外のセレクタは、全て詳細設定にします。

定義場所を「現在のドキュメント」にすると内部スタイルシートに記述されます。

定義場所を「新規スタイルシートファイル」にすると、OKボタンを押した後に外部CSSファイルの保存することになります。（保存と同時にリンクのタグを記述してくれます）


CSSルール定義

設定したい、CSSルールのカテゴリを選択し、各項目を設定しま

す。


新規外部CSSの作成

CSSパネルから、ルールを新規作成すると同時に作成することもできますが、初から外部CSSを作成することもできます。


外部CSS書類の変更

直接入力

してもOK 外部CSS書類上でCSS

パネルを使うのもOK


外部CSSの関連付け（１）

Dreamweaverで外部CSSファイルを関連付ける場合、CSSパネルの「スタイル

シートの添付」を選択します。

プロパティパネルの「スタイル」プルダウンメニューから「スタイルシートの適用」を選択でも同じことができます。


外部CSSの関連付け（２）

「スタイルシートの添付」選択後ファイルを選択すると、htmlとcssのファイル間のパスを自動的に検出し、linkのタ

グを挿入し、関連付けをしてくれます。

メディアを指定すると、linkタグに

media属性が入力され、CSSの

レンダリング適用先を設定でき

る。


CSS修正方法

CSSスタイルパネル

カテゴリビュー

カテゴリ毎にプロパティを表示する

リストビュー

全てのプロパティをアルファベット順に

表示し、現在設定しているものだけ、上

位に表示する

設定済みプロパティのみ表示

設定しているプロパティのみ表示する

新規スタイル作成

外部CSSの添付

CSSスタイルの編集

CSSスタイルの削除

各プロパティを直接編集可能

現在ドキュメントに関連して

いるスタイルがすべてが表示

されます。

現在ドキュメント上で選択

している要素についての

み、関連しているスタイル

がすべてが表示されます。

外部のスタイル名（<style>になっている

場合は内部スタイルを指します。）

セレクタ名、現在選択しているセレクタ

のみ下のプロパティに表示される。

ダブルクリックすると、編集用のパネル

が表示される。


divタグの挿入

Dreamweaverではdivタグの挿入が簡

単にできます。

divタグを挿入したい要素を選択して、divタグを挿入ボタンを選択します。


div挿入ダイアログ

Divタグを挿入と同時に、クラス名やID名なども設定できます。

また、「新規CSSスタイル」ボタンを押すと、divタグを設置しつつ、CSSスタイル

ルールを同時に作成することができ便利です。

挿入場所を指定できる

ID名、クラス名を設定で

きます。必須ではありま

せん。

新規CSSを作成するこ

ともできます。必須では

ありません。


ありがとうございました。

Dreamweaver CS3 による CSS デザイン入門＜実践偏＞

①CSS の適用の基本

ここでは、文字を読みやすくするための、テキストボックスのクラスを作成しながら、

DreamweaverCS3 を使った CSS の適用方法を学習します。 Step01 始めに、以下のような HTML ファイルを用意します。（完成例「01basic/finished/textbox01.html」）

↓デザインビュー ↑コードビュー

Step02 CSS パネルを開き、オプションメニューから、CSS を新規作成します。

パネルメニューをクリック！

↓

セレクタタイプを「タグ」に、タグを「body」にします。定義場所は、外部ファイルに設定したいため、「新規スタイルシートファイル」を選択しま

す。「OK」ボタンを押すと、外部 CSS ファイルの保存先を指定するダイアログが起動します。今回は、HTML と同じ箇所に「style.css」という名称で保存します。

Step03 スタイルシートの設定をパネルで設定します。

上図は、背景カテゴリーの背景色を設定した例その他にも、自身で編集します。編集が完了したら、「OK」ボタンを押して確定します。コードビューを見ると、以下の図のように、外部ファイルとのリンクが完了し、html ファ

イルに CSS のスタイルルールが適用されています。

もう一度、上図のダイアログを出すには、以下の図の「body」部分をダブルクリックしま

す。

Step04 テキストボックスのスタイルを与えたい部分を<div>タグを使用して、グループ化します。グループ化したいタグ部分を、コードビュー、デザインビュー、どちらでもいいので選択

し、挿入バーの「Div タグを挿入ボタン」を押します。

↓

この時点で、クラス名や ID 名を設定することができますが、そのまま「OK」を押してお

きます。選択範囲の前後に、<div>タグがつきます。

Step05 テキストボックスの作成を行います。新規 CSS を作成します。

セレクタタイプを「クラス」に、名前を「.textBoxStyle01」と設定します。定義場所は、同じく、「style.css」設定を行います。

ボックスカテゴリの幅のプロパティ（width プロパティ）の値を 530 ピクセルとします。その他の設定は、後で行いますので、とりあえず、「OK」を押します。

Step06 コードビュー、もしくはデザインビューで Step04 で設定した、div タグを選択します。選択後、プロパティパネルから、作成したクラスを適用します。横幅が 530 ピクセルにな

れば成功です。

（完成例「01_basic/finished/textbox02.html および style02.css」）

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」）

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; }

②CSS レイアウトの初歩

この演習では、簡単な 3 段カラムの作成、中段のカラムを 2 列作成する項目を考えます。

Step01 作成するレイアウトのアウトラインの確認をします。完成例の中身を以下のような、グループに分け、名前を付けます。

横幅、750 ピクセル。3 段レイアウト、#header、#content、#footer。中段の#content 部分は、左 180 ピクセル、右 570 ピクセルの 2 列の設計です。

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]を選択し、作成を押します。

CSS パネルを開き、新規 CSS スタイルを作成し、以下の設定を行います。 *（アスタリスク：全称）セレクタ・ボックスカテゴリマージン → 0px ・ボックスカテゴリ余白 → 0px ・タイプカテゴリサイズ → 100% 外部 CSS 書類を「layout.css」という名前で保存します。保存が完了したら、HTML ファイルに戻ります。 CSS パネルのオプションメニューから「スタイルシートの添付」を選択し、リンク設定を

行います。

↓

（完成例「02_layout/finished/layout03.html および style03.css」）

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 セレクタ・ボックスカテゴリクリア → 両方

ブラウザで見ると形が崩れるので、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」）

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 {

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 {

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; }

Date post:	02-Mar-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times

による CSS デザイン...

Documents