メモ帳を使った簡単なウェブページの作り方

ページ名：メモ帳を使った簡単なウェブページの作り方

ウェブデザインを学びたいですか？ ウェブページの作成を始めるのに、高級な編集ソフトは必要ありません。 Windowsコンピュータにプリインストールされているメモ帳を使ってウェブページを作成することができます。 ウェブページの作成に使われる言語は「HTML」と呼ばれ、ハイパーテキスト・マークアップ・ランゲージ（Hypertext Markup Language）の略です。 HTMLはメモ帳やその他のテキスト編集プログラムで書くことができます。 あとはファイルをHTML文書として保存するだけです。 HTMLは、プログラミングのスキルがなくても使えます。 このウィキハウでは、メモ帳を使って簡単なウェブページを作成する方法をご紹介します。

知っておくべきこと

  • HTMLはウェブデザインで使われる主要な言語です。
  • メモ帳やその他のテキスト編集プログラムを使えば、簡単にHTMLを書くことができます。
  • ファイルをHTML（.html）ドキュメントとして保存することを忘れないでください。
パート1

ドキュメントの作成

  1. スタート
    を開きます。画面左下のWindowsロゴをクリックします。スタートメニューがポップアップします。
  2. メモ帳を検索します。notepad と入力して検索する。スタートメニューの一番上に、検索結果のリストが表示されます。
  3. メモ帳をクリックする。検索結果のリストの一番上にある青いメモ帳のアイコンです。メモ帳で空白のページを開くには、このアプリをクリックします。
  4. ファイル」をクリックします。これはメモ帳ウィンドウの左上隅にあります。クリックするとドロップダウンメニューが表示されます。
  5. 名前を付けて保存...」をクリックします。ドロップダウンメニューの中にあります。名前を付けて保存ウィンドウが開きます。
  6. 名前を付けて保存」のドロップダウンボックスをクリックします。このオプションはウィンドウの一番下にあり、「テキスト文書 (*.txt)」と書かれているはずです。クリックするとドロップダウンメニューが表示されます。
  7. すべてのファイル」をクリックします。ドロップダウンメニューの中にあります。これでファイルをHTML文書として保存することができます。
  8. 保存場所を選択します。ウィンドウの左側にある、文書を保存するフォルダ名をクリックします。
    • 例えば、デスクトップに文書を保存する場合は、上にスクロールして左側のサイドバーにある「デスクトップ」をクリックします。
  9. ファイル名と拡張子「html」を入力します。ファイル名」テキストボックスをクリックします。次に、ファイル名を入力し、その後にHTML文書のファイル拡張子である.htmlを付けます。
    • 例えば、ウェブページのファイル名を「hello」にするには、hello.htmlと入力します。
  10. 保存」をクリックします。こうすることで、現在のメモ帳文書がHTML文書に変わります。この時点で、ウェブページの初期構造を設定することができます。
    • メモ帳がうっかり閉じてしまったり、後で文書に戻る必要がある場合は、HTMLファイルを右クリックし、表示されるドロップダウンメニューから「編集」をクリックします。
パート2

構造コードを追加する

  1. ウェブページの言語タグを追加します。最初に追加する必要があるタグは言語タグです。これはウェブ・ブラウザに、これがHTML文書であり、使用されている言語がHTMLであることを伝えます。 ページ上部のメモ帳に次のように入力します：
    <!DOCTYPE html> <html>
  2. head "タグを追加する。HTML文書の「head」セクションには、ウェブページのメタデータが含まれています。 この情報はウェブ・ブラウザには表示されません。 ページのタイトル、スクリプトなどの情報が含まれます。 とりあえず、「<html>」タグの下に「<head>」と入力し、Enterキーを2回押してスペースを空けます。 次に</head>と入力します。
    • 各HTML要素には、開始タグと終了タグがあります。 headを開くための「<head>」タグのように、新しい要素を追加するときは、閉じタグも追加する必要があります。 headの場合、これは「</head>」タグです。
  3. ウェブサイトのページタイトルを追加します。タイトルはHTMLドキュメントの「head」セクションに入りますので、開口部の「<head>」タグと閉口部の「</head>」タグの間に入力する必要があります。 タイトルを追加するには、冒頭の<title>タグを入力します。 次にタイトル・テキストを入力します。 </title>の直後に、閉じるタイトル・タグを追加します。 たとえば、ウェブページのタイトルを「私のウェブサイト」としたい場合は、次のように入力します：
    <タイトル>私のウェブサイト</タイトル
  4. body」タグを追加します。ウェブ・ブラウザに表示されるすべての内容は、HTML文書の「body」セクションに入ります。 bodyタグの開始タグと終了タグは、終了タグ「</head>」の下に記述します。 以下のように、bodyタグの開始と終了を追加します：
    <body> </body>
  5. HTMLタグを閉じます。文書内の最後のタグは、ページの終わりを示す閉じHTMLタグになります。</body>タグの下に</html>と入力します。
  6. ここまでのHTML文書を見直してください。この時点で、あなたの文書は次のようになるはずです：
    <!DOCTYPE html> <html> <head> <title>私のウェブサイト</title> </head> <body> </body> </html>
  7. ドキュメントを保存します。保存するには、上部のメニューバーで「ファイル」をクリックし、次に「保存」をクリックします。 または、Ctrl + Sキーを押して文書を保存することもできます。 頻繁に保存するようにしてください。
