Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1
Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在 多 数 の 教 育 機 関 で 講 義 を 担 当 する *A 10 point footnote can go here, if necessary 2
本 日 のテーマ Dreamweaver CS3を 用 いて CSSレイアウトの 初 歩 をハンズオン を 通 して 習 得 します Dreamweaver CS3を 使 用 して 効 率 の 良 いHTML CSSの 記 述 方 法 を 解 説 します Dreamweaverを 使 用 して CSSレイアウトの 初 歩 の 考 え 方 作 成 の 仕 方 を 解 説 します 3
本 日 の 内 容 1. Dreamweaverの 基 本 設 定 1. サイトの 定 義 2. HTML CSSの 設 定 の 基 本 2. CSSレイアウトの 初 歩 1. ボックスモデルの 作 成 2. 読 みやすい 文 字 の 設 定 3. 3 段 カラム 3 列 カラムの 作 成 3. その 他 Tips 等 4
サイトの 定 義 5
サイトの 定 義 Dreamweaverを 起 動 したら 最 初 に 行 うことは サイトの 定 義 です サイトの 定 義 とは ローカル 上 にWebサイトのコピーとなるディレクトリを 作 成 する 作 業 です 色 々と 設 定 できる 箇 所 はありますが 最 初 はローカル 環 境 で 作 成 するため に 必 要 な 2 箇 所 だけ 設 定 しましょう ファイルの 転 送 が 必 要 になった 場 合 は さらにファイルの 転 送 の 設 定 等 をし ます 6
サイトの 定 義 画 面 7
サイトの 定 義 画 面 (2) 最 初 に 設 定 をする のはこの2 箇 所 だけ 8
ローカルサイトの 定 義 は 詳 細 設 定 で! ローカルサイトの 定 義 は 基 本 タブのウィザード 形 式 も 良 いですが 詳 細 設 定 の 方 がより シンプルかと 思 います サイトの 定 義 を 行 う 項 目 はたくさんありますが 基 本 的 な 機 能 を 使 用 するのなら 詳 細 設 定 タブの ローカル 情 報 カテゴリ 内 の サイト 名 とローカルルートフォルダの みでもかまいません これだけで 基 本 的 な 機 能 の 多 くが 使 用 できるようになります 9
なぜローカルサイトの 定 義 をするのか? 色 々と 意 味 はありますが 以 下 のような 理 由 で 設 定 する 必 要 があります HTMLやCSSコードを 書 く 上 で ファイルパスが 設 定 できるようになる データをアップロードする 時 に データの 管 理 や 保 持 する 機 能 を 使 えるようになる ファイルパネルを 使 用 できるようになり コード 作 成 やファイル 管 理 が 便 利 になる 10
Dreamweaverのインターフェイス 11
Dreamweaver 起 動 画 面 スタートページからできること 最 近 開 いた 書 類 を 開 く 各 種 新 規 ファイル 作 成 最 初 に 表 示 しなくてもよい 12
Dreamweaverインターフェイス メニューバー 挿 入 バー ビュー 切 り 替 え ドキュメントウィンドウ 各 種 パネル タグセレクタ プロパティパネル 13
Dreamweaverインターフェイスのそれぞれの 役 割 メニューバー Dreamweaverそ 操 作 の 基 本 になるメニュー 挿 入 バー 複 数 のカテゴリの 中 から 必 要 な 要 素 を 直 感 的 に 挿 入 できます お 気 に 入 りには よく 使 用 するボタンをカスタマイズして 構 築 できます ファイルの 切 り 替 え 複 数 開 いているファイルをすぐに 選 択 表 示 することが 可 能 です 14
Dreamweaverインターフェイスのそれぞれの 役 割 (2) ビューの 切 り 替 え 通 常 Webページを 作 成 するときには ブラウザ 上 での 表 示 とコードを 見 比 べて 作 成 します その 都 度 プレビューすることなく 見 栄 えのチェックとコードのチェックをするために すばや く 画 面 を 切 り 替 えることができます 15
ドキュメントビューの 切 り 替 え コードビュー 16
ドキュメントビューの 切 り 替 え デザインビュー 17
ドキュメントビューの 切 り 替 え 分 割 ュー 18
Dreamweaverインターフェイスのそれぞれの 役 割 (3) タグセレクタ デザインビュー 上 で 選 択 した 要 素 がどのように 入 れ 子 になっているかをチェックできます また それぞれの 要 素 をすばやく 選 択 できます プロパティパネル 現 在 選 択 している 要 素 の 属 性 を 参 照 および 編 集 することができます Dreamweaverを 使 用 する 上 で よく 使 用 するパネルのひとつです 19
Dreamweaverインターフェイスのそれぞれの 役 割 (4) 各 種 パネル 各 種 のパネルは メニューバー ウィンドウ の 中 から 選 択 し 表 示 することが 可 能 です 各 種 パネルはフローティングにしたり 必 要 なパネルだけを 表 示 することができますので 自 分 の 作 業 に 合 わせたワークスペースを 構 築 することが 可 能 です 20
環 境 設 定 21
環 境 設 定 について 環 境 設 定 のパネルを 使 用 することで アプリケーションの 詳 細 な 設 定 ができ ます 22
環 境 設 定 ( 新 規 書 類 ) 新 規 ドキュメントのカテゴリでは Dreamweaver 上 で 新 規 で 作 成 する 初 期 ドキュメントの 設 定 をすることができ ます 23
環 境 設 定 (ブラウザでプレビュー) 確 認 するためのブラウザを 設 定 するこ とができます ブラウザを 立 ち 上 げる ショートカット キーを 割 り 当 てることができます 24
ブラウザでプレビューの 方 法 メニューから 選 択 するか ショートカットキーを 使 用 することで ブラ ウザですぐに 確 認 できます プライマリブラウザに 設 定 されたブラウザは F12キーですぐに 確 認 することができます セカンダリブラウザを 設 定 した 場 合 は Cntl+F12でチェックできます (Macintoshのh 場 合 は Command+F12) 25
HTMLの 基 本 設 定 26
見 出 し 段 落 の 設 定 Dreamweaverで 見 出 しや 段 落 を 設 定 する には テキストを 選 択 した 上 で プロパティ パネルからプルダウンメニューで 設 定 でき ます 27
段 落 と 改 行 段 落 を 作 る 場 合 はデザインビュー 上 で Enterキー(MacはReturnキー) で 作 成 します <br>タグを2つ 入 れて 段 落 を 作 成 することはやめましょう 見 た 目 が 似 ているとは 言 え まったく 意 味 が 異 なります 改 行 を 作 る 場 合 には Shiftキーを 押 しながら Enterキー(MacはReturn キー) で 作 成 します 改 行 は 同 じ 段 落 内 で 行 を 変 更 したい 場 合 に 使 います 28
リスト Dreamweaverで 設 定 する 場 合 には 段 落 を 作 成 し プロパティパネルでリストを 作 成 するボタンを 押 すことで 作 成 できます リスト 項 目 を 増 やす 場 合 は 作 成 したリストの 末 尾 で Enterキー(MacはReturnキー) を 押 すことで リストの 項 目 が 増 えます 29
画 像 の 挿 入 Dreamweaverでは ファイルパネルから デザインビューに 画 像 をドラッグす ることで 簡 単 に 画 像 を 挿 入 することができます ドラッグされた 画 像 は すぐにファイルパスが 設 定 されます ファイルパネルからド ラッグすることできま す 30
イメージタグのアクセシビリティ 属 性 Dreamweaverでイメージを 挿 入 すると イ メージタグのアクセシビリティ 属 性 の 設 定 が 出 ます 代 替 テキストは 必 ず 挿 入 しましょう 挿 入 することで imgタグのalt 属 性 を 設 定 す ることでき スクリーンリーダーに 対 応 したり 画 像 が 表 示 されない 設 定 でも この 代 替 テ キストが 表 示 されます 31
リンクの 設 定 Dreamweaver 上 で リンクを 設 定 する には リンクを 設 定 したい テキストや 画 像 を 選 択 した 上 で プロパティパネ ルで 設 定 します ターゲットアイコンをド ラッグし ファイルパ ネルにドラッグするこ とで リンクするファイ ルの 指 定 ができます 直 接 入 力 することもで きます 参 照 ボタンを 押 すことで ファイルを 選 択 す ることもできます 32
CSSの 適 用 33
新 規 CSSの 作 成 CSSパネルから 新 規 作 成 を 選 択 すると 現 在 開 いてい るHTML 書 類 にCSSを 設 定 で きます パネルメニューをクリック! 34
新 規 CSSルール 設 定 セレクタタイプを 選 択 し セレクタの 内 容 を 設 定 します クラス タグ 以 外 のセレクタは 全 て 詳 細 設 定 にします 定 義 場 所 を 現 在 のドキュメント にす ると 内 部 スタイルシートに 記 述 されます 定 義 場 所 を 新 規 スタイルシートファイ ル にすると OKボタンを 押 した 後 に 外 部 CSSファイルの 保 存 することになりま す ( 保 存 と 同 時 にリンクのタグを 記 述 してくれます) 35
CSSルール 定 義 設 定 したい CSSルールのカテゴリを 選 択 し 各 項 目 を 設 定 しま す 36
新 規 外 部 CSSの 作 成 CSSパネルから ルールを 新 規 作 成 すると 同 時 に 作 成 することもできますが 最 初 から 外 部 CSSを 作 成 することもできます 37
外 部 CSS 書 類 の 変 更 直 接 入 力 してもOK 外 部 CSS 書 類 上 でCSS パネルを 使 うのもOK 38
外 部 CSSの 関 連 付 け(1) Dreamweaverで 外 部 CSSファイルを 関 連 付 ける 場 合 CSSパネルの スタイル シートの 添 付 を 選 択 します プロパティパネルの スタイル プルダ ウンメニューから スタイルシートの 適 用 を 選 択 でも 同 じことができます 39
外 部 CSSの 関 連 付 け(2) スタイルシートの 添 付 選 択 後 ファイ ルを 選 択 すると htmlとcssのファイル 間 のパスを 自 動 的 に 検 出 し linkのタ グを 挿 入 し 関 連 付 けをしてくれます メディアを 指 定 すると linkタグに media 属 性 が 入 力 され CSSの レンダリング 適 用 先 を 設 定 でき る 40
CSS 修 正 方 法 現 在 ドキュメントに 関 連 して いるスタイルがすべてが 表 示 されます CSSスタイルパネル 現 在 ドキュメント 上 で 選 択 している 要 素 についての み 関 連 しているスタイル がすべてが 表 示 されます 外 部 のスタイル 名 (<style>になっている 場 合 は 内 部 スタイルを 指 します ) セレクタ 名 現 在 選 択 しているセレクタ のみ 下 のプロパティに 表 示 される ダブルクリックすると 編 集 用 のパネル が 表 示 される 各 プロパティを 直 接 編 集 可 能 外 部 CSSの 添 付 新 規 スタイル 作 成 CSSスタイルの 編 集 カテゴリビュー カテゴリ 毎 にプロパティを 表 示 する CSSスタイルの 削 除 リストビュー 全 てのプロパティをアルファベット 順 に 表 示 し 現 在 設 定 しているものだけ 上 位 に 表 示 する 設 定 済 みプロパティのみ 表 示 設 定 しているプロパティのみ 表 示 する 41
divタグの 挿 入 Dreamweaverではdivタグの 挿 入 が 簡 単 にできます divタグを 挿 入 したい 要 素 を 選 択 して divタグを 挿 入 ボタンを 選 択 します 42
div 挿 入 ダイアログ Divタグを 挿 入 と 同 時 に クラス 名 やID 名 なども 設 定 できます また 新 規 CSSスタイル ボタンを 押 す と divタグを 設 置 しつつ CSSスタイル ルールを 同 時 に 作 成 することができ 便 利 です 挿 入 場 所 を 指 定 できる 新 規 CSSを 作 成 するこ ともできます 必 須 では ありません ID 名 クラス 名 を 設 定 で きます 必 須 ではありま せん 43
ありがとうございました 44
Dreamweaver CS3 による CSS デザイン 入 門 < 実 践 偏 > 1CSS の 適 用 の 基 本 ここでは 文 字 を 読 みやすくするための テキストボックスのクラスを 作 成 しながら 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; }
2CSS レイアウトの 初 歩 この 演 習 では 簡 単 な 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 タグの 設 定 背 景 色 の 設 定 1で 作 成 した 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; }