スタッフブログ

毎日暖かい日が続きますね。

桜も一気に咲いて満開です。

こんにちは。桜大好きスタッフ「ほ」です。

お花見は桜が満開になる直前くらいにやる人が多いですが、個人的に桜は散り際が一番キレイだと思うので、個人的な見ごろは今週末じゃないないか？と思っています。

さて、今日は久しぶりのDreamweaverネタです。

授業でたまに受けるご質問に
「マウスを当てるとツルッと下にサブメニューが出てくるナビゲーションバーを作りたいんですが…」
というものがあります。

↓こんなやつですね。

これ、Dreamweaverを持っていれば、比較的簡単に作れます。

Dreamweaverには、SpryというAdobe社がJavascriptがわからない人でも、簡単にJavascriptを扱えるようにしてくれた機能です。

最終的にはJavascriptは自分で書けたり修正できるのが理想なのですが、手っ取り早くメニューを作りたい！といった場合には、もう本当にお手軽な機能です。

ということで作り方のご紹介。

まず、メニューを作成するファイルを開いてください。

挿入したい位置にカーソルを立て、「挿入」メニューから「Spry」⇒「Spryメニューバー」をクリックします。

作成するメニューが横型なのか縦型なのかを聞かれますので、自分が作りたい方を選択して「OK」をクリックします。

すると、これだけで、もう最低限のメニューバーが出来上がります。

とりあえず保存しましょう。

上書き保存の際に「依存ファイルのコピー」というウィンドウが開きます。今回のメニューバーを作成するにあたって必要となるファイルをDreamweaverが保存しようとしている確認なので「OK」をクリックしてください。

では、プレビューしてみます。

↓こんな状態になっているはずです
サンプルを開く

もう、必要な動きができあがってるのがわかると思います。

さぁ、あとは中の文字を書き換えるだけです。

文字の書き換えはプロパティインスペクタを使用します。

作成されたメニューバーの左上にあるタブ部分をクリックすると、プロパティインスペクタが以下のような状態になります。

まず、はじめに表示されているメニューは、この部分です。

項目名を書き換えるときは、項目名をクリックしてパネル右部にあるこの部分を書き換えます。

メニュー項目の追加と削除はこの部分にある「＋」と「－」で行います。

言うまでもなく、「＋」が追加、「－」が削除です。

そしてこの部分がマウスポインタを当てると出てくる下の階層部分になります。

先程と同様にテキストを書き換え、クリックした際のリンク先はこの部分で指定します。

必要に応じて、その下の階層も追加できます。

プレビューして、内容が正しく変更できたかどうかを確認しましょう。

これで完成！…と言いたいところですが、「自分の好みのデザインにしたい！」というご意見もあるかと思いますので、少しだけ装飾のお話を。

Spryメニューバーを作成すると、十数個のCSSセレクタが自動的に生成されます。

この中から、装飾内容ごとの編集ポイントを書いてみます。

●各項目の囲み線を出したい

初期設定では、各ボタンに罫線がついていませんが、CSSスタイルパネルから
「ul.MenuBarHorizontal li」
のCSSルールを開き、「ボーダー」のカテゴリから任意の線を設定してください。

●各項目の幅を変更したい

ナビゲーションの各項目幅は初期設定では8emで設定されています。

これは、中の文字サイズがユーザーによって変更された場合に柔軟に変化する幅です。
が、レイアウトに組み込む際には横幅をpxで固定したい場合もあります。

CSSスタイルパネルから
「ul.MenuBarHorizontal li」
を開いて幅の指定を行います。

マウスを当てた際に出てくるサブメニュー部分の幅は
「ul.MenuBarHorizontal ul」と
「ul.MenuBarHorizontal ul li」
の２つで指定できます。

●マウスオーバー時の背景色を変更したい

初期設定では、マウスを乗せた際にボタンが青い背景色で反応するようになっていますが、この色は
「ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible」
の設定で変更できます。

背景色を自分の好きな色に変更してください。

そのほか、サイズや色に関しては、CSSを覗いて「これかなー？」ってところを変更してみれば、たいてい上手くできると思います。
いろいろ試してみてください。

電車内でマスクをしていることをいいことに、口をあけて爆睡していたら、自分の「ふごっ」という声で目がさめたスタッフ「ほ」です。
もう、めちゃくちゃ恥ずかしかった･･･

さて、今回はドリームウィーバーネタです。

メニューやトピックの一覧などで活用する機会が多いリストですが、入れ子にして利用することができます。

たとえば、こんな場合です。

ブログのカテゴリ一覧リストなどで利用されることが多いです。
ちなみに、マークアップは以下のようになります。

慣れないと、ちょっとややこしい感じですね。

さて、Dreamweaverで、このリストの入れ子を作る方法をご紹介します。

まずは、全項目をすべて行を分けて書き、
書けたら、それらをすべてザザーッと選択します。

プロパティインスペクタにあるリストボタンをクリックしてリストにします。

この時点では、全項目で１つのリストになっています。

では入れ子を作ってみます。

「桃」～「ハンバーグ」までをドラッグで選択してください。

続いて、プロパティインスペクタから、「テキストインデント」をクリックします。

以上で、ドラッグ選択されていたエリアが入れ子のリストに変換されました。

もうちょっと簡単な方法として、入れ子にしたい部分をドラッグ選択してから、キーボードの「Tab」キーを押す、という方法もあります。

