【webサイト制作経験者の方に質問です】【いるかを必ず付けます】

私はほぼ初心者です。heml、css、(php)(JavaScript)作成・改修のために、皆さんの”環境(使用しているソフト、アドオン、webアプリなど)”と"手順"を教えて下さい。ただし、お金がないので、フリーソフト(安価なシェアソフトは△)で、実際に使用している(いた)人に限らせて頂き、その理由も必須でお願いします。

【やりたいこと】
・初級~中級者レベルのブログ、ホームページのテンプレート作成・改修
・簡単なサイトの編集業務で使用できるぐらいの手順をマスター
・作業スピードを上げたい(タグなどを簡単に記憶、挿入できる辞書機能をもったテキストエディタなどが知りたい)

回答はこの3点が理想です。
【環境(必須)】例:TeraPad、firebugなど【手順(必須ではない)作業スピードアップの秘訣など】【おススメの素材DL・お勉強サイトなど(必須ではない)】

HPビルダー、Dreamweaverとかは無しです。便利ですがしばらくは勉強も兼ねて、タグを見ながら制作したいので。わがままな質問ですが、お力を貸して下さい、よろしくお願いします。

回答の条件
  • URL必須
  • 1人1回まで
  • 登録:2009/06/03 10:42:27
  • 終了:2009/06/08 22:41:40

ベストアンサー

id:Redstock No.6

Redstock回答回数8ベストアンサー獲得回数12009/06/04 18:55:17

ポイント32pt

調べものはひたすらgoogle

http://www.google.co.jp/


書籍を買う場合はアマゾンの評価とかみて

本屋で立ち読みをして必要と判断したら購入くらいでOK

http://www.amazon.co.jp/


ツール類は以下を使っています。

全てフリーで手に入ります。

■オーサリングツール

AptanaStudio

→html,css,javascriptのコードヒントが出るので愛用。少し重いけど便利。

http://aptana.com/

■Editor

EmEditor

→簡単な修正etc。タブ機能が便利。

http://jp.emeditor.com/

■デバグ

Firefox + Firebug

→html,css,javascriptの制作に必須と言えるくらい重宝します。

https://addons.mozilla.org/ja/firefox/addon/1843

id:W--Rabbit

ありがとうございます!非常に参考になります。

EmEditorはFreeでも機能が豊富で良いですね。レベルに合わせてProfessional版に移行できる点もポイントが高そうです。AptanaStudioというのもDreamweaverライクに使えるようで惹かれます。重さがどれほどなのかは少し気になりますが、試してみたいです。

デバッグはFirebugでOKみたいですね。アドバイスありがとうございした!

2009/06/08 21:37:28

その他の回答(5件)

id:bg5551 No.1

bg5551回答回数1184ベストアンサー獲得回数802009/06/03 11:12:44

ポイント26pt

環境はこちらを参照してみてはいかがでしょうか。

使いやすいかどうかは人によって千差万別ですので、ご自分に

あったものを見つけるのも勉強のうちです。

http://besunday.hp.infoseek.co.jp/html_editor.htm#htmledit

スピードアップについても、エディタ任せにする人や、メモ帳で

タグを書いていく人など、いろいろです。

まずは基本タグを覚えることから初めて、普段あまり使わない

タグは書籍を開きながらでいいとおもいますよ。

入門サイトは腐るほどありますので、とりあえずお勧めを。

http://www3.plala.or.jp/binder/kouza/memotyou.html

id:W--Rabbit

ありがとうございます。「HTMLエディタ比較表」参考にさせて頂きます。

回答者様の自分にあったものを見つけるというご指摘は最もだと思います。

だから、この質問をしているのです。残念ながら回答が質問の趣旨とずれています。

今回の質問のポイントとして””実際の”使用感”や”お勧めの理由”を聞きたいのです。

自宅用で使っているとか、初心者のころに使っていたものでもかまいません。

取り入れるか取り入れないかは使用して判断するつもりです。

入門サイトも腐るほどあるからこそ、お勧めの理由が知りたいと思い質問をしています。

ポイントの振り分けはコメント欄も加味させて頂きますので、よろしければまたお願いいたします。

2009/06/03 22:46:37
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922009/06/03 21:01:30

ポイント32pt
  • Firefox + Firebug + GreasemonkeyでJavaScriptの勉強。
  • 自分が欲しい機能を作って覚える。繰り返す。
  • エディタはTeraPadで十分。
  • ブログを書く、読む。
  • 仲間を見つけて情報交換。

リンク

Greasemonkeyのリファレンス
http://wiki.greasespot.net/Main_Page
DOMのリファレンス
https://developer.mozilla.org/Ja/DOM
JavaScriptのリファレンス
https://developer.mozilla.org/Ja/JavaScript
id:W--Rabbit

ご回答ありがとうございます。非常に参考になりました!

Firefoxはプラグインが充実してますよね。Sleipnirとかもうやめようかな。。。

Greasemonkeyは使い方次第で非常に便利なものになりそうですね。

どんなことでも、まずは簡単なものから作ってみるというのは大事ですね。

