私はほぼ初心者です。heml、css、（php）（JavaScript）作成・改修のために、皆さんの”環境（使用しているソフト、アドオン、webアプリなど）”と"手順"を教えて下さい。ただし、お金がないので、フリーソフト（安価なシェアソフトは△）で、実際に使用している（いた）人に限らせて頂き、その理由も必須でお願いします。
【やりたいこと】
・初級～中級者レベルのブログ、ホームページのテンプレート作成・改修
・簡単なサイトの編集業務で使用できるぐらいの手順をマスター
・作業スピードを上げたい（タグなどを簡単に記憶、挿入できる辞書機能をもったテキストエディタなどが知りたい）
回答はこの3点が理想です。
【環境（必須）】例：TeraPad、firebugなど【手順（必須ではない）作業スピードアップの秘訣など】【おススメの素材DL・お勉強サイトなど（必須ではない）】
HPビルダー、Dreamweaverとかは無しです。便利ですがしばらくは勉強も兼ねて、タグを見ながら制作したいので。わがままな質問ですが、お力を貸して下さい、よろしくお願いします。
No.6
8
1
32pt
調べものはひたすらgoogle
書籍を買う場合はアマゾンの評価とかみて
本屋で立ち読みをして必要と判断したら購入くらいでOK
ツール類は以下を使っています。
全てフリーで手に入ります。
■オーサリングツール
AptanaStudio
→html,css,javascriptのコードヒントが出るので愛用。少し重いけど便利。
■Editor
EmEditor
→簡単な修正etc。タブ機能が便利。
■デバグ
Firefox + Firebug
→html,css,javascriptの制作に必須と言えるくらい重宝します。
No.1
118480
26pt
環境はこちらを参照してみてはいかがでしょうか。
使いやすいかどうかは人によって千差万別ですので、ご自分に
あったものを見つけるのも勉強のうちです。
http://besunday.hp.infoseek.co.jp/html_editor.htm#htmledit
スピードアップについても、エディタ任せにする人や、メモ帳で
タグを書いていく人など、いろいろです。
まずは基本タグを覚えることから初めて、普段あまり使わない
タグは書籍を開きながらでいいとおもいますよ。
入門サイトは腐るほどありますので、とりあえずお勧めを。
ありがとうございます。「HTMLエディタ比較表」参考にさせて頂きます。
回答者様の自分にあったものを見つけるというご指摘は最もだと思います。
だから、この質問をしているのです。残念ながら回答が質問の趣旨とずれています。
今回の質問のポイントとして””実際の”使用感”や”お勧めの理由”を聞きたいのです。
自宅用で使っているとか、初心者のころに使っていたものでもかまいません。
取り入れるか取り入れないかは使用して判断するつもりです。
入門サイトも腐るほどあるからこそ、お勧めの理由が知りたいと思い質問をしています。
ポイントの振り分けはコメント欄も加味させて頂きますので、よろしければまたお願いいたします。
No.2
1504493
32pt
ご回答ありがとうございます。非常に参考になりました！
Firefoxはプラグインが充実してますよね。Sleipnirとかもうやめようかな。。。
Greasemonkeyは使い方次第で非常に便利なものになりそうですね。
どんなことでも、まずは簡単なものから作ってみるというのは大事ですね。
繰り返しては体で覚えると。
あとは仲間を見つけて情報交換か...アドバイスありがとうございました！
No.3
27631
32pt
ほぼ初心者なればこそ、html,cssはとにかく手軽に動くので自分のホームページを作るべきでしょう。幸いＣＧＩが目標には今のところなさそうなので、ＩＳＰ提供ホームページスペースでも十分かと思います。
で、最初はterapadなどのフリーのエディタでいいと思います。terapadは文字コード(Shift-JIS,EUC,UTF-8とかいうヤツ）を切り替えられるのと、タグが見やすいので便利です。エディタを選ぶ際に、UTF-8、すなわちユニコードを扱えるものを選んでください。いまはEUCを使うシステムはどんどん減っており、Linux系はほとんどがUTF-8が素直です。Windows系ではShift-JISもしぶといですが、UTF-8も多いのです。
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
HTML+CSSとかJavaScriptなどは、やりたいことがないと上達しません。よくサンプルはいたるところで見かけるのですが、それを全体の中に埋め込んで矛盾がないものにするのはそれなりにタイヘンです。
例えば、InternetExploror,FireFox,Safariなどのメジャーブラウザーで見え方がかわります。こういう勉強がもっとも時間を費やします。
なんといってもHTML,CSS,JavaScriptその他もろもろで参考になるサイトは「とほほ」だと思いますよ。老舗ですし。
http://www.tohoho-web.com/www.htm
一番、勉強になるのは企業の美しいサイトを見つけたら、右ボタンクリックして「ソースを見る」ことです。プロの仕事の跡を見ることができます。
ブログですが、自動的にＨＴＭＬを生成しているのと、ＣＳＳで複雑なコントロールをしているので人間が逆に追うのは簡単ではありません。お勧めできないです。ブログの場合は、できあがったHTMLを見るのではなく、システムに持ち込むテンプレートを理解するのがルールです。アプローチがプログラミングからになりますから、今回は忘れたらいかがですか？
さて最後に、一応、プロの製作現場の説明をさせてもらうと、エディターだけでウェブページ作っている業者は皆無だと思います。聞いたことないです。なぜならば、作業効率もさることながら、テーブルタグを間違いなくつくり、この欄だけ色を変える、タグのネストが間違っていない、といったことを人間だけで管理するのはほぼ不可能だからです。なので、お金の問題は理解しますが、オーサリングツールを知らないままではすまないことだけ、お断りしておきます。
ご丁寧な回答ありがとうございます！非常に参考になります。
やはり、エディタは”秀丸””terapad”、参考サイトは”とほほ””サルでもわかる”あたりが入門編としては良いといことですよね。
また、HPを実際に作ることが大事ですね。ブログはFC2ならhtml、CSSそれぞれで編集が可能なようですので、そのあたりなら良いかもしれませんね。
質問の文字制限の関係もあり、”ほぼ初心者”という形で質問をさせて頂いております。実は、当方もwebディレクター（名前だけ...）という形で大きなwebサイト運営に2年ほど関わっております。実際は一度も専門的な学校には行ったことがなく、企画、発注、調整業務、進行管理、最終確認が主な業務となっているため、ｺｰﾃﾞｨﾝｸﾞ、プログラムの下流工程に関しては素人毛が生えた程度です。
どの技術で何が出来るか、サイトデザイン、SEO、開発会社の打ち合わせには問題ない程度の知識をつけることが出来たのですが、やはり人に指示を送る立場として、また急な不具合修正は自分で出来るようになる為に少しづつ勉強をしている次第です。
専門家は回りに沢山いるのですが、どうしてもレベルが高いので、初心にかえって質問をさせて頂いております。
オーサリングツールも外部開発会社＆社内派遣デザイナで行っているので、自分ではFTPを使ったファイル管理ぐらいしかしてないです。
やはり、オーサリングツールが使いたいのであれば、スクールも考えたほうが良さそうですね。
本当に参考になります、有難うございました。
No.4
1105
26pt
業務で、他の方が書いたＨＴＭＬを参照・加工するような作業をしています（本格的なデザイナではありません）。
HTML Project2(ネストチェックがそこそこできる）※Free
EmEditor(HTMLやcssに色分け対応していて、色分け表示がカスタムできる)※探せばFree版あり
タグ辞典（書籍）
追加で、正規表現の参考書と正規表現が使える置換ソフトを使っています。
初心者のころに行っていた勉強方法
趣味についてのホームページをメモ帳とブラウザ、無料ＨＰスペースで作っていました。
好きなことを題材にするのが一番楽しく、気合が入りました。
無料ツールは幾つかＤＬして、肌の合うものを選ぶのが良いと思います。
ありがとうございます！参考にさせて頂きます。
フリーのソフトであればこそ、必ず足りない機能が出てきますからね。その部分をまた他のソフトで補ったり、ということの繰り返しになりますよね。正規表現の置換ソフトですか...なるほど。
「好きなことを題材にする」のは大事なことですね！
No.5
1024
32pt
ご希望の条件に合うように考えてみました。参考になれば幸いです。
【環境について】
HTMLエディタ
ez-HTMLをオススメします。HTMLソースの編集がDreamweaverライクに作業可能です。タグや属性の候補が自動でピックアップされるので、ミスの発生が減ることでしょう。AnHTTPd等を別途インストールする必要はありますが、CGI動作確認やAnother HTML-lintを使って文法チェックなどの連携も可能です。
画像加工ソフト
フリーならGIMPがいいと思います。現状でも他のソフトに比べ書籍が充実していますし、いつかはPhotoshopからこちらに移行する日がくるかもしれません。
【作業スピードアップの秘訣など】
結局、たくさんHTMLを書くこと、ということになりそうです。HTML、CSS等は、言語としての懐が広すぎて、様々な書き方が存在します。表示するコンテンツやブラウザ対応の度合いによって、効率的な書き方が異なります。試行錯誤は避けられないと思います。
その中で１点、ご紹介できるのが「同じHTMLソースを複数のページで流用できるように作成する」ということです。可能であれば、ページごとにアレンジは加えずに、そっくりそのままのHTMLソースを流用できるようにすれば、作業が楽になるかと思います。その場合、表示の変更はCSSのみで行うようにします（少し具体的にいうとidやclass属性を変更するだけで、表示をかえられるようにできればOKです）。
HTMLソースをアレンジしてしまうと、後でわけがわからなくなります。もう一度、差分の確認が必要になるので避けたいのですが、実情はプロでも効率的にできている方は少ないと思います。
ありがとうございます！非常に参考になります。
「GIMP」の画像加工は少し使ったことがありあす。普及率が高そうで個人のブログでも「使い方」を分かりやすく説明しているものが多かった気がしますね、同じ意見が聞けて安心しました。
「表示の変更はCSSのみ」というのは費用と時間といった管理面でも、またSEOの施策においても、まさに理想ですね。出来るだけ”良いサイト”を見るように、デザイナさんにもおススメを聞いてみたいと思います。
皆さん共通でおっしゃていることは、とにかく実践することですね。
モチベーションが上がて頑張りたいと思います。
No.6
81
ここでベストアンサー
32pt
調べものはひたすらgoogle
書籍を買う場合はアマゾンの評価とかみて
本屋で立ち読みをして必要と判断したら購入くらいでOK
ツール類は以下を使っています。
全てフリーで手に入ります。
■オーサリングツール
AptanaStudio
→html,css,javascriptのコードヒントが出るので愛用。少し重いけど便利。
■Editor
EmEditor
→簡単な修正etc。タブ機能が便利。
■デバグ
Firefox + Firebug
→html,css,javascriptの制作に必須と言えるくらい重宝します。
ありがとうございます！非常に参考になります。
EmEditorはFreeでも機能が豊富で良いですね。レベルに合わせてProfessional版に移行できる点もポイントが高そうです。AptanaStudioというのもDreamweaverライクに使えるようで惹かれます。重さがどれほどなのかは少し気になりますが、試してみたいです。
デバッグはFirebugでOKみたいですね。アドバイスありがとうございした！
pahoo
2009/06/03 13:39:45
7
6
W--Rabbit
2
ありがとうございます！非常に参考になります。
EmEditorはFreeでも機能が豊富で良いですね。レベルに合わせてProfessional版に移行できる点もポイントが高そうです。AptanaStudioというのもDreamweaverライクに使えるようで惹かれます。重さがどれほどなのかは少し気になりますが、試してみたいです。
デバッグはFirebugでOKみたいですね。アドバイスありがとうございした！