XHTML+CSSを勉強中です。タグ打ちで実際に作ってみようと思っています。

しかし、色々ソースを見てみると、<div id="container">や、margin:~みたいに、大体使われている言語が決まっていることに(ようやく)気付きました!!
もしや、これらの英語を一々書く必要が無いのでは・・・!?
そこで、XHTMLやCSSを最も効率よく記述できるエディタを教えて下さい。(有料でも可です。)
一応、DreamWeaverCS3と、秀丸エディタと、NoEditerは手に入れています。これらも含めて、メリットと一緒に書いて頂けると嬉しいです。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:
  • 終了:2007/09/12 22:40:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答11件)

id:odacom1126 No.1

回答回数61ベストアンサー獲得回数5

ポイント15pt

タグ打ちでやられるならば、ホームページ作成ソフトを使うのはNGだと思います。言語の勉強にもなりませんし、不要なタグがいっぱい入ってきて、綺麗な言語のサイトは作れなくなります。

言語を直接うちこんでいくべきです。

EditorはEM EDITORがお勧めです。保存形式も選べるし、XHTMLに対応できてます。

http://search.vector.co.jp/search?query=EM+editor

最も効率的に勉強できるのは、やはりテンプレートを落としてきてそれを改造しながら変化を見ていくという手法が最もいいのではないかと思います。

id:chichikitoku

いつもありがとうございます!!

「テンプレートを落としてきてそれを改造」はやってみているんですが、ケータイの予測機能(あ、と打ったら、ありがとうが予測されるみたいな・・・)があればと思い。。。

2007/09/06 09:12:36
id:KUROX No.2

回答回数3542ベストアンサー獲得回数140

ポイント15pt

■DreamWeaverCS3

http://www.non-period.com/be/dw/cs3/index.html

出来る限りツールで生成したほうがよいのでは。

 <div id="container">

などは、ツールの自動生成のように見えます。

別にcontainerである必要性はないので。

ツールが生成したタグをみて、妥当かどうかを見たほうが

良いと思います。

id:chichikitoku

うーん、タグ打ちを優先させたいのです。。。基礎から分からないもんで^^;

2007/09/06 09:12:43
id:kuverawalk No.3

回答回数11ベストアンサー獲得回数0

ポイント15pt

http://past.openvista.jp/blog/article/2004/04/sted.php

CSSを書く時に重宝しています。

記述の効率が良くなるわけではありませんが、可読性がよくなります。

id:chichikitoku

おお!!

これは良い気がします!!

見やすそうですね。

2007/09/06 09:13:31
id:wizemperor No.4

回答回数379ベストアンサー獲得回数52

ポイント15pt

DreamweaverCS3があるのであれば、それを使ったほうがいいでしょう

メリットは、やはりプロユースの専用ソフトであるということです。

とはいえ、ただタグ打ちするだけでは少し高機能なエディタというところでしょう。

もう少し進んで、サイトの管理やFireworksやPhotoshopとの連携が必要になったときに威力を発揮します。

それまでに慣れておくという意味でもDWでいいのではないでしょうか。DWにもタグ補完機能(途中まで入力すると入力候補を表示してくれる機能)がついてますよ。

http://q.hatena.ne.jp

id:chichikitoku

DWも勉強したいのですが、多分、タグを理解してからじゃないと、すごく便利に感じない気がしまして。。。

でも、高機能エディタとして使えるなら、やってみます。

2007/09/06 09:14:51
id:makoohira No.5

回答回数136ベストアンサー獲得回数4

ポイント15pt

>><div id="container">や、margin:~

>>もしや、これらの英語を一々書く必要が無いのでは・・・!?

これは、xhtmlソース内を簡略化するために書くもので、書かなければ、

xhtmlソース内にcssが度々出てきて、美しくないソースになります。

それプラスIE6,IE7,firefox,opera,Safariなどなど、主要ブラウザではcssの対応状況、仕様の遵守度合などに差があり、全てに対応するように書く必要があります。

