DreamWeaver 1 - the THEATER MOON

DreamWeaver
1
CSS を使用した WEB サイトデザイン
DreamWeaver（CC 2017）を使用し、主にスタイルシートで WEB ページをデザインする方法を学
びます。<div> タグでのエリア指定、見出しや段落等へのスタイルの適用、ページに動的な効果を与え
る jQuery の設定方法などにも言及して行きます。
なお、スタイルの定義の仕方は様々あって「これが正解」というわけではありません。いろいろカスタ
マイズしながら学習しましょう。
作業をしたら、ブラウザでの確認やソースコード、CSS 内容の確認なども適宜行ってください。こまめ
な保存も忘れずに。
仕上がりを確認しておく
どんなページを作るのか、確認しておこう。
http://theatermoon.jp/web/sample/
header
#headerContainer
#cover
.coverVisual
main
#mainContainer
.mainColumn
.sideColumn
footer
#footerContainer
DreamWeaver
2
DreamWeaver
CSS を使用した WEB サイトデザイン
3
CSS を使用した WEB サイトデザイン
Dream Weaver の画面について
セレクターが長すぎる時は上下の矢印キーで調整可能です。
■ 直接記述する場合
1. 「コードビュー」にし、設定したいタグを選びコマンド＋ E を押す。セレクターがあればそのまま、
無ければ「新規ルール」を押してセレクターを作ってからプロパティと値を直接入力する。
2.
コードビューの上部から CSS ファイル名をクリックし、直接記述・編集してもよい。
事前準備をする
DreamWeaver では始めに必ず「サイトの定義」を行う。設定すると、DreamWeaver 内でファイル
名の管理などができるようになり、たとえばファイル名を変更した場合、関連するリンク部分も自動で
修正される。サイトの定義はフォルダ単位で行われる。
■ 環境設定（初回のみ）
1.
「DreamWeaver」メニューから「環境設定」を開く
2. 「カテゴリ」→「CSS スタイルシート」→「ショートハンドを使用」にチェックをつけておく（CSS
の表示が簡易になる）
。
3.
「カテゴリ」→「CSS スタイルシート」→「修正時に CSS ファイルを開く」のチェックを外してお
く（開いたまま保存を忘れると、修正が適用されないことがあるため）。
4. 「カテゴリ」→「コードフォーマット」の「高度なフォーマット」から「CSS」ボタンを選ぶ。
「複数
のプロパティのみ」と「ルール間に空白」にチェックを入れると、コードがすっきりして読みやすく
なる。
5. 「カテゴリ」→「リアルタイムプレビュー」で確認用のブラウザを設定しておく。
このプリント内での表記
このプリントでは CSS 上で
■ フォルダを作成し、サイトの管理をする
セレクタ {
1.
任意の場所に新規フォルダを作る。わかりやすい名前（例・DW 練習）にしておく。
プロパティ : 値 ;
2.
上記フォルダの内部に、講師が配布したファイルをフォルダごとコピーしておく。
プロパティ : 値 ;
3.
DreamWeaver を起動する。
「サイト」→「新規サイト」でサイトの管理をする。
}
4. 「サイト名」にわかりやすい名前（例・DW 練習）を指定。
「ローカルサイトフォルダ」横のフォル
のような表記を次のように記述する。
ダ型アイコンをクリックし、
（1）で作ったフォルダの場所を指定する。
セレクタ {}
■
プロパティ：
値；
■
プロパティ：
値；
1 行目がセレクタ、2 行目以降がプロパティ。行頭のアイコンは、
「CSS デザイナー」パネルでのカテゴリ。
DreamWeaver では、
「CSS デザイナー」パネルでセレクタを指定し、各スタイルの定義をする……と
いうこともできるが、1 つ前のバージョン（2015.3）より、コードビューが Brakets の技術を流用した
ものとなった。そこで、CSS パネルを使用するより、直接記述する方が早い場合もある。
■ 新規書類を開く
1.
DreamWeaver の「ファイル」→「新規」
。
「新規ドキュメント」で「HTML」を選び、
「フレームワー
ク」を「なし」にする。パネル右下の「ドキュメントタイプ」で「HTML5」を選ぶ。
2.
コードビューの <title></title> 間に適当な名称を入れ、
「ファイル」→「保存」で先ほど作成し
たフォルダに保存する。ファイル名は「index.html」
。
3.
「ファイル」パネル内に、保存した index.html が表示されていることを確認する。
スタイルの適用について
■ スタイルシートを添付する
■ 「CSS デザイナー」パネルを使用する場合
1. 「ファイル」→
「新規」。ドキュメントタイプで
「CSS」を選び、無駄な余白が出ないようにするために、
1.
スタイルを適用したい部分を選ぶ。
2.
CSS デザイナーパネルの「ソース」が記述する CSS ファイルになっていることを確認し、
「セレ
クター」から「＋」アイコンを押す。
3. 「プロパティ」から設定項目を選び、値を選択または入力する
3 行目に次のように入力する（「CSS デザイナー」パネルを使用してもよい）
。
* {}
margin：
0px；
padding：
0px；
2.
ファイル名をつけて（例「base.css」）、
「common」フォルダ内に保存する。閉じる。
DreamWeaver
4
DreamWeaver
CSS を使用した WEB サイトデザイン
3.
4.
CSS を使用した WEB サイトデザイン
HTML ファイルに戻り、CSS デザイナーパネルで「ソース」から＋アイコンを押して「既存の
■ ナビゲーション用のタグを入れる
CSS を添付」を選び、
「参照」ボタンを押して先ほど保存した CSS ファイルをリンクさせる。
<div id="headerContainer"> と </div> 間にカーソルを入れ、次のように入力する
<nav></nav>
<head> 内に <link href=" ～ > というタグが入っていることを確認する。
他の HTML ページと共有するため、スタイルシートは外部ファイルとして保存しておきます。保存後、HTML と CSS を関
■ メイン container を左右にわける
連付けるため CSS デザインパネルからリンクしましょう。
<div id="mainContainer"> と </div> の間にカーソルを入れ、次のように入力する
<article class="mainColumn"></article>
HTML をどのように表示するか、例えばデフォルトの余白の値やインデント値は、実は使用するブラウザによって変化します。
<article class="sideCulumn"></article>
そこで、ブラウザが違っても大丈夫なように、すべての値をまっさらな状態に戻す必要があります。
通常は「リセット CSS」と呼ばれるファイルを設定、あるいは、公開されているものをダウンロードしてきて使用しますが、
範囲を分けるときに使用するタグには <div> や <article>、<section> があります。
ここでは煩雑になるので代替として使用できる「＊」を使います。「＊」で指定した値はすべてのタグ・クラス・ID に先駆けて
この中で <article> はそれで囲んだ範囲が独立したページになるような単位をいいます。たとえば、見出しと本文がある 1
有効になります。
日分のブログ記事のようなものを思い浮かべると良いでしょう。<section> はそれよりやや細かな範囲、先ほどのブログの
例でいえば記事の中に写真があるとして文字と写真をわけるような時に使います。
基本のスタイルを設定する
これら 2 つに比べて <div> は最も汎用性が高いタグです。意味のあまりない、デザイン優先で囲みを作らなければならな
い時に使います。
■ body タグ
基本となる画面サイズと文字の大きさを指定する。行間は画像の下などに余計な空白を作らないために
100％にしておくが、これだと文字が読みづらくなるので、後でもっと空けるようにする。
body {}
width：
文字を配置し、整理する
1.
height：
100%；
font-family：
" ヒラギノ角ゴ Pro W3,……メイリオ, ……,sans-serif”
；
font-size：
16px；
line-height：
100%；
color：
任意（サンプルでは #555555）
；
100%；
3.
か所になるはず）
。
が楽になる。
5. 「コマンド」→「ソースフォーマットの適用」をかけて、見やすくしておく（今後も適宜行う）
。
タグの挿入その１）「挿入」パネルからｓｅｃｔ
ｉ
ｏｎアイコンを押してタグを入力、文章を移動。
画像にリンクをかけると、周囲に線が出てしまう。それを防ぐ。
タグの挿入その２）囲みたい範囲を選択し、コマンド＋Ｔで出てきたボックスに section と入力。Enter キーを押せば勝手に
a img { }
border：
閉じタグが出来て囲まれます。
タグの挿入その３）コードビューで見出しの前に直接入力。<sec まで入力すれば、ヒントが出ます。また、閉じたい部分で
none；
</ までを入力すれば勝手に閉じてくれます。
範囲指定をする
ヘッダー部分のスタイルとコンテンツを指定する
■ 要素ごとに範囲を作る
コンテンツを入れるための範囲指定を行う。まずは <header><main><footer> の 3 分割と、それ
ぞれの中に内容を入れるための枠を作る。
ファイルを「コードビュー」モードにし、<body> 〜 </body> 内に次のように記述する。
<header>
<div id="headerContainer"></div>
</header>
<div id="cover">
header
#headerContainer
#cover
.coverVisual
<div class="cover__visual"></div>
</div>
#mainContainer
<div id="mainContainer"></div>
</main>
.mainColumn
.sideColumn
<footer>
<div id="footerContainer"></div>
</footer>
■ header 部分のスタイル
幅と高さを指定して、上部にラインを、下部に余白をつける
h e a d e r ｛｝
width：
100％；
height：
auto ；
margin-bottom：
20px；
display：
block；
border-top：
5px　solid　#8888aa；
■ headerContainer 部分のスタイル
main
<main>
見出しとその説明文ごとに <section> タグで囲む（メインカラムとサイドカラムで section は 4
4. 「ライブビュー」にし、要素ごとに Enter キーを押す。<p> タグで囲まれるので、その後の選択
■ リンクした画像タグ
配布したフォルダ内の「document.txt」ファイルを開く。
2. 「コードビュー」にし、サンプルを参考にして文字情報を必要な場所にコピー＆ペーストしておく。
5
footer
幅と高さを指定して、コンテンツを中央に揃える。
#h e a d e r Co n t a in e r ｛｝
width：
960px；
height：
auto；
margin：
0px　auto；
■ サイトロゴ（見出し 1）部分を作る
#footerContainer
1.
ヘッダー部分の「Practice!」の文字を選択し、プロパティパネルもしくは画面上の青いアイコン
DreamWeaver
6
DreamWeaver
CSS を使用した WEB サイトデザイン
CSS を使用した WEB サイトデザイン
から <p> タグを <h1> に変換する（プロパティパネルで変換してもよいし、書き換えてもよい）。
2.
-webkit や -moz と頭についているものは「ベンダープレフィックス」と言います。一部の CSS は、
ブラウザにより非対応だっ
たり、独自の拡張機能だったりします。それらのブラウザでも問題なく表示できるよう、DW では CSS デザイナーパネルを
ヘッダー部分の <h1> タグの間にある文字を削除し、イメージ挿入アイコンをクリックする。
使うと自動で付加してくれます。ちなみに「-webkit」は Chrome や Safari、「-moz」は Firefox です。
「images」フォルダから「logo.png」を選択し、OK を押す。代替テキストを入力する。
3. 「ライブビュー」でロゴを選択し、プロパティパネルのリンクに「index.html」を指定する。
■ スタイルを設定する
7
■ メニューの右端のスタイルを変更する
一番右端のメニューだけ線を消すための方法。
#n a v ib o x li:la s t -c h ild ｛｝
# h e a d e rCo n t a i n e r h1 ｛｝
width：
auto；
height：
60px；
border：
none；
:last-child は疑似クラスの一種で、複数の項目のあるタグ
（この場合は <li>）の最後の一つであるという意味です。メニュー
の部分は、
他と区切るために右側（border-right）に線をつけていましたが、
このままでは最後の部分にも線が出てしまいます。
それを消すために border: none; を入れています。
ナビ部分の指定をする
■ ナビのスタイルを指定する
■ 文字をリスト（箇条書き）に変換する
大きさ、位置などを指定する。文字の大きさや色を指定する。
1.
<nav> 内の文章 5 項目（RPACTICE・LEANING・STUDY……）を <p> タグごと選択し、
「編
#n a v ib o x li a ｛｝
display： block；
width： 90%；
height：
auto；
padding： 8px；
集」→「リスト」→「番号なしリスト」で箇条書きに変換する。
2.
リストタグ <ul> を選択し、ID 名を「navibox」とする（直接入力可）
。コードビューで文字が次
のようになっていることを確認する。
<nav>
margin：
0px　auto；
font-weight：
bold；
font-size：
110％；
text-decoration：
none；
color：
#666666；
<ul id="navibox">
<li>RPACTICE</li>
<li>LEANING</li>
<li>STUDY</li>
<li>TRANING</li>
■ ロールオーバー時の指定をする
<li>DILIGENCE</li>
通常時とロールオーバー時（マウスで触れた時）で背景色が変わるよう指定する。
#n a v ib o x li a :h o v e r {
</ul>
</nav>
3.
ナビの各文字を選択し、プロパティパネルでそれぞれのリンクに「#」を入力する。リンク位置は
<li><li> の内側になる。
background-color：
#88a；
color：
#fff；
border-radius：
5px；
スタイルは a（＝通常）
、a:hover（＝触ったとき）の 2 箇所に指定をします。
リンクに＃を入れるのはページ内リンクのことです。今回は <a> タグにスタイルを適用したいのでとりあえず使いましたが、
本来はリンク先のファイル名を入れてください。
■ #navibox 部分のスタイルを指定する
flex を使用して、リストを横に並べるようにする。
#navibox {}
display：
flex；
flex-wrap：
no-wrap；
トップページ用のカバービジュアル部分を指定する
1.
<div id="coverVisual"> </div> の間にカーソルをいれ、イメージ挿入アイコンをクリックする。
「cover01.jpg」を選択する。
2.
スタイルを指定し、適用する
■ #cover 部分のスタイル
■ メニューの各項目のスタイルを指定する
背景とサイズの指定。
1 つ 1 つの幅を揃え、文字を中央に配置する。リスト用のマークを外し、横に線を入れる
#c o v e {}
#navibox li｛｝
width： 100%；
height： auto；
margin-bottom：
20px；
width：
20%；
text-align：
center；
border-right：
1px　solid　#ccc；
padding：
20px　0px；
list-style：
none；
background-image： url(../images/coverBack.gif)；
-webkit-box-sizing：
border-box；
background-repeat：
repeat；
-moz-box-sizing：
border-box；
box-sizing：
border-box；
DreamWeaver
8
DreamWeaver
CSS を使用した WEB サイトデザイン
CSS を使用した WEB サイトデザイン
2. 「授業概要」の文字をカットし、挿入パネルからイメージ挿入アイコンをクリックする。
「midashi01.
■ #coverVisual 部分のスタイル
サイズを指定し、中央に揃える。余白を取り、影をつける。
. c o verVi s u a l {}
png」を選択して OK する。alt オプションに文字をペーストする。
3. 「新着情報」の見出しも同じように画像にする。
width： 960px；
height： 300px；
padding： 10px；
幅と高さを指定し、下部に余白をつける
margin： 0px　auto；
.ma in Co lu mn h 1 {}
background-color： #fff；
Width：
100%；
Height：
40px；
margin-bottom：
10px；
■ 見出しのスタイルを設定する
border-radius：
3px；
-webkit-box-shadow： 0px 1px 5px rgba(0, 0, 0, 0.3)；
box-shadow： 0px 1px 5px rgba(0, 0, 0, 0.3)；
CSS を使用すれば、わざわざ Photoshop などで加工しなくてもドロップシャドウや角を丸くすることができます　。影の値
は左から順に X 座標のオフセット、Y 座標のオフセット、ぼかし、影の色です。
メインカラムの設定
■ 画像を入れる
1.
メインカラムの「授業概要」部分に写真を入れる。まず、文章の最後（</p> の後）にカーソルを
入れ、
「ul>li*3」と入力する。入力したら、Tab キーを押す（展開されてリストのタグになる）
。
2.
<li> と </li> 間にカーソルを入れ、イメージ挿入アイコンをクリックする。
「images」フォルダ
から「photo01.jpg」を選び、OK する。他の <li> タグにも写真のデータを入れる。
■ メインタグの設定
<main> タグはブラウザ（Internet Exproler など）によってはサポートされていない。そこで、この
部分を表示するためのスタイルを指定する。
ma i n ｛｝
display：
block；
line-height：
180%；
3.
<ul> タグを選択し、クラス名に「photo」と入れる。
（２）で書いた「ul>li*3」は、
DreamWeaver の新機能のひとつで Emmet という技術です。独自の省略記法によりコーディ
ングの高速化が図れます。
「ul>li*3」このようにすると実際には Tab キーとともに <ul><li></li><li></li><li></li></ul> と記述されます。*3
は「×3」と同じ意味で、3 回繰り返すということです。
■ 写真部分のスタイルを設定する
■ #mainContainer 部分のスタイル
横 3 分割ができるように flex を指定する。写真の周囲に線をつける。
幅を決めて中央揃えにする。左右に分割するための準備をする
.p h o t o {}
# ma i n Co n t a i n e r ｛｝
width：
100%；
width：
960px；
height：
auto；
margin：
0 auto；
margin：
10px　auto　0px；
display：
flex；
display：
flex；
flex-wrap：
no-wrap；
flex-wrap：
no-wrap；
justify-content：
space-between；
justify-content：
space-between；
.photo li {}
■ 左右の分割をする
左右それぞれの指定をする。
# ma i n Co n t a i n e r . m ainC olum n｛｝
width：
620px；
# ma i n Co n t a i n e r . sideC olum n｛｝
width
300px；
項目ごとに余白ができるよう、<section> タグにスタイルを指定する。
# ma i n Co n t a i n e r s ect ion｛｝
margin-bottom：
width：
192px;
height：
auto；
padding：
1px；
list-style：
none；
line-height：
0％；
border：
3px solid #cccccc；
■ 新着情報部分を作りこむ
■ section タグの設定
50px；
1.
文章を選択し、日付と内容のそれぞれが <p> タグで囲まれていることを確認する（ここが間違っ
ていると二度手間になるので気をつける）
。
2.
文章を選んだまま「編集」→「リスト」→「定義リスト」を選択。文章とタグが合っているかどう
かを確認する。
＃ main_contents 部分を作りこむ
■ 見出しを指定する
1.
9
メインカラムは
「授業概要」と
「新着情報」を <p> タグごと選択し、
「見出し（
1 =<h1>）
」にしておく。
<dl>
<dt> 日付 </dt>
<dd> 内容 </dd>　……
</dl>
DreamWeaver
10
DreamWeaver
CSS を使用した WEB サイトデザイン
3.
<dl> タグのクラス名に「news」と入れる。
CSS を使用した WEB サイトデザイン
■ ソフトの紹介部分を作りこむ
1.
■ 新着情報のスタイル
11
コードビューにして「Feature Software」の </h2> の後ろで「dl>(dt+dd)*2」と入力する（定
義リストの Emmet）
。Tab キーを押して展開する。
.news {}
display：
flex；
flex-wrap：
wrap；
2.
次のようになるように文章を移動する。
<dl>
.news dt {
<dt>DreamWeaver</dt>
<dd>Adobe Systems 社の Web ページ編集ソフト。プロの……</dd>
<dt>Brackets</dt>
<dd>Web デザインを知り尽くした、モダンでオープンソースな……</dd>
width：
30%；
padding：
5px　0px　5px　20px；
-webkit-box-sizing：
border-box；
-moz-box-sizing：
border-box；
box-sizing：
border-box；
background-image：
url(../images/icon1.gif)；
3.
余分な（空の）<p></p> タグを削除する
background-repeat：
no-repeat；
background-position：
left　1em；
4.
<dl> タグに「software」とクラス名を付ける。
border-bottom：
1px　dotted　#cccccc；
5.
それぞれの <dt> タグのすぐ後ろに、イメージ挿入アイコンを使って画像を配置する。
「icon_
. n e w s d d {}
</dl>
dw.gif」
、
「icon_br.gif」
。
■ ソフト紹介部分のスタイルを指定する
width：
70%；
padding：
5px　0px；
border-bottom：
1px　dotted　#cccccc；
.s o f t wa r e d t {
padding-left：
20px；
font-weight：
bold；
通常、定義リストは項目と内容が上下に続きます。今回は CSS を使って無理やり左右に置くようにしています。
color：
#8888aa；
アイコンの配置はブレットイメージ（リスト項目）を使用してもよいのですが、文字の高さに対して上下の位置がずれてしまう
background-image：
url(../images/icon2.gif)；
background-repeat：
no-repeat；
background-position：
left　0.5em；
という問題があるので、背景にしています。
＃ side 部分を作りこむ
■ 見出しの指定とバナーのリストへの変換
1.
padding-bottom：
20px；
font-size：
80％；
スト」→「番号なしリスト」を選択してリストタグに変換する。
line-height：
160％；
<li> タグの間にある文字を削除し、イメージ挿入アイコンをクリックする。
「images」フォルダ
border-bottom：
1px　dotted　#cccccc；
サイドカラムは「Learning Items」と「Feature Software」が「見出し 2」になるようにする。
2. 「Learning Items」の次にある
「HTML・CSS・jQuery」をライブビューのまま選択し、
「編集」→
「リ
3.
から「banner01.png」を選択し、OK を押す。代替テキストを入力する。
4.
.s o f t wa r e d d {
<ul> タグを選択し、クラス名に「banner」と入れる。
■ 見出しのスタイル
margin-bottom：
20px；
.s o f t wa r e img {
float：
right;
margin：
0px　0px　10px　10px；
. s i d e Cu l u mn h 2 {
margin-bottom：
10px；
padding：
0px　10px；
font-size：
90％；
font-weight：
bold；
color：
#fff;
background-color：
#8888aa；
フッター部分のスタイルとコンテンツを指定する
1. 「△ PAGE TOP」の文字を <p> タグごとカットし、挿入パネルからイメージ挿入アイコンをクリッ
クする。
「pagetop.gif」を選択して OK する。
2.
画像を選択し、Div タグ挿入アイコンをクリックする。
「選択範囲の周囲で折り返す」になってい
ることを確認し、クラス名に「pagetop」と入れる。
3. 「pagetop」の画像を選び、プロパティパネルのリンク欄に「#headerContainer」と入力する。
■ バナーのスタイル
4.
.banner li {}
margin-bottom：
5px；
list-style：
none；
著作権の文言が入っている <p> タグを選択し、クラス名に「copyright」と入力する。
■ #footer 部分のスタイル
下に余裕を持たせるために高さを指定する。背景を指定する
DreamWeaver
12
DreamWeaver
CSS を使用した WEB サイトデザイン
f oote r {}
width：
100%；
height：
100px；
background-image：
url(../images/footerBack.gif)；
background-repeat：
repeat-x；
background-position：
center　top；
13
CSS を使用した WEB サイトデザイン
jQuery について
jQuery は JavaScript ライブラリの 1 つ。
JavaScript の直接記述はソースコードが長くなる。JavaScript を外部化することで対応することもで
きるが、ある程度複雑な操作（複数の動き）をしようとすると、表示に時間がかかってしまうこともある。
その複数の動きをワンセットにしたものがライブラリである。
少々乱暴な例えをするならば、
「パンをあたため、ハンバーグを焼く。パンにレタスとソースとハンバー
■ #footer_contents 部分のスタイル
グとチーズをはさむ」という動作が JavaScript だとすると、jQuery は、HTML から「チーズバーガー
幅を指定して中央に揃える
ください」という命令を送るようなものと考えるとわかりやすい。実際の動きは JavaScript で行われ
f oote r　# fo o t e rC ont ainer { }
width：
960px；
margin：
0px　auto；
るが、記述するのは「チーズバーガー」だけでよいということになる。
このライブラリは複数公開されているので、目的にあわせてダウンロードして使用する。まとめたサイト
なども多数あるので、検索してみよう。
■ ページ上部に戻るためのリンク部分
. p a g e t o p {}
margin-bottom：
10px；
text-align：
right；
■ 著作権表示部分
フッターに置いたページの先頭へ戻るボタンに、アニメーション効果をつける。
■ スクリプトのリンク
. c o p y ri g h t {}
text-align：
center；
font-size：
80％；
仕上げる
1.
ページ上部へ戻るボタンの jQuery
コードビューにして、余分な改行や空のタグ（例・<p> </p> など間に何もはいっていないタグ）
1.
ンを使用しても良い）
。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.10.2");</script>
2. 「ファイル」→「新規」で JavaScript ファイルを作成する。次の分を入力し、適当なファイル名（例・
base.js）をつけて「common」フォルダの中に保存する。
がないかどうかを確認する。
2.
「コマンド」→「ソースフォーマットの適用」をして、ソースコードを綺麗にする。
3.
完成。
このプリントの 4 ページ目を参考に、タグと id 名・class 名を入れていく（#cover 部分を除く）
。
3.
共通するコンテンツ部分（ロゴ、ナビ、フッターの項目等）のソースをコピーする。
■ CSS を添付する
1.
CSS パネルの下にある「スタイルシートを添付」ボタン（チェーンの形のアイコン）をクリックし、
$(".pagetop").click(function () {
$('html,body').animate({ scrollTop: 0 }, 'slow');
■ 新規書類を作り、エリアわけをする
2.
$(function() {
2 ページ目以降を同じデザインで作る
1. 「ファイル」→「新規」で新規 HTML ファイルを作成し、適当な名前で保存する。
<head> ～ </head> の間にカーソルを入れ、次のスクリプトを記述する（スクリプト挿入ボタ
3.
return false;
});
});
<head> ～ </head> の間にカーソルを入れ、スクリプト挿入ボタンで（2）で保存したファイ
ルにリンクする。
スクリプトへのリンクは、<head> から </head> の間に入れます。文字情報として画面に表示されてしまうこと
を防ぐためです。
（2）の 3 行目に「".pagetop"」とあるのがわかりますか ?　このクラス名を持つオブジェクトに対し、スクリプトを
記述します、ということになります。また、(1）に書かれているのは、Google が公開している jQuery のライブラ
リにアクセスするためのコードです。
保存してあるスタイルシートファイルを選択する。
2.
背景やエリアの大きさなどがすでに指定されているので、コンテンツの部分を作りこむ。
上記のやり方以外に、DreamWeaver にはサイト全体のデザインをする時に使用すると便利な、テンプレートという機能があ
ります。テンプレート上にデザインをしておくと、複数のページをそこから派生させることができるだけでなく、ナビなどに修
正が入った場合、テンプレートから作られたページを一気に編集できる機能です。興味がある人は直接使用方法を聞きに来て
ください。
Light Box を使用する
大きなサイズの写真を表示するときによく使用されている Light Box を設定する。
■ Light Box のダウンロード
次のサイトから、Light Box2.0 のライブラリをダウンロードする
http://www.lokeshdhakar.com/projects/lightbox2/
14
DreamWeaver
DreamWeaver
CSS を使用した WEB サイトデザイン
1.
ダウンロードしたファイルを解凍する
2. 「img」
、
「css」
、
「js」フォルダを、自分で作成中のフォルダにコピーする。このとき、フォルダの
名前が既存のフォルダ名とかぶってしまうようなら、フォルダの中身だけ移し変えると良い。
Lightbox では、
画像のフォルダ名が「img」になっています。このプリントでは「images」を使用しているので、別々のフォ
ルダになってしまいます。統一したい場合は「images の中に素材を入れ、「CSS」フォルダの中にある「lightboc.css」
CSS を使用した WEB サイトデザイン
2. 「jquery.bxslider.min.js」と「jquery.bxslider.css」を「common」フォルダにコピーする。
3.
images フォルダ内の「bx_loader.gif」と「controls.png」を「images」フォルダにコピーする。
■ スクリプトの指定
1.
HTML の <head> ～ </head> の間に次のタグを書き込む。
<script src="/js/jquery.bxslider.min.js"></script>
の中の全ての「 url(../img/ ～～」を「 url(../images/ ～～」に書き換えます。
■ スクリプトの指定
1.
2. 「base.js」を開き、現在の文章に追加して次のスクリプトを書き込む。
HTML の <head> ～ </head> の間に次のタグを書き込む。
HTML の <head> ～ </head> の間で CSS へのリンクを貼る。すでにある CSS へのリン
クの次の行にカーソルを入れ、CSS スタイルパネルのチェーン（リンク）アイコンをクリックし
「lightbox.css」へリンクする。次のようになる。
1.
HTML の <head> ～ </head> の間で CSS へのリンクを貼る。すでにある CSS へのリン
クの次の行にカーソルを入れ、CSS スタイルパネルのチェーン（リンク）アイコンをクリックし、
/>
「jquery.bxslider.css」をリンクする。次のようになる。
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
■ HTML への記述（イメージセット）
1. 「授業概要」の部分の写真を選択し、それぞれ <a> タグではさむ。リンク先を「bigPhoto01.
jpg」～「bigPhoto03.jpg」にする。
■ HTML への記述
2.
スライダーを表示したい部分、カバービジュアルをリスト化する。このとき、<ul> にクラス指定で
「bxslider」を記述する。<li> の数は、表示したい写真の枚数とする。
<a> タグに rel オプションをつけ lightbox とし、[ ] でセット名（自由）を記述する。
<ul class="photo">
<div class="cover_visual">
<li>
<a href="images/bigPhoto01.jpg" rel="lightbox[myPhoto]" title="music">
<li><img src="images/cover01.jpg" width="960" height="300"></li>
<img src="images/photo01.jpg" width="192" height="144">
<li><img src="images/cover02.jpg" width="960" height="300"></li>
</a>
<li><img src="images/cover03.jpg" width="960" height="300"></li>
</li>
<li><img src="images/cover04.jpg" width="960" height="300"></li>
<li>
<li><img src="images/cover05.jpg" width="960" height="300"></li>
<a href="images/bigPhoto02.jpg" rel="lightbox[myPhoto]" title="book">
<img src="images/photo02.jpg" width="192" height="144"></a>
</div>
</li>
3.
<li>
.c o v e r _ v is u a l
<a href="images/bigPhoto03.jpg" rel="lightbox[myPhoto]" title="camera">
<img src="images/photo03.jpg" width="192" height="144">
</a>
</li>
</ul>
3.
$('.bxslider').bxSlider();
});
■ CSS へのリンク
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"
2.
$(document).ready(function(){
<script src="common/lightbox.min.js"></script>
2.
15
ブラウザでチェックする。
4.
<ul class="bxslider">
</ul>
CSS スタイルパネルから、cover_visual の変更をする。
width： 960px；
height： auto ；
margin： 0px　auto；
ブラウザでチェックする。
■ 上級者向けカスタマイズ方法
ダウンロードした「plugins」フォルダの中身も HTML にリンクし、スクリプトの「$('.bxslider').
bxSlider( ● );」の●部分に｛　｝で囲んでコマンドを記述すると、様々な効果を追加することができる。
スライダーを利用する
よく使われそうなものは次の通り。
サイトのトップビジュアルに使用されることの多いスライダーを設定する。
auto:
true にすると自動再生
speed:
スライドの遷移時間
■ bxSlider のダウンロード
次のサイトから、bxSlider のライブラリをダウンロードする。
http://bxslider.com/
1.
ダウンロードしたファイルを解凍する。
mode:
‘fade’はフェード
randomStart:
ランダム再生を再生するかどうか
captions:
true にすると、img タグの title に設定したのが出る
responsive:
true にすると、画面のサイズに合わせて自動縮小する
16
DreamWeaver
CSS を使用した WEB サイトデザイン
例）
自動再生、スピードを 1 秒に、フェード切り替え、キャプションを表示する
$('.slider').bxSlider({
auto:true,
speed:1000,
mode: 'fade',
captions: true
});
詳しくは下記参照。
http://bxslider.com/options
http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html

Download Report