トップページ >役立つソフト>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の画面からできます。
タグを打つ前に
タグを打ち始める前に、入力モードが半角になっているか、確認します。半角にするには左上の半角/全角切り替えキー、または、タスクバーの「あ」をクリックして半角英数か直接入力に。「あ」が「A」になっていればOKです。
タグ打ちする
< を打つと、!DOCTYPEで始まるテキストが反転表示されるので、エンターキーで確定します。ダブルクリックしても確定できます。
↓
!DOCTYPE---が入力されました。DOCTYPE宣言といいます。
DOCTYPE宣言は一字一句打っていくのは面倒ですし、入力ミスがあっては困りますので、自動的に入力してくれるこのような機能はとてもたすかります。
< を打つと、htmlが反転表示されます。
↓
エンターキーで確定します。ダブルクリックしても確定できます。
!DOCTYPEのポイント
DOCTYPE宣言はテスト打ちのときや、未完成のときには、いれなくてもよいですが、ホームページをインターネット上にアップロードするときには、必ずいれるようにします。
さらにタグを打ちます
ヘッダ部の<head>と</head>を打ち、ボディ部の<body>と</body>を打ちます。
↓
ヘッダ部の<head>を打つと、閉じタグ</head>が表示されるので、選択しエンターキーで確定します。または、ダブルクリックして確定します。
↓
<body>と</body>を打ちます。閉じタグを先に打っておくと、閉じ忘れを防げます。本文の内容は<body>と</body>の間に書いていきます。
このように次に打つべきタグがあらかじめ表示されるので、選択→確定を繰り返して、タグを打つことができます。タグ入力機能は便利で、作業効率が格段にアップします。
以下、基本のタグについてはHTMLのタグとは?を参照してください。
名前を付けて保存
ある程度タグうちまたは、日本語入力がすんだら、
名前をつけて保存します。ファイル→名前を付けて保存をクリックします。
保存する場所を確認して、名前を付け、保存ボタンをクリックします。
次からは上書き保存します。
左から3つめのアイコンをクリックすれば保存できますから、マメに保存しましょう。誤って消してしまった!ということが防げます。
ファイル名は始めは日本語で付けてもかまいませんが、ホームページが完成してきたら、半角英数字に変更します。始めからきちんと整理してファイルを作成してあれば、その必要はありませんし、そのほうがよいと思います。
ファイルを開く
作業したファイルを開きたいときは、2番目のアイコンをクリックします。
↓
開きたいファイル名をクリックして選択→右下の開くボタンをクリックするとファイルが開きます。
またはファイル名をダブルクリックしても開きます。
ツール
ツールからメニューを表示させ、必要な機能を選択します。
文法チェック
文法のチェックをしてくれます。指摘されたミスを直していけば、正しいHTML文書を書くことができます。
F7キーを押しても表示されます。このようなキーの使い方をショートカットキーといいます。覚えておくと、効率よく作業ができます。文法チェックを非表示にするときはEscキーを押します。
画像の挿入
画像はあらかじめ作成して、マイピクチャフォルダに保存しておきます。デジカメやカメラ付きケータイで撮影し、画像編集ソフトでウェブ用に小さくしておきます。画像をパソコンに取り込むや、画像の編集ソフトVixを参照してください。
ツール→画像の挿入をクリックします。
↓
挿入したい画像のあるファイルを選択して→開くボタンをクリックします。
↓
挿入したい画像を選択して→開くボタンをクリックします。
↓
画像が挿入されました。
画像の大きさ
画像の大きさは、あらかじめ画像編集ソフトを使って調整しておきます。デジカメはもちろんのこと、カメラ付き携帯電話でとったものでもかなりの大きさなので、ホームページにそのまま使うことはできません。画像編集ソフトについてはこちらを参照してください。
画像のalt属性
画像を挿入したところ。alt="" をオルト属性といいます。alt属性は画像をテキストで表現した内容を入れることになっています。
画像を挿入した場合、alt=""のようにオルト属性を入れるか、入れないかの選択ができます。選択は、ツール→Crescent Eve起動時の設定でおこなえます。
HTML4.0以降の文法ではalt属性は、入れる規則になっています。alt属性は画像のかわりにテキスト(文章)で表現するものです。万一画像が表示されない場合や、テキストだけのブラウザで閲覧している人もいるため、このような場合に備えて配慮することが求められています。
装飾用の画像で、alt属性を入れることで、かえって内容がわかりにくくなってしまう場合には、alt=" "のように半角スペースを入れておくことにします。
HTMLプレビュー
プレビュー機能はタグうちしたらすぐに、確認ができる機能です。プレビューを見ながら作業ができるので能率的です。
F8キーを押しても表示できます。非表示にするにはEscキーを押します。
ブラウザ表示
ブラウザ表示は実際にブラウザで表示した状態で見る機能です。ページレイアウトの確認や完成時には必ず、ブラウザ表示を見て確認する必要があります。
ツール→「ブラウザでプレビュー」を開き、ブラウザの設定をおこないます。
色の挿入
色を視覚的に挿入できる機能です。
始めに開く色の画面
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タグを打つと効率がよいです。
< >と< >は似ていますが、前者は半角、後者は全角です。打つと同じように打てるし、一見して、同じように見えるので、要注意です。