特にIE6のバグは致命的で、優に100カ所を超えます。(CSSバグリスト参照)

大抵の場合、IE6のバグ対策として、<BODY>にtext-align:center;

一番外側に<div id="container">などを置き、#containerに、margin:0 auto;とtext-align:left;

という一見、無駄に見えるCSSを埋め込みます。

これについて無駄だと言われているなら、実際DLして、ローカルでいろいろ試してみればわかるでしょう。

IE6でのみ表示が崩れることになります。

IE6さえ見捨てれば、CSSはより簡単で美しくなるでしょうけどね。

もっとも高速かつ、無駄のないツールとしては、

耳かきエディット + firefox webdeveloper[日本語版](両方無料)でしょう。

耳かきエディットはxhtmlから各種スクリプトまでお任せのテキストツールで、

DWのマルチファイル検索等も搭載。DreamWeaverの機能を一部に抑えて、処理負荷を無くした程度のツールです。cssは1.0までしか対応していない。

秀丸よりDWに近いが、処理負荷はなく、優秀、だがMac用。

特に、仕様に沿ったxhtml+cssを書こうと考えるなら、firefox webdeveloper[日本語版]は必須ツールと言って良いでしょう。

同じfirefoxアドオンでは、firebugも英語版しかないけど、評判は上々のようです。

■CSSバグリスト

http://cssbug.at.infoseek.co.jp/

■耳かき

http://www.mimikaki.net/

■firefox webdeveloper[日本語版]

http://www.infoaxia.com/tools/webdeveloper/

id:chichikitoku

firefox webdeveloperは入れてあります。(その他、色々なfirefoxアドオンも)

miって、耳かきって言うんですね。winなので使えませんが。。。

2007/09/06 09:18:48
id:kuro0680 No.6

回答回数20ベストアンサー獲得回数0

ポイント15pt

ezHTML はいかがでしょうか。

W3C 準拠ですから。

ez-HTML

id:chichikitoku

おお!!

これも分かりやすそうですね。

2007/09/06 09:20:39
id:b-wind No.7

回答回数3344ベストアンサー獲得回数440

ポイント14pt

フリーのHTMLエディタを比較してみる。

HTMLエディタ比較 (フリーソフトウェア)

このあたりから御自身にあったものを選ぶのが良さそうですね。


自分は

EclipseHTMLEditor - Project Amateras

html+-mode

このあたりを使っていますが、どちらもいきなり使うには(環境設定等)敷居が高いです。

id:chichikitoku

おー、難しそーー!!

・・・タグ補完機能(途中まで入力すると入力候補を表示してくれる機能)が付いていて、

出来ればHTMLとCSSの両方のタグ補完機能があって、そんでもって、カラフルで見易いやつがあれば、買ってでも使いたいのですが。。。

2007/09/06 11:15:21
id:koori No.8

回答回数2ベストアンサー獲得回数0

ポイント14pt

■Expression Web

MicrosoftがDreamWeaver等に対抗すべく、作成したホームページ作成ソフトです。

「ホームページ作成ソフトを使うのはNG」と仰有る方もいますが、このソフトはむしろ、タグ打ちに適したソフトだと感じています。

XHTMLやCSSの文法的におかしい部分があれば、リアルタイムで問題箇所を表示してくれますし、インテリセンスという入力補完機能もあります。

例えば < と入力するだけで、divを含む入力可能なタグ一覧を表示され、一覧からタグを選択してEnterかSpaceを押せば、残りの部分を自動的に入力することができます。

また、文法的に問題のあるタグは一覧に表示されません(例えば、白紙のテキストで < と入力しても div は出ず、html だけが一覧に出てきます。なぜなら、htmlの最初でdivは使えないから!)ので、自然と正しいXHMTLを書く癖が身につきます。

