Dreamweaverの代わりになるHTMLエディタ

Dreamweaver8を使い続けてきましたが、CSS3に対応していないため表示を確認する事が難しくなってきました。
またWindows7で起動するとアイコンに盾マーク。Windows10で動作するのかどうか…。

Dreamweaverの最新版を買えばいいのでは?と思いましたが…。
Adobe Dreamweaver CCの購入 | webデザインソフトウェア

Creative Cloud単体プランが2,180円/月(税別)、または、26,160円/年(税別)です。
毎年2万6千円…。
Dreamweaver8を、2006年に46,190円で購入、12年使いました。

46,190/12=3,849円/年とコスパ良好…。

これが、毎年2万6千円になったら…。

ホームページ・ビルダー21は…。

HTML5、CSS3に対応。12年前のソフトより、もしかしたら使いやすいかもしれない…。
と思いましたがダメでした。

HTMLがわからない人でも使えるソフトとして開発しているからなのか色を16進数で「#666666」のように6桁で入力したいと思っても、16進数による入力は2桁ずつ…。

CSSの編集…。
なぜ何通りものCSSの編集モードがあるのかわからない…。
従来の操作方法を残しながら機能を追加したから…でしょうか?

BlueGriffon

Netscape Composerの末裔。
フリーソフト、拡張機能は有料。

テキスト入力には使える…と思いましたが、phpを読み込んで保存してみたところコードが壊れて…。
本文中の「>」が「>」に書き換えられました。

親切な機能なのですが、phpのプログラムの書き換えは…。

StyleNote

UIが…。何をどうすればどうなるのか…。

Aptana

高機能なWebオーサリングツール…のようなのですが、こちらの回線が遅いからなのか、サーバーが重いからなのかダウンロードに何度も失敗。

やっとダウンロードできた…と思ったらインストールに失敗。
ソフトウェアの使い方を覚えたらずっと使いたいのに、これでは…となりました。

Atom

学習中。

「d」と一文字入力して、候補から「div」を選ぶと…。
<div class="">
 
</div>
まで入力してくれる。

Atom

Atomで三色旗を作ってみました。

Brackets

Brackets

Bracketsでライブプレビュー。

ソースを選択するとChromeの該当箇所が強調表示され、Chromeの表示を選択するとソースの該当箇所が強調表示される。

WYSIWYGじゃなくても、ここまでできれば…。
右クリックからのCSSを編集時は、どのCSSファイルを編集しているのかを確認しなければいけないようです。気がついたらそのHTMLからはリンクされていない別のCSSファイルを編集していました。

Google Chrome。

Chrome デベロッパーツール

ブラウザですが…。
ASCII.jp:CSSの修正が捗る「リアルタイムコーディング」とは|Web制作が3倍速くなるChromeデベロッパーツールの使い方

Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。
CSSの編集方法がDreamweaver8と近い。
DevTools ワークスペースによる永続化の設定 | Tools for Web Developers | Google Developers

デフォルトでは、変更点を外部エディタに手動でコピーして貼り付けておかなければ、ブラウザを最新情報に更新すると、変更内容は失われます。
ワークスペースを使用すると、Chrome DevTools を使いながら、このような変更点をディスクに永続化できます。
chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法 | ぶちねこどっとうぇぶ

改めてChromeデベロッパー・ツールの公式マニュアルを読んだところ、ローカルファイルを直接変更・保存しながらコーディングする方法を知りました。
これができれば、Chromeで十分かも…と思いましたがなぜかできません。

Chrome デベロッパーツール ワークスペース

ワークスペースの設定画面に、バグでマッピングができないからレポートして…と…。

Chromeを多重起動しているからなのか…。

マッピングできなくてもワークスペースに作業フォルダを登録する意味はあるようで…。

Chrome デベロッパーツール

XAMPPを使ったlocalhostの表示なのに、表示しているローカルフォルダの色が変化し、表示しているファイルに緑色のマーク。

ワークスペースに登録している任意のフォルダやファイルを開いてソースを編集できる。
エディタはHTML、CSSの入力を補助してくれる。

Chrome デベロッパーツール

選択したHTMLのElementsを選択してElementsのソースをコピー。
Ghromeの「要素の検証」のElementsの内容をコピー | サイバーキューブ開発メモ
プログラムを実行した結果得られたHTMLをそのまま保存してもあまり意味が無いので、該当箇所だけコピーしてテンプレートを編集…という作業のための機能なのかもしれません。

いろいろ使い比べてみて、一番使いやすかったのはGoogle Chrome…いや、それブラウザだからという…。
Atomや、BlueGriffonも併用する事になると思いますが、今あるサイトを簡易的にメンテナンスするだけなら、Chromeがあれば…。

CSSの調整はDreamweaver8より簡単。

新規ルールを設定したり、idやclassを割り振る作業にはDreamweaver8を使ったほうがいいのかもしれません。しかし、すでに設定されているCSSの数値の変更はChromeのデベロッパーツールでリアルタイムで変化する画面を確認しながら作業したほうが早くて確実…でした。

追記。

ワークスペースにフォルダを追加してもマッピングできないと書きましたが…。
デベロッパーツールで変更すると、ローカルのCSSも変更されていて…。
デベロッパーツールで加えた変更がリアルタイムでローカルに保存できればいいわけですから、この設定で問題ない事になります。
Mapping are inferred automatically.
翻訳してみたら…自動的にマッピングしたよ…。
posted by さとぴあ at 2018/03/04 21:31 | Web制作

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。