外出自粛中でも楽しく過ごす!QAまとめ>>

1年ほど前からHTMLを独学で勉強した、
完全手打ちの、いわゆる叩き上げ的な人間です。

学習を開始する際にHTML編集ソフトとして、
DreamWeaverを購入しましたが(正確にはWeb Premium)、
今まで手打ちばかりで機能をほとんど使ったことがありませんでした。

そこで、最近になり作業効率を上げようと思い、
DWの便利機能について勉強をしている状況なのですが、
正直なところ役に立ちそうな機能が何一つとしてありません・・・。

代表的なものでCSSの設定も簡単に行える機能があるようですが、
直接編集したほうが圧倒的にスピードも速いですし微調整も効くなど、
フレキシブルに設定できるので、やはり私の中では手打ちには勝りません。

そのほかの機能についても、う~ん・・・といった感じでした。

そこで、現在DWを使用中の方にお聞きしたいのですが、
単刀直入にDreamWeaverのメリットって一体何なのでしょうか?
なぜDWはプロ御用達と言われるほど絶大な支持を受けているのでしょうか?

確かにデザインビューなどを見ながら作業をされる方は、
視覚的に調整できますし、イメージも湧きやすいのではないかと思いますが、
デザインビューを見ることさえしない私にとっては魅力を感じることができません。

この類のソフトは使い方も人それぞれでしょうし、
担当している事によって作業フローも全然異なってくることかと思いますが、
一通りの作業を試して思ったことは、DreamWeaverに搭載されている多くの機能は、
手打ちが苦手orデザインビュー主体で構築する方向けの機能といった印象を受けました。
(決して手打ちが苦手なのが悪いということじゃないです。悪しからずご了承を。)

私のような手打ちの人間でも役に立つ機能と言えば、
やはりPhotoshop等、他のアドビソフトウェアとの連携機能くらいしかないのでしょうか。

みなさんのご意見をお聞かせ願います。
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

私も手打ちから入った人間ですが、DWは普通に便利で助かりますよ。



私の場合、コードビューとデザインビューを同時に表示しながら、編集はコードビューに手打ちのみで行います。デザインビューをいじるとソースが乱れるので、視界の端で確認するために(自分が打ち損じをするとすぐにわかる)開いておいて、編集には使いません。

■デザインビューで一通り確認して、一ヶ所だけ訂正したい部分があるとします。その場合、デザインビューの方でその部分を選択すれば、コードビューの方でも自動的に選択されるので、どんなに長大なソースでも修正箇所を一瞬で探し出すことができます。

■デザインについて悩んでいる時など(いくつかのパーツがあって、どれを使うか迷っている時、文字や枠を何色にするか迷っている時など)、コードビューで編集すればリアルタイムでデザインビューに反映されるため、いちいちブラウザを使うよりはるかにラクで、全体のイメージを掴みやすく、より比較がしやすいです。複数のブラウザで確認したくなった時も、ショートカットキーを二つ三つ押すだけです。

■ソースをタグや要素ごとに好きな表示方法(色、フォント、イタリック、ボールド)に設定できるので、ソース全体を見た時に、どこが何タグなのか瞬時に判別できます。

■要素やタグの頭文字を入力すれば該当する要素をパッと表示してくれて、その中から選択できるようになっていること、開始タグの「>」を打つと同時に閉じタグを勝手に入力してくれるなど、入力の補助機能はとても助かります。これらは、手打ちに慣れた人なら誰しも違和感を覚えると思いますが、ソフトのレスポンスを先読みしながら操作するようになると、キーを叩く回数が圧倒的に減るため、確実に編集が早くなります。

■CSSを設定する時も、ある設定を外部CSSファイルの方にどんな名前で記述したか忘れてしまっていても、htmlの方にidとかclassとか打ち込めば一覧が出るので非常に便利です。タイプミスやスペルミス、id名のカン違いなどのウッカリミスによってきちんと表示されない。といった事態は確実になくなります。

