ノテータ式ホームページ作成講座でお勧めするツール達

エディタ,画像編集ソフト,FTPソフトは私と同じ物がベスト

ホームページを作成するには、エディタ,画像編集ソフト,FTPソフトが必要です。もし、この講座の内容に従ってCSSやXHTMLやPHPのテストをされるのであれば、ツールの違いに考えを巡らせお悩みになるのを避けるために、できれば私が愛用するのと同じ物を準備されるといいと思います。このページでは、エディタについてご説明し、なんと無料で手に入る一押しのソフトをご紹介します。

エディタとは

エディタはCSS,XHTML,PHPどれを書くにも無ければならない必須なツールです。

<html> <head> <title>タイトル</title> </head> <body> <h1>大見出し</h1> <p>本文 本文 本文 本文 本文 本文 本文</p> <h2>中見出し</h2> <p>本文 本文 本文 本文 本文 本文 本文</p> <h3>小見出し</h3> <p>本文 本文 本文 本文 本文 本文 本文</p> </body> </html>

これはシンプルなXHTMLの例ですが、<>とそれに囲まれたhtmlやheadなどを含むタグと言う部分や、タイトル,見出し,本文などのテキストを書くのにエディタを使用します(XHTMLについては、ここでタグを覚える必要はありません。こんなもんか〜ということで、後程解説)。

ノーテタ愛用のエディタ

私の愛用しているエディタは、なんと無料でダウンロードして使用できる「Crescnt Eve(クレセントイブ)」です。ネットのどこで調べてみても一押しの定番ですね。勿論私も太鼓判を押します。では、いくつか「Crescnt Eve」の便利さをご紹介しましょう。

【Crescnt Eveのここが素敵1】

ホームページ作成に必要なツールエディタCrescnt Eve使用例1

一文字入力すると、それを頭文字して選択可能な記述を表示してくれます。そして選択で入力が完了しますので、タイプの文字数も削減され、XHTMLの作成を強力にサポートします。


【Crescnt Eveのここが素敵2】

ホームページ作成に必要なツールエディタCrescnt Eve使用例2

CSSやXHTMLを書いていると、文字コードを変えないと動かなくなることがあるんです。一般にはSHIFT_JISでOKの場合が多いと思いますが、たまにUTF-8にしないと動かないリンクコードがあります。これなら(名前を付けて保存で)文字コードセットを変えて保存ができます。一度正しい文字セットで保存していれば、あとは文字セットの選択は自動でOKです。ここで、今でも思い出すと悍ましい!私の文字コード失敗事例をご紹介しておきましょう。

CSSには@charset "UTF-8";というような文がありまして、XHTMLに読み込まれた際にCSSファイルデータの文字コードを通知しています。ある日、単にSHIFT-JISがいいじゃんと思い、@charset "SHIFT-JIS";と変更し、ポチッと上書き保存。つまり、パソコンにはSHIFT-JISよ〜と教えつつCSSファイルはUTF-8で保存されていた訳です。・・・想像できますよね。グチャグチャやんけ〜(怒)と、この時ほどコンピューターにも感情があるんだと思う画面を見たことはありません(泣)。
XHTMLの方にも
<meta http-equiv="content-type" content="text/html; charset=SHIFT_JIS" />
という記述でコンピューターに文字コードセットを教える記述がありますので、この記述を書き換えた際には、慎重に同じ文字セットでファイルを保存してください。
(尚、このページでは、エディタの解説が目的ですので、引用しているCSSやXHTMLの記述に関しての理解は必要ありません。後程みっちりいきましょう^^)

【Crescnt Eveのここが素敵3】

ホームページ作成に必要なツールエディタCrescnt Eve使用例3

プレビューつまり、あなたのパソコンだけでXHTMLやCSSのテストをすると、ネットで見るのと全く同じに見えちゃうんです(但し、PHPや広告などは実行できません)。つまり、サーバー無しでもWebデザインの確認などかなりの部分(私の場合なら99%テストできます)をテスト&作り上げることが可能なんです。



Crescnt Eve(クレセントイブ)ダウンロードページのご紹介

この機能でまさかの無料!こちらからCrescnt Eveがダウンロードできます。
※当講座では、Crescnt Eveを使っていることを前提としておりますので、必ずご準備ください。

エディタが準備できたら(次のステップ)

エディタが手に入ったらツールの準備or確認(画像編集ソフト)です。

講座メニュー

テーマを決めよう

ツールを準備しよう

HP公開:
2011/07/23
最終更新:2014/07/16