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の編集モードがあるのかわからない…。
従来の操作方法を残しながら機能を追加したから…でしょうか？
BlueGriffonNetscape Composerの末裔。
フリーソフト、拡張機能は有料。
テキスト入力には使える…と思いましたが、phpを読み込んで保存してみたところコードが壊れて…。
本文中の「>」が「>」に書き換えられました。
親切な機能なのですが、phpのプログラムの書き換えは…。
StyleNoteUIが…。何をどうすればどうなるのか…。
Aptana高機能なWebオーサリングツール…のようなのですが、こちらの回線が遅いからなのか、サーバーが重いからなのかダウンロードに何度も失敗。
やっとダウンロードできた…と思ったらインストールに失敗。
ソフトウェアの使い方を覚えたらずっと使いたいのに、これでは…となりました。
Atom学習中。
「d」と一文字入力して、候補から「div」を選ぶと…。
<div class="">
</div>
まで入力してくれる。
↑
Atomで三色旗を作ってみました。
Brackets
↑
Bracketsでライブプレビュー。
ソースを選択するとChromeの該当箇所が強調表示され、Chromeの表示を選択するとソースの該当箇所が強調表示される。
WYSIWYGじゃなくても、ここまでできれば…。
右クリックからのCSSを編集時は、どのCSSファイルを編集しているのかを確認しなければいけないようです。気がついたらそのHTMLからはリンクされていない別のCSSファイルを編集していました。
Google Chrome。
↑
ブラウザですが…。
ASCII.jp：CSSの修正が捗る「リアルタイムコーディング」とは｜Web制作が3倍速くなるChromeデベロッパーツールの使い方
Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。
CSSの編集方法がDreamweaver8と近い。
DevTools ワークスペースによる永続化の設定 | Tools for Web Developers | Google Developers
デフォルトでは、変更点を外部エディタに手動でコピーして貼り付けておかなければ、ブラウザを最新情報に更新すると、変更内容は失われます。
ワークスペースを使用すると、Chrome DevTools を使いながら、このような変更点をディスクに永続化できます。
chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法 | ぶちねこどっとうぇぶ
改めてChromeデベロッパー・ツールの公式マニュアルを読んだところ、ローカルファイルを直接変更・保存しながらコーディングする方法を知りました。
これができれば、Chromeで十分かも…と思いましたがなぜかできません。
↑
ワークスペースの設定画面に、バグでマッピングができないからレポートして…と…。
Chromeを多重起動しているからなのか…。
マッピングできなくてもワークスペースに作業フォルダを登録する意味はあるようで…。
↑
XAMPPを使ったlocalhostの表示なのに、表示しているローカルフォルダの色が変化し、表示しているファイルに緑色のマーク。
ワークスペースに登録している任意のフォルダやファイルを開いてソースを編集できる。
エディタはHTML、CSSの入力を補助してくれる。
↑
選択したHTMLのElementsを選択してElementsのソースをコピー。
Ghromeの「要素の検証」のElementsの内容をコピー | サイバーキューブ開発メモ
プログラムを実行した結果得られたHTMLをそのまま保存してもあまり意味が無いので、該当箇所だけコピーしてテンプレートを編集…という作業のための機能なのかもしれません。
いろいろ使い比べてみて、一番使いやすかったのはGoogle Chrome…いや、それブラウザだからという…。
Atomや、BlueGriffonも併用する事になると思いますが、今あるサイトを簡易的にメンテナンスするだけなら、Chromeがあれば…。
CSSの調整はDreamweaver8より簡単。
新規ルールを設定したり、idやclassを割り振る作業にはDreamweaver8を使ったほうがいいのかもしれません。しかし、すでに設定されているCSSの数値の変更はChromeのデベロッパーツールでリアルタイムで変化する画面を確認しながら作業したほうが早くて確実…でした。
追記。
ワークスペースにフォルダを追加してもマッピングできないと書きましたが…。
デベロッパーツールで変更すると、ローカルのCSSも変更されていて…。
デベロッパーツールで加えた変更がリアルタイムでローカルに保存できればいいわけですから、この設定で問題ない事になります。
Mapping are inferred automatically.
翻訳してみたら…自動的にマッピングしたよ…。
