トップページ役立つソフト>Crescent Eve の使い方

Crescent Eve の使い方

Crescent Eve を使いこなしてホームページを作りましょう。 このページでは、Crescent Eve というテキストエディタを紹介しています。

ダウンロードする

Crescent Eveは無料で使うことができるソフトです。Crescent Eveを利用するには、まずパソコンに導入します。以下に、Crescent Eveをダウンロードする手順を紹介します。

保存をクリック
保存ボタンをクリックします。

デスクトップに保存
ダウンロード先をデスクトップにし、保存ボタンをクリックします。

ダウンロードはすぐ終わる
ダウンロード時間はわずかで、すぐ完了します。

閉じるをクリックしてダウンロードは終了
ダウンロードが完了したら、閉じるボタンをクリックして閉じます。

上に戻る

インストールする

インストールはダウンロードしたデータを自分のパソコンに取り込む作業です。デスクトップに.exeという拡張子のついたアイコンができます。これがインストール用のアイコンです。 ダブルクリックするとインストールが始まります。

デスクトップのアイコンをダブルクリックし、インストールする
デスクトップにアイコンができますから、ダブルクリックするとインストールが始まります。

セキュリティの警告がでるが、実行する
セキュリティの警告がでますが、気にせずに、実行ボタンをクリックします。

インストール先は特に変更しない
インストール先は特に変更することはありません。次へボタンをクリックします。

オプションはすべてにチェックをいれる
すべてチェックをいれ、次へボタンをクリックします。

インストール完了
インストールが完了したら、閉じるボタンをクリックします。

新しいアイコン(絵文字)ができる
インストールが完了すると、デスクトップに新しいCrescent Eveのアイコンができます。 前の.exeの付いたアイコンは不要なのでごみ箱へいれます。

インストールのポイント

セキュリティの警告は必ず出ますので、信頼のおけるサイトであれば続行して問題はありません。ただし、あくまで自己責任においておこなって下さい。
.exeの拡張子のついたファイルはインストール後は不要なので、普通はごみ箱へいれてかまいません。

上に戻る

Crescent Eveを開く

デスクトップのアイコンをダブルクリックするとCrescent Eveの新規作成画面が開きます。
デスクトップのアイコンをダブルクリックすると、Crescent Eveの新規作成画面が開きます。メモ帳とよく似ている画面です。一度開けば、新規作成、ファイルを開く、保存すべてがCrescent Eveの画面からできます。

上に戻る

タグを打つ前に

  • 入力モードを切り替えます。
  • タグを打つ前に、半角英数か直接入力に切り替えて。

タグを打ち始める前に、入力モードが半角になっているか、確認します。半角にするには左上の半角/全角切り替えキー、または、タスクバーの「あ」をクリックして半角英数か直接入力に。「あ」が「A」になっていればOKです。

タグ打ちする

ドキュメントタイプが反転表示される
< を打つと、!DOCTYPEで始まるテキストが反転表示されるので、エンターキーで確定します。ダブルクリックしても確定できます。

ドキュメントタイプをエンターキーで確定する
!DOCTYPE---が入力されました。DOCTYPE宣言といいます。 DOCTYPE宣言は一字一句打っていくのは面倒ですし、入力ミスがあっては困りますので、自動的に入力してくれるこのような機能はとてもたすかります。

HTMLタグが自動で出てくる
< を打つと、htmlが反転表示されます。

エンターキーまたはダブルクリックで入力する
エンターキーで確定します。ダブルクリックしても確定できます。

!DOCTYPEのポイント

DOCTYPE宣言はテスト打ちのときや、未完成のときには、いれなくてもよいですが、ホームページをインターネット上にアップロードするときには、必ずいれるようにします。

上に戻る

さらにタグを打ちます

ヘッダ部の<head>と</head>を打ち、ボディ部の<body>と</body>を打ちます。

head,bodyを打つ

headの終タグを打つ
ヘッダ部の<head>を打つと、閉じタグ</head>が表示されるので、選択しエンターキーで確定します。または、ダブルクリックして確定します。

終タグを打っておくと閉じ忘れを防げる
<body>と</body>を打ちます。閉じタグを先に打っておくと、閉じ忘れを防げます。本文の内容は<body>と</body>の間に書いていきます。

このように次に打つべきタグがあらかじめ表示されるので、選択→確定を繰り返して、タグを打つことができます。タグ入力機能は便利で、作業効率が格段にアップします。

以下、基本のタグについてはHTMLのタグとは?を参照してください。

上に戻る

名前を付けて保存

ファイルから名前を付けて保存をクリック
ある程度タグうちまたは、日本語入力がすんだら、
名前をつけて保存します。ファイル→名前を付けて保存をクリックします。

名前を付けて保存する
保存する場所を確認して、名前を付け、保存ボタンをクリックします。

次からは上書き保存します。
左から3つめのアイコン保存用のアイコンで保存するをクリックすれば保存できますから、マメに保存しましょう。誤って消してしまった!ということが防げます。

ファイル名は始めは日本語で付けてもかまいませんが、ホームページが完成してきたら、半角英数字に変更します。始めからきちんと整理してファイルを作成してあれば、その必要はありませんし、そのほうがよいと思います。

上に戻る

ファイルを開く

ファイルを開くアイコンをクリックしてファイルを開く。
作業したファイルを開きたいときは、2番目のアイコンファイルを開くアイコンをクリックします。