■複数のファイルにソースが全く同じ箇所があって、それらを全て修正したい時に、ファイルを選択して検索&置換をかけることができます。大量のファイルをいちいち開いて直すより正確ではるかに早いです。

■ファイル名を変更すると、そのファイルを参照しているファイルが一覧で表示されて、それらのファイルのソースを一発で修正することができます。

■ソースの編集、デザインの確認、複数ブラウザでの表示確認、ファイルのUPDOWN、パーミッションの設定、ファイル名の変更や新規ファイルの作成…これらの操作が全て単一のソフト内で完結できることは非常に助かります。

これらが「便利機能」にあたるのかはわかりませんが、私にとってはDWの持つ機能の中で最も重要な機能です。

ご参考までに。
    • good
    • 1
この回答へのお礼

回答ありがとうございます。
あまりにも愚かな自分に気づかされました。

学習を始めた時からDWのみの使用でしたが、

■途中まで叩いたらタグ候補を出してくれる機能
■デザインビュー選択でコードの位置が一発で分かる機能
■デザインビューで“確認しながら”行える作業フロー

このように自分では当然と思っていた機能は、
明らかにDreamWeaverの恩恵を受けている部分ですね・・・。

このような偉そうな口は
他の編集ソフトをいくつか体験した後に叩くべきでした・・・。

お礼日時:2012/01/19 15:15

>やはりPhotoshop等、他のアドビソフトウェアとの連携機能くらいしかないのでしょうか。



そうですよ。
それが最大の利点じゃないですか。

いくら貴方が手打ちでHTMLもCSSも書いたとしましょう。
所詮それは文字だけの平べったいWebページですね。
画像は、フリーの素材集を使いすべてそれでそれでまかなって くみ上げは手打ちなら
そもそもDWなんかいりません。

普通はビジュアルありきでつくり、文字コードは跡付けでしょ
文字があって絵を足すのではなく Web制作は 絵があって文字を足すのが魅せるWeb製作です。
そのため、書き出しなどがPhotoshopやFLASH、FWやイラレ連動が都合のいいツールです。

あとの利点として、PHPやJAVAのエディターが付いています
更新などもファイルマネージャーがありますし、同じメニューなどを埋め込むためのライブラリー機能
Zインデックスなどを使ったレイヤー組みの座標判別なども機能にありますね。

要らない人に入らない機能です。使う道具なんてそんなモンです
貴方が使ってるTVのリモコンだってめったに押さないボタンがあるのと一緒です
一般人には使わないけど、これがなければチャンネル設定ができない
役割としてはそんなモンです。

別に使わないから技術もちとか偉いと そんなモンでもありません。
打ち込みだけで間に合うようなページは出来るでしょうが、それではニーズが合いません。
    • good
    • 0
この回答へのお礼

確かに現在Javascriptすら学習中の身ですし、
PHPなどの域になってくると話がガラっと変わるかもですね!

折角Web Premiumを購入しましたが、
使っているのは正直DWとPSだけですので、
今後はソフトウェア間の連携を中心に勉強し、
良い物を高効率で製作できるように頑張ろうと思います。

余談ですがリモコンの例えが素晴らしいですね。
このような発想の転換ができる人で頭が悪い人は知らないので、
さぞ革新的なサイトを製作されているデザイナーさんなのでは・・・。

ありがとうございました。

お礼日時:2012/01/19 15:05

手打ちでできるならそれで良いのではないでしょうか。




あとのメリットは、大きくは複数サイトの管理があります。
複数サイトをそれぞれ独立して管理できますので、HP構成を忘れてもなんとかなります。
逆に、テンプレートを用意しておけばデザインの変更を一気に行なうこともできます。
ftpの転送まで自動で行なうことができるというのもありますね。
    • good
    • 0
この回答へのお礼

ありがとうございます。