繰り返しては体で覚えると。

あとは仲間を見つけて情報交換か...アドバイスありがとうございました!

2009/06/04 00:14:42
id:ttakao No.3

RON回答回数276ベストアンサー獲得回数312009/06/04 13:31:50

ポイント32pt

ほぼ初心者なればこそ、html,cssはとにかく手軽に動くので自分のホームページを作るべきでしょう。幸いCGIが目標には今のところなさそうなので、ISP提供ホームページスペースでも十分かと思います。

で、最初は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を生成しているのと、CSSで複雑なコントロールをしているので人間が逆に追うのは簡単ではありません。お勧めできないです。ブログの場合は、できあがったHTMLを見るのではなく、システムに持ち込むテンプレートを理解するのがルールです。アプローチがプログラミングからになりますから、今回は忘れたらいかがですか?

さて最後に、一応、プロの製作現場の説明をさせてもらうと、エディターだけでウェブページ作っている業者は皆無だと思います。聞いたことないです。なぜならば、作業効率もさることながら、テーブルタグを間違いなくつくり、この欄だけ色を変える、タグのネストが間違っていない、といったことを人間だけで管理するのはほぼ不可能だからです。なので、お金の問題は理解しますが、オーサリングツールを知らないままではすまないことだけ、お断りしておきます。

id:W--Rabbit

ご丁寧な回答ありがとうございます!非常に参考になります。

やはり、エディタは”秀丸””terapad”、参考サイトは”とほほ””サルでもわかる”あたりが入門編としては良いといことですよね。

また、HPを実際に作ることが大事ですね。ブログはFC2ならhtml、CSSそれぞれで編集が可能なようですので、そのあたりなら良いかもしれませんね。

質問の文字制限の関係もあり、”ほぼ初心者”という形で質問をさせて頂いております。実は、当方もwebディレクター(名前だけ...)という形で大きなwebサイト運営に2年ほど関わっております。実際は一度も専門的な学校には行ったことがなく、企画、発注、調整業務、進行管理、最終確認が主な業務となっているため、コーディング、プログラムの下流工程に関しては素人毛が生えた程度です。

どの技術で何が出来るか、サイトデザイン、SEO、開発会社の打ち合わせには問題ない程度の知識をつけることが出来たのですが、やはり人に指示を送る立場として、また急な不具合修正は自分で出来るようになる為に少しづつ勉強をしている次第です。

専門家は回りに沢山いるのですが、どうしてもレベルが高いので、初心にかえって質問をさせて頂いております。

オーサリングツールも外部開発会社&社内派遣デザイナで行っているので、自分ではFTPを使ったファイル管理ぐらいしかしてないです。

やはり、オーサリングツールが使いたいのであれば、スクールも考えたほうが良さそうですね。

本当に参考になります、有難うございました。

2009/06/04 14:37:49
id:naleringar No.4

naleringar回答回数110ベストアンサー獲得回数52009/06/05 01:50:57

ポイント26pt

業務で、他の方が書いたHTMLを参照・加工するような作業をしています(本格的なデザイナではありません)。

HTML Project2(ネストチェックがそこそこできる)※Free

EmEditor(HTMLやcssに色分け対応していて、色分け表示がカスタムできる)※探せばFree版あり

タグ辞典(書籍)

追加で、正規表現の参考書と正規表現が使える置換ソフトを使っています。


初心者のころに行っていた勉強方法

趣味についてのホームページをメモ帳とブラウザ、無料HPスペースで作っていました。

好きなことを題材にするのが一番楽しく、気合が入りました。

無料ツールは幾つかDLして、肌の合うものを選ぶのが良いと思います。


http://www.vector.co.jp/

id:W--Rabbit

ありがとうございます!参考にさせて頂きます。

フリーのソフトであればこそ、必ず足りない機能が出てきますからね。その部分をまた他のソフトで補ったり、ということの繰り返しになりますよね。正規表現の置換ソフトですか...なるほど。

「好きなことを題材にする」のは大事なことですね!

2009/06/06 11:18:03
id:tommax No.5

tommax回答回数102ベストアンサー獲得回数42009/06/06 09:37:34

ポイント32pt

ご希望の条件に合うように考えてみました。参考になれば幸いです。

【環境について】

HTMLエディタ

ez-HTMLをオススメします。HTMLソースの編集がDreamweaverライクに作業可能です。タグや属性の候補が自動でピックアップされるので、ミスの発生が減ることでしょう。AnHTTPd等を別途インストールする必要はありますが、CGI動作確認やAnother HTML-lintを使って文法チェックなどの連携も可能です。

画像加工ソフト

フリーならGIMPがいいと思います。現状でも他のソフトに比べ書籍が充実していますし、いつかはPhotoshopからこちらに移行する日がくるかもしれません。

【作業スピードアップの秘訣など】

結局、たくさんHTMLを書くこと、ということになりそうです。HTML、CSS等は、言語としての懐が広すぎて、様々な書き方が存在します。表示するコンテンツやブラウザ対応の度合いによって、効率的な書き方が異なります。試行錯誤は避けられないと思います。

