Dreamweaver デザインビューで超簡単ul、liコーディングの小技

リストにしたいものをキーボートから入力でもコピペでもかまわないので、デザインビューへ配置します。

01

ここで気を付けなければいけないことはコードビューではなく、あくまでデザインビューでの操作になりますので、デザインビューをクリックしてカーソルがあることを確認しながら進めていきます。

02

デザインビューに配置したものを選択して、プロパティパネルのリストボタンをクリック

02_1

コードビューを見るとリストにしたいものが丸ごとul、liに囲まれています。リストの区切りにカーソルを入れて「Enter」キーを入力。

02_2

すると上記の画像のようになるので、以下も同じようにリストの区切りにカーソルを入れて「Enter」キーを入力。

03

ちょっとコードビューがおかしなことになってますが気にせずに、ここから更にリストの最終行の最後にカーソルを置いて「Enter」キーを入力。

05

新たなリストの行が加えられそのまま入力可能な状態になります。

06

リストをコーディングするときにはこれが一番簡単で早いですね。デザインビューも使い方次第で効率がとてもあがるので、是非おためしあれ。

Dreamweaver コードビューでの効率アップの小技

見出しや段落が既にあるもの、もしくはコピペしてきたものに、開始タグを入力したあとに、終了タグを入れる場所に「</」と入力すると自動的に開始タグに対応した終了タグをDreamweaverのコードビューが入力をしてくれる。

tag01]

段落や見出しに開始タグを入力し

tagt03

 

終了タグのを入力する位置にカーソルを置いて、「</」と入力すると、開始タグに対応した終了タグを入力してくれる。

短いタグのときはあまり恩恵を受けられないかもしれないけど、長いタグを何度も打つような場面には非常に有効だと思う。

Adobe Dreamweaver CS6 clearfixとデザインビューの表示

clearfixの見直しを検討していて、どうせ最終的にはブラウザで確認しなければいけないからあまり気にしてなかったんだけど、デザインビューで厳密ではなくてもいいので確認できればいいのにと調べてみました。

調べてみると随分前からDreamweaverのデザインビューはclearfixを認識できずに表示が崩れていて、それに応じて対応策も随分前からあり、clearfixを記述しているところに

overflow: hidden;

を書き加えてやることが多数意見のようです。

Dreamweaverで検証してみたところ、デザインビューの更新がうまくいかなくて表示が更新されないということが分かりますた(自分だけ???・・・)。

自分は基本、分割ビューで作業しているのですが、CSSのclearfixを記述している部分の最後に

overflow: hidden;

を書き加え、デザインビューの表示部分をクリックして・・・変化なし・・・。
メニュー→「表示」→「デザインビューの更新」としても・・・変化なし・・・。

モニターをぶん殴りたい衝動を抑えつつ、あれこれ試していると変わった!!

いろいろと検証してみたところ、Dreamweaverの左上に表示されるビューの切り替えボタンの「分割(ビュー)」→「デザイン(ビュー)」を切り替えてやると、書き換えたCSS、今回はclearfixの内容をきちんと反映して表示してくれます。

view

これでCSSの書き換えの反映の確認ができたので、確認のため、分割ビューでCSSを書き換え、デザインビューの表示部分をクリックしても更新されず、メニュー→「表示」→「デザインビューの更新」としても表示の更新はされないのですが、デザインビューの切り替えボタンでデザインビューをクリックしてやると更新されました。

こういうところがね・・・なかなかね・・・。

分割ビューは分割ビューであってデザインビューではないということでしょうか(涙)
まぁ、反映方法が分かったからまぁいいや。
分割ビューで表示されるデザインビュー」の表示の反映方法で困っている方がいましたらお試しください。

ちなみに、Dreamweaverを再起動すると、デザインビューに切り替えなくても、分割ビューでのデザインビューも反映されますが、実際の作業中、CSSを書き換える度にDreamweaverを再起動なんてしてられないですよねw

サルでも分かるjQueryによるフェードするロールオーバーのナビゲーション作成方法

自分は基本的に頭の悪い人間なので、1度出来たことでも半年後にやろうとすると「え?何言ってるか意味わかんないんすけど・・・。」となってしまうので、そうなってもこれを見ながら作業すれば大丈夫なように自分用備忘録。自分ほど低レベルな人がそうそういるとは思わないが同じような人に少しでも手助けやヒントになれば幸いです。

自分はDreamweaverを使ってコーディングしているので今回もDreamweaverでの作業を前提としていますので、別なツールを使っている人は適宜読み替えてください。

m(_ _;)m

下準備その1 ナビゲーション用の画像を用意

下記のような画像を用意します。今回はナビのボタンひとつの大きさが横100px 縦30pxになるように作成しました。

nav