パート3

ページ要素の挿入

  1. ウェブページの要素はすべて「body」タグの間に入ることを知っておいてください。見出しであれ段落であれ、どの要素も「<body>」タグの後、「</body>」タグの前に記述する必要があります。
  2. ウェブサイトのメイン見出しを追加します。body "タグの間に<h1></h1>と入力し、"<h1></h1>"タグの間にウェブページのメイン見出しにしたいものを入力します。例えば、「ようこそ」という見出しのページを作るには、次のように追加します：
    <h1>ようこそ</h1
    • タグ"<h2></h2>"から"<h6></h6>"を使って、より小さな見出しテキストを作ることができます。 「<h1>」は最も大きな見出しテキストで、「<h6>」は最も小さな見出しテキストです。
  3. 段落テキストをページに追加します。段落タグは"<p></p>"で、段落テキストとして使いたいものをタグの間に入力します。最終的にはこのようになります：
    <p>これは私のウェブサイトです。学級委員長に投票してください！</p>
  4. 段落を強制的に区切ります。段落や見出しの間に余分なスペースを追加したい場合は、行の閉じタグの後に<br>と入力します。たとえば、段落の後に改行を入れるには、次のようにします：
    <p>これは私のウェブサイトです。学級委員長に投票してください！</p><br> <p>ポテトも好きです。
    • 最初のタグの後にさらに「<br>」タグを追加して、段落の間に追加の行間を作ることができます。
    • 改行のために閉じタグを追加する必要はありません。
  5. テキストに書式を追加する。段落タグの間にテキストがある限り、太字、斜体、下線（および上付き文字と下付き文字）の書式を任意の単語、文、またはテキストのブロックに適用できます。 使用できる書式タグは以下の通りです：
    <b>太字テキスト</b> <i>斜体テキスト</i> <u>下線テキスト</u> <sup>上付きテキスト</sup> <sub>下付きテキスト</sub>。
  6. ウェブページに画像を追加する ウェブページに画像を追加するには、画像をインターネット上のウェブサーバーにアップロードする必要があります。 画像のウェブ・アドレスを知っておく必要があります。 それがわかったら、<img src=と入力し、その後に画像のウェブアドレスを引用符で囲みます。 そして、最後に閉じ括弧>を追加します。 以下はその例です：
    <img src="https://www.mywebsite.me/images/me.jpg"> と入力します。
    • 画像がオンラインではなく、コンピュータに保存されている場合は、ウェブアドレスの代わりに保存先を使うことができます。 例えば、<img src="C:∕Users∕Username∕Pictures∕me.jpg">のようにします。
  7. ウェブページにリンクを追加する。 リンクはウェブ開発の重要な側面です。 リンクによって、ユーザーはあるウェブページから別のウェブページに移動することができます。 リンクを追加するには、リンクしたいウェブページのウェブアドレスが必要です。 <a href=と入力し、その後に引用符でリンクしたいページのウェブアドレスを入力します。 そして、最後に閉じ括弧>を追加します。 そして、その直後に、リンクを貼りたいテキストを入力し、その後に閉じタグ（</a>）を続けます。 以下は、ウェブページにリンクを追加する方法の例です：
    <a href="https://www.mywebsite.me/ipage2">次のページへ</a>。
    • または.
  8. ウェブページの外観を確認してください。ウェブページの要素はさまざまですが、あなたの文書は次のように見えるはずです：
    <!DOCTYPE html> <html> <head> <title>私のウェブサイト</title> </head> <body> <h1>ようこそ！</h1> <a href="https://www.mywebsite.me/ipage2">次のページ</a> <img src="https://www.mywebsite.me/images/me.jpg"> <p>これは私のウェブサイトです。</p> <p><b>ここに強調のための太字があります。</b></p> <p><i>斜体は気味が悪いかもしれません。 </i></p> </body> </html>
パート4

ページをテストする

  1. ドキュメントを保存します。保存するには、上部のメニューバーにある「ファイル」をクリックし、続いて「保存」をクリックします。こうすることで、HTMLドキュメントを開いたときに最新バージョンのウェブページが表示されるようになります。
  2. HTMLドキュメントを右クリックします。HTMLドキュメントを保存した場所に移動し、右クリックします。 ドロップダウンメニューが表示されます。
  3. で開く」を選択します。ドロップダウンメニューの中にあります。そうすると、ポップアウトメニューが開き、そのファイルを開くことができるアプリのリストが表示されます。
  4. お好みのウェブブラウザを選択します。すべてのウェブブラウザでHTMLドキュメントを開くことができますので、ポップアウトメニューから使いたいウェブブラウザをクリックしてください。選択したウェブブラウザでHTML文書が開きます。
  5. ウェブページを確認してください。書式に問題がなければ、そのままメモ帳を閉じてください。
    • HTML文書の編集を続けたい場合は、メモ帳に戻って必要な編集を行い、変更内容をこまめに保存してください。
    • You can , , or by using CSS in conjunction with your HTML document.

HTML文書のサンプル

この記事は、CC BY-NC-SAの下で公開されている「 メモ帳を使った簡単なウェブページの作り方 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