開発環境準備編

ひな型ファイル

ひな型ファイルとは

　ひな型ファイルとは何でしょうか。それは、どのウェブページにも共通のHTML文だけを入れたHTMLファイルのこと。後でも詳しく見ますが、HTMLファイルの内容は、どのHTML文にも書かなくてはならない共通の「基本タグ」部分があります。そこでこの「基本タグ」を「ひな型ファイル」として保存しておき、コピーして使えるようにしておくと、いちいち「基本タグ」を入力しなくて済むので便利、というわけです。

ひな型ファイルの作り方

　それではさっそく作りましょう。まずはTerapad.exeファイルをダブルクリックしてTerapadを起動します。開いたら、以下のテキストエリアの領域をすべて選んでコピーして、Terapadに貼り付けます。いわゆるコピー＆ペースト、略称「コピペ」です。
　Windows環境限定ですが、一つ便利なコピペの方法をお教えしましょう(Macの人は調べて下さい)。コピペの方法はいろいろありますが、ショートカットが便利です。コントロールキー「Ctrl」と「c」キーの同時押し[Ctrl]+[c]でコピーし、「Ctrl」キーと「v」キーの同時押し[Ctrl]+[v]で貼り付けできます。慣れると非常に便利ですので覚えておきましょう。
　それからテキストエリアの文字をすべて選択する方法はわかりますか？ひとつは、テキストエリアの左上から右下へ「マウスの左ボタンを押したまま」マウスカーソルを移動させると反転表示の選択状態になります。もう一つのやり方は、ショートカットを使う方法。テキストエリア内でワンクリックあるいはダブルクリックした後で[Ctrl]+[a]を押すとテキストエリア内の文字だけが反転表示の選択状態になります。その上で[Ctrl]+[c]でコピー、[Ctrl]+[v]で貼り付けです。試してみて下さい。

　　

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトルはこちら</title>
</head>
<body>
ページのコンテンツはこちら

</body>
</html>

　実際にやってみると次のようなイメージ。上のテキストエリアの左上から右下へ「マウスの左ボタンを押したまま」マウスカーソルを移動させると左下のような選択状態(反転表示)になります。その状態で[Ctrl]+[c]してコピーします。その上でTerapadを起動し、[Ctrl]+[v]するとコピーした内容が貼り付けられて完成、となります。

　　

　完成するとこんな感じ。意味が分からなくても大丈夫。後で詳しく説明します。

　　

Unicodeで保存しておく

　ひな型ファイルができたらUnicodeで保存しておきましょう。先のページでも書きましたが、ウェブの世界はUnicodeに統一する方向で進んでいます。ひな型ファイルをUnicodeで保存しておけば、新しいHTMLファイルを作るたびに文字コードを変更する必要がありません。
　TeraPadのメニューバーの「ファイル」から「文字/改行コード指定保存」を選択します。すると小さいウインドウが表示されますので「文字コード」を「UTF-8N」として「OK」ボタンを押します。以下のイメージです。

　　

　すると「名前を付けて保存」画面が表示されますので、以下の画面イメージの通り、先に作成した作業フォルダ「webkiso」の中に「hina.html」としてファイルを保存しましょう。

　　

　あと「どうしてもできない！」という人。ひな型ファイル「hina.html」のサンプルを「こちら」にアップしておきますので必要があれば、マウスの「右ボタン」でクリックし「名前を付けて保存」のようなメニューを選んでダウンロードし、webkisoフォルダに保存してご利用下さい。

>>次のページへ進む

HTML＆CSS 入門、入門、超入門！