HTMLで簡単なウェブページを作る方法

ページ名：HTMLで簡単なウェブページを作る方法

このウィキハウでは、HTML（ハイパーテキストマークアップ言語）を使って簡単なウェブページを書く方法をご紹介します。ウェブページを作成したら、HTML文書として保存し、ウェブブラウザで表示することができます。HTMLページの作成は、ウィンドウズとマックの両方のコンピュータにある基本的なテキストエディタで可能です。

パート1

HTMLに見出しを追加する

  1. テキストエディタを開きます。ウィンドウズ・オペレーティング・システムが動作しているコンピューターでは、通常 、または、macOSユーザーはTextEditを、ChromeOSユーザーはTextを使用します：
    • Windows - スタート
      を開き、notepadまたはnotepad++と入力し、ウィンドウ上部の「Notepad++またはsublime」をクリックします。
    • macOS - Spotlight
      をクリックし、texteditと入力し、結果の一番上にあるTextEditをダブルクリックする。
    • - ランチャーを開き、テキストをクリックする。(アイコンはコードパッドと表示されます）。
  2. <!DOCTYPE html>と入力し、↵Enterを押す。これでウェブ・ブラウザにこれがHTML文書であることを伝えます。
  3. <html>と入力して↵Enterキーを押します。これが.NET Frameworkの開始タグです。
  4. <head>と入力して↵Enterキーを押します。これはHTMLのheadを開くタグです。HTMLのheadは、通常はウェブページに表示されない情報です。この情報には、タイトル、メタデータ、シート、その他のスクリプト言語などが含まれます。
  5. <title>と入力します。これは、ページにタイトルを追加するタグです。
  6. ウェブページのタイトルを入力します。ウェブページのタイトルは何でもかまいません。
  7. </title>と入力し、↵ Enterキーを押します。これがタイトルタグを閉じるタグです。
  8. </head>と入力し、↵ Enterキーを押します。これはheadタグを閉じるタグです。HTMLコードはこのようになります。
    <!DOCTYPE html> <html> <head> <title>私のウェブページ</title> </head>
パート2

HTMLに本文とテキストを追加する

  1. 閉じた「head」タグの下に「<body>」と入力します。このタグはHTML文書の本文を開きます。HTML本文にあるものはすべて、ウェブページに表示されます。
  2. <h1>と入力します。これはHTML文書に見出しを追加するタグです。見出しは大きな太字のテキストで、通常HTML文書の一番上に置かれます。
  3. ページの見出しを入力します。これはページのタイトルでも挨拶でもかまいません。
  4. 見出しテキストの後に</h1>と入力し、↵Enterキーを押します。このタグで見出しが閉じます。
    • 続けて見出しを追加します。<h1></h1>から<h6></h6>タグを使って作成できる見出しは6種類あります。これらは異なるサイズの見出しを作成します。例えば、大きさの違う見出しを3つ続けて作るには、次のように書きます：
      <h1>マイページへようこそ！</h1> <h2>私の名前はボブです</h2> <h3>ここが気に入っていただけたら嬉しいです</h3> </h3


    • 見出しはテキストの優先度や重要度を示します。しかし、下位の見出しを使いたいのであれば、上位の見出しを使う必要はありません。記事中にH1がなくても、直接H3を使うことができます。
  5. <p>と入力します。これは段落を開くためのタグです。段落テキストは、通常の大きさのテキストを表示するために使用されます。
  6. テキストを入力します。これは、ウェブページの説明や、共有したいその他の情報でもかまいません。
  7. テキストの後に</p>と入力し、↵Enterキーを押します。このタグで段落テキストを閉じます。以下はHTMLの段落テキストの例です：
    <p>これは私の段落です</p>。
    • 1つの見出しの下に一連の段落を作成するために、複数の段落行を一列に追加することができます。
    • <font color="color">タグと</font>タグでテキストを囲むことで、テキストの色を変えることができます。color "の部分には必ず好みの色を入力してください（引用符は残しておきます）。たとえば、段落のテキストを青くするには、次のように書きます。 <p><font color="blue">クジラは威厳のある生き物です</font></p>。
    • HTMLを使って、太字、斜体、その他のテキスト書式を追加することができます。 以下は、HTMLタグを使ったテキスト書式の例です：
      <b>太字テキスト</b> <i>斜体テキスト</i> <u>下線テキスト</u> <sub>下付きテキスト</sub> <燮>上付きテキスト</燮
    • スタイリングのためだけでなく、強調のために使うのであれば、<b>や<i>の代わりに<strong>や<em>要素を使いましょう。こうすることで、スクリーン・リーダーやいくつかのブラウザで提供されているリーダー・モードのような技術を使うときに、ウェブ・ページを理解しやすくすることができます。
パート3

HTMLに追加要素を加える

  1. ページに画像を追加しましょう。以下の手順でHTMLに追加できます：
    • <img src=」と入力して画像タグを開きます。
    • 引用符で囲まれた"="記号の後に画像のURLをコピーして貼り付けます。
    • 画像URLの後に「>」と入力して画像タグを閉じます。例えば、画像のURLが "http://www.mypicture.com/lake "の場合、以下のように記述する：
      <img src="http://www.mypicture.com/lake.jpg"> と記述します。
  2. 他のページへのリンク次の手順でHTMLにリンクすることができます：
    • <a href=」と入力してリンクタグを開きます。
    • 引用符で囲まれた"="記号の後にURLをコピー＆ペーストする。
    • URLの後に「>」を入力し、HTMLのリンク部分を閉じます。
    • 閉じ括弧の後にリンクの名前を入力します。
    • リンク名の後に</a>と入力し、HTMLのリンクを閉じます。 以下はFacebookへのリンクの例です。
      <a href="https://www.facebook.com">フェイスブック</a>.
  3. HTMLに改行を追加します。HTMLに<br>と入力して改行を追加することができます。これにより、水平線が作成され、ページの異なるセクションを分割するのに使用できます。
パート4

色のカスタマイズ

  1. HTMLの公式な色の名前とコードのリストをチェックしましょう。ワールド・ワイド・ウェブ・コンソーシアム（W3C）は、https://www.w3.org/wiki/CSS/Properties/color/keywords にある色の公式リストを管理しています。各色には公式の名前、6桁の16進数コード、10進数値があります。これらの値のいずれかを使用して、ウェブページの要素に色を追加できます。この例では、公式の色名を使用します。
  2. を<body>タグに追加します。タグにstyle属性を追加します。ページ全体の背景色をラベンダー色にしたいとしましょう：
    • <body style="background-color:lavender;">とします。
  3. とします。また、style属性を使って、特定のタグ内のテキストをどの色にするかを指定することもできます。例えば、<p>タグ内のテキストをミッドナイトブルーにしたいとします：
    • <p style="color:midnightblue;">とします。
    • 色の変更は、その<p>タグ内のテキストにのみ影響します。後で別の<p>タグを開始し、そのタグもミッドナイトブルーにする場合は、そこにもstyle属性を設定する必要があります。
  4. ヘッダーまたは段落の背景色を設定します。bodyタグに背景色を設定する方法と同様に、他のタグにも背景色を設定することができます。例えば、<p>の背景色をライトグレーに、H1スタイルのヘッダーの背景色をライトスカイブルーにしたいとします：
    • <p style="background-color:lightgrey;">とします。
    • <h1 style="background-color:lightskyblue;">とします。
パート5

HTML文書を閉じる

  1. </body>と入力して本文を閉じます。HTML文書の本文にテキスト、画像、その他の要素をすべて追加し終えたら、HTML文書の末尾にこのタグを追加して、HTML文書の本文を閉じます。
  2. </html>と入力してHTML文書を閉じます。このタグは、HTML文書の最後にHTML本文を閉じるタグの下に記述します。これにより、ウェブ・ブラウザはこのタグの後にもうHTMLコードがないことを伝えます。HTML文書全体はこのようになるはずです：
    <!DOCTYPE html> <html> <head> <title>wikiHowファンページ</title> </head> <body> <h1>マイページへようこそ！</h1> <p>これはwikiHowのファンページです。ご自由にご利用ください！</p> <h2>重要な日付</h2> <p><i>2019年1月15日</i> - wikiHowの誕生日</p> <h2>リンク</h2> <p>以下はwikiHowへのリンクです： <a href="http://www.wikihow.com">wikiHow</a></p> </body> </html>
パート6

ウェブページを保存して開く

  1. 文書をプレーンテキストに変換します（Macユーザーのみ）。画面上部の「書式」メニュー項目をクリックし、表示されるドロップダウンメニューから「プレーンテキストにする」をクリックします。
    • Windowsではこの手順は必要ありません。
  2. ファイル」をクリックします。画面上部のメニューバーにあります。
  3. 名前を付けて保存」をクリックします。ファイル」の下のドロップダウンメニューにあります。
    • または、Ctrl+S（Windows）または⌘Command+S（Mac）を押して保存することもできます。
  4. HTMLドキュメントの名前を入力します。ファイル名" (Windows)または "名前" (Mac)のテキストボックスに好きな名前を入力します。
  5. ドキュメントのファイルタイプを変更します。ドキュメントのファイル形式を.NETから.NETに変更する必要があります。 以下の手順でファイル形式を変更します：
    • Windows - "Save as type "ドロップダウンボックスをクリックし、"All Files "をクリックし、ファイル名の最後に.htmlと入力します。
    • MacOS - ファイル名の末尾の.txtを.htmlに置き換えます。
    • ChromeOS - 「名前を付けて保存」ボタンをクリックします。ファイル名の最後に.htmlを付けます。先頭はお好みで。
  6. 保存」をクリックします。ウィンドウの一番下にあります。HTMLファイルが作成されます。
    • HTMLファイルは通常、デフォルトのウェブブラウザで開きます。
  7. テキストエディタを閉じます。これで、HTMLファイルをブラウザで開き、ウェブページを表示する準備が整いました。
  8. ブラウザでHTML文書を開きます。ほとんどの場合、HTML文書をダブルクリックして開くことができます。ドキュメントをダブルクリックするとエラーになる場合は、次のようにしてください：
    • Windows - ドキュメントを右クリックし、「次のブラウザで開く」を選択し、お好みのブラウザをクリックします。
    • Mac - ドキュメントを一度クリックし、[ファイル]をクリックして[ファイルを開く]を選択し、お好みのブラウザをクリックします。
  9. 必要に応じて、HTMLドキュメントを編集します。HTMLページにエラーがあることに気づくかもしれません。それを変更するには、HTMLドキュメントのテキストを編集します：
    • Windowsの場合、ドキュメントを右クリックし、表示されるドロップダウンメニューから「編集」をクリックします（メモ帳++がインストールされている場合は、代わりに「メモ帳++で編集」と表示されます）。
    • Macの場合は、ドキュメントをクリックして選択し、「ファイル」をクリックして「ファイルを開く」を選択し、「テキストエディット」をクリックします。ドキュメントをTextEditにドラッグすることもできます。
    • Chromebookの場合は、Textアプリを閉じて、Filesを開き、ファイルを探してクリックします。

サンプルHTML

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

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

コメント

返信元（返信をやめる）

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

NG表示方式

NGID一覧