一応購入した書籍を読んで、
「サイト管理機能」と「FTP機能」は使うようになりました。
使うようになったとは言っても使いこなしているとは言い難いですが…。

前々からプロのデザイナーさん達はどんな作業フローなんだろうとか、
一般的に「正しい使い方」を探し続けてきたんですが(独学だった為)、
結局のところ手打ちが至極という認識でいいんでしょうか・・・。

お礼日時:2012/01/19 14:59

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QプロがDreamWeaverを使わない理由とは?

駆け出しのWebデザイナーなのですが現在DreamWeaverを使っています。
プロの方に限ってうちはDreamWeaverとか使わないとおっしゃいますよね?DreamWeaverって使わないほうがいいソフトなんでしょうか。
エラーチェック機能やブラウザ毎の非対応もわかりますのでそれなりに便利だとは思っています。私の場合タグうちはできますのでDreamWeaverの機能はあまり使っていません。自動タグ生成はしないため不要タグは発生せず問題はありませんし、いまさら他のソフトに乗り換えるのも面倒なので使い続けているわけです。

しかし他の方法を知らないためDreamWeaver以外が気になります。
そこでプロがあえてDreamWeaverを避ける理由を教えていただけませんでしょうか。
ひょっとして金銭的に無駄だから…でしょうか・・
お勧めの作成方法(ソフト)と理由、DreamWeaverのデメリットを教えていただけたら助かります。よろしくお願いいたします。

Aベストアンサー

がるです。確か回答者への…というのはNGだったように記憶しているのですが、質問者さんが混乱するのもちょいと忍びないので、一言二言。
HTMLにPHPを直接埋め込むかそれともHTMLテンプレートとPHPプログラムを別々に分けるか、という議論については、MVCという考え方を調べてみてください。その結果どっちをチョイスするかはその方々の自由かと思います。業務状況その他でも違うでしょうし。
最も、私の知っている環境下では「MVC使わない」ケースは物凄く稀ですが。

ちなみに、PHPを書く「だけ」で考えた場合、Eclipseが大分使いやすいです(Zend Studio は、個人的にはもう一つ使いにくいです)。
とはいえ、私はもっぱらviで書いてますが :-P

プログラムを書くことを前提にしたエディタ(統合開発環境とか言ったほうがよいのでしょうか?)とデザインをすることを基準にしたエディタでは、やはり大分趣が違うかと思うので。
もし行き来するのであれば…現状知っている限りでは「それぞれに適したエディタを往復する」のが一番いいんですかねぇ?

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Q独自ドメインからどこのレンタルサーバーを使用してるか調べる方法

独自ドメイン(www.好きな名前.com等)からどこのレンタルサーバーを使用してるか調べる方法を教えて下さい。
またレンタルサーバー専用会社なのか大手プロバイダのレンタルサービスを使用してるかを調べる方法をできれば具体的に教えて下さい。

Aベストアンサー

.comや.orgなどならば http://www.whois.sc/
でドメイン名を入れて検索すると、
その結果表示の中の IP location という項目に
会社名がでます。

.jpならば コマンドプロンプトで"ping サーバ名"で
IPアドレスを取得、次に http://www.nic.ad.jp/
下部左の部分にそのIPアドレスを入れて検索すると
会社名がでます。

でドメインを入れて

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

Qイラレで背景の色を変更するにはどうしたら良いですか?

イラレで背景の色を変更するにはどうしたら良いですか?


イラレで、通常、背景の色は白色に設定されていますが、
これを変更するにはどうしたら良いのでしょうか?

また、bmpやjpgといった画像ファイルに出力するときにも
背景は白色で出力されます。
これの色を変更するにはどうしたら良いですか?

よろしくお願いいたします。

Aベストアンサー

Illustratorには背景色という物が存在しません
印刷物を制作する場合普通は白い紙に印刷するからでしょうねキット
四角を書いて一番したに置きご希望の色にして下さい

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む


人気Q&Aランキング