ちなみに入れ子を解除したい場合は、ドラッグ選択した後、「テキストインデント解除」ボタンをクリックするか、「Shift」＋「Tab」キーで行えます。

覚えておくと、ちょっと複雑なメニューを作るときに、役立つと思います。

つい最近まで9月だなーと思っていたら、いつの間にか11月になっていました。
あれ？10月は？どこいった？

最近、時間の感覚が明らかにおかしいスタッフ「ほ」です。

ハロウィンを楽しむ間もなかった…orz

さて、気を取り直して、今日はドリームウィーバーネタです。

HTMLやCSSのコードは、ボリュームが出てくると、何の設定だったか、よく覚えてなくて、後になってから「この設定は必要なものだろうか？」なんてなることがしばしばあったりします。

んで、そういったサイトが、次々と担当者を変えて引き継がれていくと、謎のコードだらけの恐ろしいページに…

そんなことにならないように、わかりづらそうなソースコードには、コメントを入れておくといいです。

ソースコードの中にコメントという扱いで文字を入力すると、Webページ上には影響せずに、コードの中だけに文字を表示させることができます。

HTMLとCSSで、コメントは書き方が違います。

HTMLはコメントにしたい部分を「<!–」と「–>」で囲みます。

<!-- ここにコメントを書きます -->

CSSはコメントにしたい部分を「/*」と「*/」で囲みます。

/*  ここにコメントを書きます */

Dreamweaverでは、これをコードビューで手書きすることもできますが、実はコメントを入れるボタンがあったりします。
ちょっと目立たないのですが、コードビューの左端にあるこのアイコンがそうです。

クリックしてみると、このメニューが出てきます。

「HTMLコメントの適用」をクリックすると、ソースコード上のカーソルを置いていた場所に自動的に「<!—->」が挿入されますので、この真中にコメントを書いていけばOKです。

また、先に文字を書いておき、それをドラッグして…

この状態で「HTMLコメントの適用」をクリックすると、

このように自動的にコメントにしてくれます。

CSSも同様に行えます。

覚えておくと、何気に便利な機能です。

コメントは、例えばWebページに不具合が出ている時に、ソースコードのどの部分が原因で不具合が起きているのか不明な時に、コメントで怪しい部分のソースコードをコメントにして無効にし、不具合が起きている場所の絞り込みなどにも使えます。

知らなかったーー！という方は、ぜひぜひお試しあれ。

「これからドリームウィーバーを覚えたい」なんて方は、バンフートレーニングスクールのドリームウィーバー講座にてお待ちしております。HTMLやCSSのコードもまだ知らないーという方には、HTMLやCSSからしっかり学んでドリームウィーバーまで習得できちゃう「WEBパック（FLASH講座もついてます）」がオススメです。

気がつけば久しぶりの更新になってしまいました。

だんだん暑~くなってきましたねー。
調子に乗ってクーラー効かせすぎて、毎年風邪をひくスタッフ「ほ」です。

これまで、グラフィックソフトばかりだったので、
今日のテーマはDreamweaverで行ってみようと思います。

何のネタにしようかなぁ、と迷ったんですが、授業ではあまりご紹介していないJavaScriptネタにしてみようと思います。

「そもそもDreamweaverの基本操作が知りたいよっ！」って方は、ぜひバンフートレーニングスクールのWeb講座へお越しください～

簡単なものですが、今回の素材を用意しました。
こちらからダウンロードしてください（Zip形式）

Zipファイルを解凍すると、フォルダ内に３つのファイルが確認できると思います。
index.htmlをドリームウィーバーで開いてください。

通常のリンク設定は、プロパティインスペクタのリンク欄で行いますが、ここでリンクを設定するだけだと、リンク先のページが別ウインドウでは開きません。

そこで、別ウインドウでリンク先を開くためには、ターゲットで_blankの指定を行うわけですが…

この方法だと、別ウインドウのウインドウサイズが、リンク元のページと同じサイズで開いてしまいます。

この別ウインドウで開くリンク先のウインドウサイズを制御するためには、JavaScriptが必要となります。

それでは、まず準備をしていきましょう。
リンクを設定する文字列にリンクを設定します。
リンク先には「#」を入力してダミーリンクを指定しておきます。
targetは空欄にしておいてください。

JavaScriptは、HTMLのタグと連動して作動します。
今回は、『リンク部分をクリックしたら別ウインドウを開く』という動作を行うので、
リンク部分にカーソルを立てて、タグセレクタから<a>をクリックしておきましょう。

※何の話だか全然わかんないっ！って方は、、バンフートレーニングスクールのHTML+CSS講座でお待ちしてます。

Dreamweaverでは、JavaScriptの制御は、「ビヘイビア」パネルで行います。
ビヘイビアパネルが入っているタグパネルバーに<a>が指定されていることを確認してください。
これで<a>タグにJavaScriptを関連付けする準備ができました。

JavaScriptで動作を追加します。
パネル内の「ビヘイビアの追加」ボタンをクリックします。

表示されたメニューの一覧から「ブラウザウインドウを開く」というメニューを見つけ出してクリックします。


次のダイアログが開きます。

「表示するURL」には、リンクをクリックした時に開くページを指定します。
「ウインドウ幅」と「ウインドウ高」の欄で開くウインドウのサイズを指定します。

「属性」欄では、開くウインドウに表示させたい項目にチェックを入れます。
それぞれの項目は以下を参照してください。

ブラウザでプレビューしてみましょう。
リンクをクリックして、指定通りの別ウインドウが開けば成功です！