▲

ホームページの作り方：さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！

簡単なHTMLを入力してみよう！

テキストエディターの準備

それではさっそく、簡単なHTMLを入力してみましょう！ その前に、「TeraPad」をダウンロードします。

TeraPadのダウンロード

TeraPadは作者の寺尾進さんのページ、もしくは窓の杜などからダウンロードすることができます。

TeraPadダウンロードページ

上のリンクから、TeraPadをダウンロードしましょう。

TeraPadのインストール

ダウンロードが完了したら、インストールを行いましょう。

step.1

ダウンロードしたファイル画像

ダウンロードしたファイルをクリックすると、インストール画面が表示されます。

step.2

インストール画面

基本的に「次へ」をクリックでOKです。

step.3

作成されたショートカット画像

正常にインストールされると、デスクトップ画面にTeraPadのショートカットが作成されます。
※ショートカットを作成するのチェックを外した場合、デスクトップにショートカットは作成されません。

TeraPadの起動

step.1

起動画面

デスクトップ画面のアイコンをクリックするか、【スタートメニュー】→【すべてのプログラム】→【TeraPad】で起動することができます。

step.2

起動した状態の画像

起動したTeraPad。これからここにHTMLを入力していきます。

覚えておきたいポイント

TeraPadの特徴

TeraPadは無料の高性能テキストエディタです。
シンプルでわかりやすく、初心者におすすめです。

他のテキストエディターでもOK

TeraPad以外のテキストエディターを使ってもOKです。他に使いやすいテキストエディターを見つけたら、お好みでどうぞ。基本的にはどのテキストエディターも使い方に大きな違いはありません。

テキストエディターの設定

入力前の設定

step.1

TeraPadの設定を行いましょう。
これからHTMLを入力するので、編集モードをHTMLに設定します。

入力前の設定

「表示」→「編集モード」→「HTML」をクリックします。

step.2

次に文字コードの設定を行いましょう。
HTMLやCSSを編集する際には「UTF-8N」という文字コードを使います。常に「UTF-8N」で保存・編集されるように設定しておきましょう。

「表示」メニューから「オプション」をクリックします。

オプションの設定

step.3

オプション画面が表示されるので、その中から「文字コード」タブをクリックします。

文字コードタブ画像

step.4

「初期文字コード」「保存文字コード」共に「UTF-8N」に設定し、最後に「OK」ボタンをクリックします。

文字コードをUTF-8に設定する

これで準備完了です。

覚えておきたいポイント

設定は確実に

設定は確実に行いましょう。もし設定が間違っていた場合、文字化けや上手く表示されないなどの不具合が起こる可能性があります。

HTMLを入力しよう

HTMLの入力方法

これで準備が整いました。
さっそく、HTMLを入力してみましょう。

step.1

まずは<html>と入力し、Enterキーを押します。

<html>

step.2

次に</html>と入力します。

<html>
</html>

step.3

HeadセクションとBodyセクションを入力します。

<html>
<head> ←　Headセクション
</head> ←　Headセクション
<body> ←　Bodyセクション
</body> ←　Bodyセクション
</html>

step.4

<body></body>の間に
こんにちはHTML
と入力してみましょう！

<html>
<head>
</head>
<body>
こんにちはHTML
</body>
</html>

step.5

その後、<head>と</head>の間に <meta charset="utf-8"> を入力します。

<html>
<head>
<meta charset="utf-8">
</head>
<body>
こんにちはHTML
</body>
</html>

これは「文字コード」といって、記述している文字の種類を識別するためのものです。
これを付け加えておかないと、文字化けを起こす可能性があるので注意しましょう。

[入力完成図]
入力完成図

いかがでしょうか？
とりあえず、簡単ですがソースコードの完成です。
でも、このままではパソコンから単なるテキスト文書として扱われてしまいます。
次のページでは、HTML形式として保存する方法を学習してみましょう。

覚えておきたいポイント

こまめに保存を！

作業中は、こまめに保存するクセをつけましょう。何らかの原因でパソコンがダウンした場合でも、被害を最小限に抑えることができます。 （特に夏場の雷や停電には注意！） 保存方法は「ファイル」メニューからも行えますが、Ctrl＋Sを同時に押すことでも可能です。

ソースコードは改行や字下げが可能

ソースコード入力中は、EnterキーやTabキーを使って改行や字下げをすることが可能です。これらの改行や字下げは、ブラウザで表示した際には無視されます。 なので、自分の見やすいように改行や字下げは自由に使ってOKです。

HTMLファイルの保存
« 前のページへ　HTMLを入力する前に

コンテンツの一覧

ページの検索

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。
HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。
カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。
FAQ
FAQ

よくあるご質問など。
お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。
プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。
運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。
サイトマップ
サイトマップ

さきちんWEBのサイトマップ。