人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: W--Rabbit
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS DL Dreamweaver Firebug Hp
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● bg5551
●26ポイント

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

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

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

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

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

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

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

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

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

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

◎質問者からの返答

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

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

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

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

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

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

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

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


2 ● Cherenkov
●32ポイント

リンク

Greasemonkeyのリファレンス
http://wiki.greasespot.net/Main_Page
DOMのリファレンス
https://developer.mozilla.org/Ja/DOM
JavaScriptのリファレンス
https://developer.mozilla.org/Ja/JavaScript
◎質問者からの返答

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

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

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

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

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

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


3 ● RON
●32ポイント

ほぼ初心者なればこそ、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を見るのではなく、システムに持ち込むテンプレートを理解するのがルールです。アプローチがプログラミングからになりますから、今回は忘れたらいかがですか?

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

◎質問者からの返答

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

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

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

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

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

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

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

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

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


4 ● naleringar
●26ポイント

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

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

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

タグ辞典(書籍)

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


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

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

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

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


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

◎質問者からの返答

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

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

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


5 ● tommax
●32ポイント

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

【環境について】

HTMLエディタ

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

画像加工ソフト

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

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

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

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

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

◎質問者からの返答

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

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

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

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

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