今なら評価版もあるので、試しに使ってみてはいかがでしょうか?

Expression

id:chichikitoku

ありがとうございます!!

これもチェックしていたのですが、評価版をダウンロードしてみます。

買うとなったら、今が買いなのかな~

2007/09/06 12:39:57
id:minesouta No.9

回答回数23ベストアンサー獲得回数2

ポイント14pt

HTMLAssistant


タスクトレイ常駐型のHTML+CSS入力補完プログラムです。

HTMLは「<」を打ったとき補完が始まり、候補が絞り込まれるまで要素を入力するか、方向キー選択し、Tabもしくはエンターキーで入力されます。対のあるタグは「>」を打つと閉じタグを補完します。

CSSはホットキー(デフォルトでは Alt + S)を押すことで補完が始まります。

ちなみに補完を中断したいときはEscキー。<br>はShift+エンターキーです。readmeに色々書いてあります。


お気に入りのテキストエディタで使えるのでお勧めです。

窓の杜の記事

id:chichikitoku

ありがとうございます!!

これも手に入れました。(まだ効果の程がわかりませんが^^;)

2007/09/07 08:24:24
id:foohoge No.10

回答回数22ベストアンサー獲得回数3

ポイント14pt

Crescent Eve

http://www.kashim.com/eve/index.html

フリーソフトです。

文法チェック機能も付いていますし、タグを打てばリアルタイムにプレビューに反映されます。

また、入力支援機能が強力で、ある程度タグを知っている方であればスイスイ入力していけると思います。

http://www.forest.impress.co.jp/article/2004/12/09/crescenteve.h...

http://www.vector.co.jp/magazine/softnews/070324/n0703241.html



また、入力補完だけならHTMLAssistantっていうソフトもあります。

http://hp.vector.co.jp/authors/VA036013/#htmlassistant

http://www.forest.impress.co.jp/article/2007/03/29/htmlassistant...

id:chichikitoku

そうそう。

ためしにDWでタグ打ちをやってみたのですが、実際にプレビューを確認しながら出来ると、最初は良いのかもしれませんね。

なれてきたら、文章だけでやるべきなのですが。。。

2007/09/07 08:26:24
id:tagcap No.11

回答回数1ベストアンサー獲得回数0

ポイント14pt

エディタ全般としてはEmeditor、terapad、秀丸が全てにおいて、オールマイティーな感じでよろしいかと思われます(ほとんど出ているようですね;)。

HTMLや、CSSといったものであれば、ez-htmlを一番オススメしたいのですが、これまた、既に出ていました。

ならば、(参考意見として)HTML Project2をオススメします。こちらもHTMLやCSSを対応していますので。

(もしかしたらこちらの方が)HTML構造が理解しやすいかと思います。タグの位置をいろいろ試行錯誤しながら、正確な対応の位置を探すこれはいい経験だと思います(今も時々;;)。

ほかにも、挙げておきます(候補を挙げるだけですから、的確ではないかもしれません、あくまで参考意見として)。

・TTT Editorは本格的にタグ打ちするのにいいのでは?

http://homepage1.nifty.com/taka36/t3editor.htm

・Stylenoteはスタイルシートを重視しているのかと。

http://www.wht.mmtr.or.jp/~riki/style/

・HeTeMuLu Creatorはタグ挿入で便利かと思います。

http://hosiken.jp/

ただ、ウェブページの内容が一番大事ですから、そのあとに、やりたいこと、そして、構造が出てくると、ちゃんとしたタグ打ち(マークアップ)が出来るかもしれませんね

id:chichikitoku

ありがとうございます!!

そうですね。

どういうページにするか、っていうデザインカンプをちゃんと作って、きちんとマークアップしとく、っていうのが重要なんですね。

あー、時間がある時にもっと勉強しとくんだった。。。

2007/09/08 11:15:43

コメントはまだありません

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

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

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

回答リクエストを送信したユーザーはいません