下準備その2 jQueryのファイルを用意
今回のナビゲーション作成にあたり、jQueryのファイルが二つ必要になります。
1.「jquery-1.7.2.min.js」jQueryの標準ライブラリ
2.「jquery.hoverfade-1.0.2.min.js」今回の肝ロールオーバー用のファイル

1は「http://jquery.com/」ここからダウンロードします。Firefoxだとファイルの中身が表示されてうまく保存出来なかったので、今回はにっくきIEでダウンロードしました。

2は「http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/」のページの
「Download」のリスト3番目の「Version 1.0.2 minified [1.07k]」からダウンロードしました。(2012年6月26日現在)

フォルダ構成

フォルダ構成

出来上がりHTML & CSS
後々もコピペで使用したりするので
省略して位置が分からなくならないよう
ソース全て掲載。

HTMLソース


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverfade-1.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#nav").hoverFade();
});
</script>
</head>
<body>
<div id="navi">
  <ul id="nav" class="hover-css">
    <li class="menu01"><a href="#" title="menu01">menu01</a></li>
    <li class="menu02"><a href="#" title="menu02">menu02</a></li>
    <li class="menu03"><a href="#" title="menu03">menu03</a></li>
    <li class="menu04"><a href="#" title="menu04">menu04</a></li>
  </ul>
</div>
</body>
</html>

CSSソース

@charset "utf-8";
/* CSS Document */

ul#nav {
position:relative;
z-index:1;
float:left;
}
ul#nav li {
display:block;
overflow:hidden;
float:left;
text-indent:-99999px;
}
ul.hover-css li a,
ul.hover-anims li a,
ul.hover-anims li span {
display:block;
width:100px;
height:30px;
background:url(../img/nav.jpg) no-repeat;
}
ul.hover-css li a,
ul.hover-anims li a {
position:relative;
}
ul.hover-anims li span {
position:absolute;
top:0;
left:0;
cursor:pointer;
}
ul.hover-css li.menu01 a,
ul.hover-anims li.menu01 a {
background-position:0px 0px;
}
ul.hover-css li.menu01 a:hover,
ul.hover-css li.menu01 a.on,
ul.hover-anims li.menu01 span a.on,
ul.hover-anims li.menu01 a span,
ul.hover-anims li.menu01 span {
background-position:0px -30px;
}
ul.hover-css li.menu02 a,
ul.hover-anims li.menu02 a {
background-position:-100px 0px;
}
ul.hover-css li.menu02 a:hover,
ul.hover-css li.menu02 a.on,
ul.hover-anims li.menu02 span a.on,
ul.hover-anims li.menu02 a span,
ul.hover-anims li.menu02 span {
background-position:-100px -30px;
}
ul.hover-css li.menu03 a,
ul.hover-anims li.menu03 a {
background-position:-200px 0px;
}
ul.hover-css li.menu03 a:hover,
ul.hover-css li.menu03 a.on,
ul.hover-anims li.menu03 span a.on,
ul.hover-anims li.menu03 a span,
ul.hover-anims li.menu03 span {
background-position:-200px -30px;
}
ul.hover-css li.menu04 a,
ul.hover-anims li.menu04 a {
background-position:-300px 0px;
}
ul.hover-css li.menu04 a:hover,
ul.hover-css li.menu04 a.on,
ul.hover-anims li.menu04 span a.on,
ul.hover-anims li.menu04 a span,
ul.hover-anims li.menu04 span {
background-position:-300px -30px;
}
#navi {
height: 30px;
width: 500px;
}

サイト定義

Dreamweaverでファイルのリンクや管理が簡単になるようにサイト定義しておきます。

サイト定義

新規ドキュメント html

サイト定義が終わったらhtmlファイルを新規作成します。Dreamweaver→メニュー→ファイル→新規とすると「新規ドキュメント」ウインドウが開くので左から「空白のページ」、ページタイプ「HTML」、レイアウト「なし」、ドキュメントタイプは今回「XHTML 1.0 Transirional」を選択しました。「作成」ボタンをクリックします。
新規ドキュメント HTML

新規ファイル HTML

ドキュメントの中身が空のファイルが開きます。ここからあれこれと手を加えていきます。

新規ファイル HTML

ナビ部分を貼り付け

<body>タグの中にナビ部分のhtmlソースをこのページ上部のhtmlより貼り付けます。

コピペする範囲

<div id="navi">
  <ul id="nav" class="hover-css">
    <li class="menu01"><a href="#" title="menu01">menu01</a></li>
    <li class="menu02"><a href="#" title="menu02">menu02</a></li>
    <li class="menu03"><a href="#" title="menu03">menu03</a></li>
    <li class="menu04"><a href="#" title="menu04">menu04</a></li>
  </ul>
</div>

※要注意 : ulのidに「nav」が使われているのでdivのidを同じにしない!