その中で1点、ご紹介できるのが「同じHTMLソースを複数のページで流用できるように作成する」ということです。可能であれば、ページごとにアレンジは加えずに、そっくりそのままのHTMLソースを流用できるようにすれば、作業が楽になるかと思います。その場合、表示の変更はCSSのみで行うようにします(少し具体的にいうとidやclass属性を変更するだけで、表示をかえられるようにできればOKです)。

HTMLソースをアレンジしてしまうと、後でわけがわからなくなります。もう一度、差分の確認が必要になるので避けたいのですが、実情はプロでも効率的にできている方は少ないと思います。

id:W--Rabbit

ありがとうございます!非常に参考になります。

「GIMP」の画像加工は少し使ったことがありあす。普及率が高そうで個人のブログでも「使い方」を分かりやすく説明しているものが多かった気がしますね、同じ意見が聞けて安心しました。

「表示の変更はCSSのみ」というのは費用と時間といった管理面でも、またSEOの施策においても、まさに理想ですね。出来るだけ”良いサイト”を見るように、デザイナさんにもおススメを聞いてみたいと思います。

皆さん共通でおっしゃていることは、とにかく実践することですね。

モチベーションが上がて頑張りたいと思います。

2009/06/06 11:33:22
id:Redstock No.6

Redstock回答回数8ベストアンサー獲得回数12009/06/04 18:55:17ここでベストアンサー

ポイント32pt

調べものはひたすらgoogle

http://www.google.co.jp/


書籍を買う場合はアマゾンの評価とかみて

本屋で立ち読みをして必要と判断したら購入くらいでOK

http://www.amazon.co.jp/


ツール類は以下を使っています。

全てフリーで手に入ります。

■オーサリングツール

AptanaStudio

→html,css,javascriptのコードヒントが出るので愛用。少し重いけど便利。

http://aptana.com/

■Editor

EmEditor

→簡単な修正etc。タブ機能が便利。

http://jp.emeditor.com/

■デバグ

Firefox + Firebug

→html,css,javascriptの制作に必須と言えるくらい重宝します。

https://addons.mozilla.org/ja/firefox/addon/1843

id:W--Rabbit

ありがとうございます!非常に参考になります。

EmEditorはFreeでも機能が豊富で良いですね。レベルに合わせてProfessional版に移行できる点もポイントが高そうです。AptanaStudioというのもDreamweaverライクに使えるようで惹かれます。重さがどれほどなのかは少し気になりますが、試してみたいです。

デバッグはFirebugでOKみたいですね。アドバイスありがとうございした!

2009/06/08 21:37:28
  • id:pahoo
    勉強を兼ねてということでしたら、中途半端なツールを使うより、リファレンスをPCに入れておくとよろしいかと。
    私は下記の3つを入れて、あとは普通のエディタで書いています。

    ・標準HTML,CSS,JavaScript辞典(インプレス)pdf版
    ・必携 HTML/CSS, JavaScript Webブラウザ互換性辞典(インプレス)pdf版
    ・PHP日本語マニュアル(php.gr.jp)chm版

    本当はフリーのリファレンスやエディタを紹介できたらいいのですが、あいにく心当たりがないので、コメント欄にて。
  • id:W--Rabbit
    コメントありがとうございます。

    いくつか質問をさせて頂きますので、お答え頂けるのであれば、
    ぜひ一度、回答欄よりお答え頂ければ幸いです。

    ・エディタはメモ帳のような、OSに付属していたソフトということでしょうか?
    ・辞典の実際の活用方法とお勧めの理由を教えて下さい。
     (主に検索&タグ・ソースコードをコピペしながら活用していくような形でしょうか?)
    ・エラーチェックなどはどの様にしていますか?
    ・初心者のころに行っていた勉強方法があれば教えて下さい。
  • id:W--Rabbit
    回答の受付を終了させて頂きます。

    予想以上のご回答ありがとうございました。
    皆様の有益なアドバイスの数々、非常に参考になりました^^

    ・エディタはTeraPadを使用しているので、EmEditor・ez-HTMLを試してみます。
    ・ブラウザ(プラグイン)はFirefox + Firebug使用して、Greasemonkeyも使い方も調べて考慮。
    ・今の自分の能力と比較して、AptanaStudioの導入も考えてみます。

    ほぼ、同じ回答になるかと思っていたのですが、やはり大量のフリーソフトが出ているだなと、
    特にテキストエディタはすごい。使ってみてのウィークポイントが気になったら変更してみる
    という形でいきたいと思います。

    皆様のアドバイスに共通していたのは、とにかく見る・書く・ソフトは使ってみるということ、
    自分のレベルに合わせて試行錯誤してみるのも大事ですね。

    今回の回答は本当に優劣が付けづらいのですが、下記の点で評価をさせて頂きます。

    1、紹介して頂いたソフトと、その理由が書かれていること
    2、アドバイスの量と質
    3、回答のスピードと、コメントの量

    また、機会がありましたら、よろしくお願いします!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません