以前から、書きためていたエントリーが死んでしまうことが多いのですが、今日のエントリーは以前別のブログで途中まで書いていて、なんか急激に冷めてしまったので、放置していたエントリーの一つです。
その昔、デザインビューでもコードビューでもどっちでもいいじゃーんなんて書いたことがあったはずなのですが、それは今でも全く変わらず、自身のもっともやりやすいスタイルでアプリケーションなんて使えばいいと思っています。とはいえ、なんというかこれはあくまでも自分が昔から思っていたというか、感じていたというか、考え過ぎなのかわからないんですけど、デザインビューだと正しくコーディングが出来ないとか、素人臭いなんていう雰囲気は未だに残っているような気もします。でも、別にいいじゃんって思うのですが、Dreamweaverのデザインビュー殆どで仕事をしてきた身としては、素人臭い云々はともかく、正しくコーディングできないっていうのは違うなぁと思うわけです。
Dreamweaverで正しくコーディング出来ないって言うことを、自分が10年以上Dreamweaverとつきあってきた中で見聞きしたことをあげてみると、
- 変なところでタグが挿入される
- 勝手にPが入る
- テキストを削除したのにタグ毎消えちゃった
- 勝手にソースコードがインデントされる
１番に関しては、かつてFONTタグ全盛の時代[謎]に良く聞いていたのですが、例えばこんなコード
<font>なんちゃらかんちゃら<br></font>ほんにゃらぺっちゃデザインビューで「なんちゃらかんちゃら」を選択してFONTタグで装飾をすると、なぜかBRまで含んでしまうなんていうこと。これは、選択の仕方に問題があります。ドラッグ選択をする際に、「なんちゃらかんちゃら」の先頭をクリックしてからドラッグで「ら」までを選択するときに、勢い余って選択すると、BRまで含んでしまいます。
これは、SPANやSTRONGなどのインライン要素として意味づけするときにも似たようなことが起こるのですが、勢い余って選択するのではなく、最後の「ら」の所に来たら選択する速度を落として、そっと選択を終了します。それだけで、BRを含むようなことは無くなります。
2番目は、そもそもDreamweaverのデザインビューでの仕様を理解していないだけのことで、Enterキーを押せば必ずそうなります。もう少し詳しく書くと、たとえば、新規ドキュメントの先頭にテキストを少し入力します。このときは、まだなんのタグにも囲まれていない状態です。ここでEnterキーを押すと、そのテキストがPタグで囲まれてP要素となります。そしてあわせて、改行された位置にあるカーソル部分も自動的にP要素になります。ここで、マウスをはずして別の所をクリックすると、P要素からはずれてしまうので、空白のP要素が挿入されたことになってしまいます。
３番目は、１番目に通じる部分だったりするのですが、たとえば、ブロックレベル要素のタグに囲まれている内容を選択してから削除をするといったことを行うとき、１番同様に勢い余って選択すると、タグを含めて選択されてしまいます。従って１番と同じようなマウス操作をすれば、タグを残して内容だけ削除することが出来ます。
そして最後の４番。これはもう、「環境設定」をきちんと汁！って言いたい部分。多くの制作に携わっている方は、環境設定を弄っていると思いますが、Dreamweaverでは、コーディングする人の癖や制作サイトの仕様にそったコーディングになるようにさまざまな設定がここに隠されています。ここを自分自身の好きなコーディングルール、仕様に従ったコーディングルールにあわせて記述するように設定するだけのこと。
とまぁ、いくつか例を挙げたのですが、せっかくなのでもう一つほど。
Dreamweaverのデザインビューでは、複数の段落をまとめて選択して、プロパティパネルの「リスト」ボタンをクリックすると、ULもしくはOLにすることができます。選択されていた各段落は、リスト項目LI要素になります。ボタン一つだけでリストになるってめっちゃべんりでしょ？その仕様を理解していたら、例えばグロナビをマークアップするときに、ナビゲーション項目をコピペしつつ段落としてマークアップさせて、その複数の段落を選択してからリストボタンを押せば終わり。
入れ子のリストを作りたいのであれば、全ての項目を段落化した後、リストにして、その後入れ子にしたい項目をクリックし、インデントボタンを押すだけで、簡単に入れ子のリストができます。
こうした仕様は、昔からあるもので、つい最近のことではありません。長いことデザインビューで作業していると、これまで紹介してきたさまざまなことはほとんどエラー無しでできます。画面上はデザインビューだけど、頭の中でその裏で吐き出されているHTMLがなんなのかを想像できると言った方が良いかも知れません。ドラッグによる選択もそうだし、EnterキーやShift+Enterキーを押した瞬間にタグが想像できます。
ちょっと乱暴な言い方かも知れませんが、Dreamweaverのデザインビューで作業するのなら、自分のマウス操作でどういうことが起こっているのか、キーボード操作で何が起こったのか、そういうことが想像でき、そこで書き出されているHTMLが想像できないのであれば、デザインビューは使わない方が良いなぁって思います。コードビューで早打ちした方が絶対に良いです。
あと、クリック動作での選択範囲についても、理解しておくべきかなぁって思います。たとえば段落内の適当なところをクリックすると、そこにカーソルが入ります。ダブルクリックでそのテキストの単語なりが選択されて、トリプルクリック（？）で、内容全てが選択されることや、タグセレクタでタグを選択してから、右矢印もしくは左矢印キーを押すと、カーソル位置が要素からはずれるなんてことも、体でおぼえているからこそ、できたりします。たかが一アプリケーションのことで熱くなるなよなんていわれそうですけど、結局は正確にでも素早く作業をするためのノウハウだったりするわけです。
ただし、残念ながら、Dreamweaverにも苦手な要素があります。例えば、定義リスト。デザインビューでマークアップできる定義リストは、DTとDDが1対1で交互に繰り返すような場合のみ。DTとDDになる項目を順に段落テキストにしてそれを全て選択。そしてメニューから定義リストを選択すればあっと言う間に出来るのですが、DT DD DD DT DD DD DD 見たいなマークアップは、残念ながらできません。こういったマークアップをしなければならないときだけは、さすがにコードビューで作業します。
とはいえ、実際に自分はそうして仕事をしてきているし、お客さまからもらう原稿の大半は、Word書類やTEXT書類。これをちょこっと弄って、デザインビューに流し込んで、ちょいちょいちょいっと弄れば、あっというまにHTMLの基本ができます。たぶん、これからもこのスタンスは変わらないんだろうなって思います。なかなか文章では伝わりにくいニュアンスだったりするので、わかりにくいかなぁと思いつつも、あえてこんなエントリーを書いてみました。
フロントエンドエンジニアになりたい人の Webプログラミング入門