ナビ部分のソース貼り付け

ファイルを保存

この状態でファイルを一旦保存します。Dreamweaver→メニュー→ファイル→新規保存

ファイルを保存

名前をつけて保存

「名前を付けて保存」ウインドウが開くので適当な名前をつけて保存します。

名前を付けて保存

新規ドキュメント CSS

今度はCSSファイルを作成します。Dreamweaver→メニュー→新規をクリックして「新規ドキュメント」ウインドウが開くので、左から「空白ページ」、ページタイプ「CSS」をクリックして、「作成」ボタンをクリックします。

新規ドキュメント CSS

新規ファイル CSS

空のCSSファイルが作成されます。

空のCSSファイル

中身を貼り付けて保存

このページ上部にあるCSSファイルのソースを全て貼り付けて保存する。ソースを貼り付けてから、Dreamweaber→ファイル→新規保存をクリック。

新規保存 CSS

名前を付けて保存 CSS

「名前を付けて保存」ウインドウが開くので、保存する場所を「css」フォルダを指定して、適当な名前を付けて保存する。

名前を付けて保存

CSSファイルのリンク

HTMLファイルを開いた状態で、下記画像のようにDreamweaverの「スタイルシートを添付」ボタンをクリックする。

スタイルシートを添付

外部スタイルシートの添付

すると「外部スタイルシートの添付」ウインドウが開くので「参照ボタン」をクリックする。

外部スタイルシートの添付

次に、「スタイルシートファイルを選択」ウインドウが開くので、先程保存した、CSSファイルを選択して「OK」をクリック。これでHTMLにスタイルシートがリンクされる。

スタイルシートファイルを選択

CSSファイルのリンク完了

このページの沿って、ファイル、フォルダ構成を設定して、指定間違いがなければ、この時点でCSSロールオーバー状態のメニューが完成する。

CSSロールオーバーメニューの完成

Dreamweaverのプレビューがおかしいが、実際にブラウザで表示するときちんとしたCSSロールオーバーのメニューが表示される。これはJavaScriptがオンになっていないときに問題がおきないようCSSロールオーバーのメニューが表示される仕組みになっているため。

ブラウザでCSSロールオーバーの確認

jsファイルのリンク

CSSのロールオーバーに問題がなかったら次の段階のjQueryの組み込み

下の画像ではカーソルが写っていないので分かりづらいが、「JavaScriptを読み込みたい位置にカーソルを持ってきて」の図です。jsファイルのリンクを記述する場所は</head>タグ(終了)の「直前」です。

JavaScriptを読み込みたい位置にカーソルを持ってくる

スクリプトファイルの添付

Dreamweaver→挿入→HTML→スクリプトオブジェクト→スクリプトとクリックします。

スクリプトファイルの添付

スクリプト

「スクリプト」ウインドウが開くのでソース欄の右のフォルダアイコンをクリックして、このページの冒頭の「フォルダ構成」の部分でJSフォルダに配置した2つのjsファイルを読み込みます。

ファイルの選択 jsファイル

最初に「jquery-1.7.2.min.js」を読み込みます。ファイルの場所でjsフォルダを選択してから、表示された「jquery-1.7.2.min.js」を選択して「OK」をクリックします。

jsファイルをリンクさせたHTMLソースの状態

HTMLソールにjsファイルがリンクされました。同じように「jquery.hoverfade-1.0.2.min.js」もリンクさせます。1番目が「jquery-1.7.2.min.js」、2番目に「jquery.hoverfade-1.0.2.min.js」が読み込まれるようにします。ここ重要b。

スクリプトの貼り付け

HTMLに直接書くスクリプトを貼り付けます。

「jquery.hoverfade-1.0.2.min.js」を読み込んだ

<script type="text/javascript" src="js/jquery.hoverfade-1.0.2.min.js"></script>

の直下に

<script type="text/javascript">
$(document).ready(function () {
    $("#nav").hoverFade();
});
</script>

と貼り付けます。

直書きのスクリプトファイルの貼り付け

以上で完成。問題がなければふわ~~っと切り替わるロールオーバーが完成しているはず。

完成サンプル

改行を入れない<nobr>タグをCSSで実現する方法

ホームページの作成・修正時に改行を入れたくないのに
1文字追加すると改行されてしまうことはよくある話。

<nobr>タグを使いたいところだがNetscape Navigator 2.0(Netscape の前身)の時に採用された独自タグなので、そんな過去の産物を独自タグ導入するわけにもいかない。

そこでCSSでそれを実現する方法

span.nobr {
white-space: nowrap;
}

のように設定します。

Dreamweaverの設定画面ではこんな感じ。

nobr

参考サイト

片っ端から忘れていけばいいじゃない。XHTMLにおける<nobr>の代替物は?