開きたいファイルを選択して、開くボタンを押す

開きたいファイル名をクリックして選択→右下の開くボタンをクリックするとファイルが開きます。
またはファイル名をダブルクリックしても開きます。

上に戻る

ツール

ツールからメニューを表示させ、必要な機能を選択する
ツールからメニューを表示させ、必要な機能を選択します。

文法チェック

文法チェック機能でミスを直す

文法のチェックをしてくれます。指摘されたミスを直していけば、正しいHTML文書を書くことができます。
F7キーを押しても表示されます。このようなキーの使い方をショートカットキーといいます。覚えておくと、効率よく作業ができます。文法チェックを非表示にするときはEscキーを押します。

上に戻る

画像の挿入

画像はあらかじめ作成して、マイピクチャフォルダに保存しておきます。デジカメやカメラ付きケータイで撮影し、画像編集ソフトでウェブ用に小さくしておきます。画像をパソコンに取り込むや、画像の編集ソフトVixを参照してください。

画像の挿入機能はすばやく画像を入れられる
ツール→画像の挿入をクリックします。

挿入したい画像のあるファイルを選択して、開くボタンをクリックします。
挿入したい画像のあるファイルを選択して→開くボタンをクリックします。

挿入したい画像を選択して開くをクリック。
挿入したい画像を選択して→開くボタンをクリックします。

画像が挿入された状態。
画像が挿入されました。

上に戻る

画像の大きさ

画像の大きさは、あらかじめ画像編集ソフトを使って調整しておきます。デジカメはもちろんのこと、カメラ付き携帯電話でとったものでもかなりの大きさなので、ホームページにそのまま使うことはできません。画像編集ソフトについてはこちらを参照してください。

画像のalt属性

画像を挿入したところ。alt属性は画像をテキストで表現した内容をいれます。
画像を挿入したところ。alt="" をオルト属性といいます。alt属性は画像をテキストで表現した内容を入れることになっています。

画像を挿入した場合、alt=""のようにオルト属性を入れるか、入れないかの選択ができます。選択は、ツール→Crescent Eve起動時の設定でおこなえます。

HTML4.0以降の文法ではalt属性は、入れる規則になっています。alt属性は画像のかわりにテキスト(文章)で表現するものです。万一画像が表示されない場合や、テキストだけのブラウザで閲覧している人もいるため、このような場合に備えて配慮することが求められています。

装飾用の画像で、alt属性を入れることで、かえって内容がわかりにくくなってしまう場合には、alt=" "のように半角スペースを入れておくことにします。

上に戻る

HTMLプレビュー

プレビュー機能で仕上がりを見ながら作業ができる
プレビュー機能はタグうちしたらすぐに、確認ができる機能です。プレビューを見ながら作業ができるので能率的です。
F8キーを押しても表示できます。非表示にするにはEscキーを押します。

ブラウザ表示

ブラウザ表示は実際にブラウザで表示した状態で見る機能です。ページレイアウトの確認や完成時には必ず、ブラウザ表示を見て確認する必要があります。
ツール→「ブラウザでプレビュー」を開き、ブラウザの設定をおこないます。

色の挿入

色を視覚的に挿入できる機能です。

色の選択機能があり、自由に色をつかえる
始めに開く色の画面

Windows標準のほうが色を選びやすい
Windows標準のボタンで開く画面

色の挿入では、自由に色使いができるのですが、ウェブセーフカラー(Web Safe Color)があることを覚えておきましょう。

上に戻る


ウェブセーフカラーとは?

ウェブセーフカラーの色数は216色で、異なるOS(WindowsやMacintoshなどの)でも同じ色で表示されるようになっています。配色に迷うときは、ウェブセーフカラーを使うと決めやすいですし、閲覧している環境が変わっても、同じ色で見てもらえるわけです。(ただし、パソコンの画面によって多少色合いは変化します。)

他に、色名で指定できる色があり、red、greenなど16色が決められています。練習のときやテストするときは、色名指定すると簡単でよいと思います。
スタイルシートはh2 { color: red ;}のように指定します。

ウェブセーフカラーが目で見てわかるウェブサイトがいろいろあります。気に入ったサイトをお気に入りにいれておくと、参照しやすいので便利だと思います。このサイトではWeb Color 216をご紹介しています。


リンクの挿入

<a href="2-01メモ帳に書く.html">リンクの挿入</a>
のようにリンクの指定ができます。
リンクの指定は必ず使うものです。メニューを作るときなど、タグ打ちができるようにしておくと、作業はかえって早くなります。覚えてしまえば、以外に簡単です。(メニューは目次のようなもので、クリックするとページが開く仕組み。)

<a href="リンク先のURI">リンク元のテキスト</a>のように書けばよいのです。

タグ打ちワンポイント

< >の打ち方は、シフト押しながら、「<」と「>」キーを押します。「<」と「>」キーはMキーの隣にあります。
日本語入力から、半角に切り替えるのを忘れずに。日本語入力はまとめてやっておき、その後で、半角に切り替えて、HTMLタグを打つと効率がよいです。
< >と< >は似ていますが、前者は半角、後者は全角です。打つと同じように打てるし、一見して、同じように見えるので、要注意です。

役立つソフト前のページ | 次のページ画像の編集ソフトVix

上に戻る

inserted by FC2 system