HTMLページの書き方

ページ名：HTMLページの書き方

このWikiHowでは、HTMLを使ってウェブページを作成する方法を説明します。ウェブページの要素には、テキスト、リンク、画像などがあります。

パート1

書く準備

  1. 簡単なテキストエディタを開きます。Windowsの場合、デフォルトのテキストエディタは「メモ帳」ですが、Macの場合は「テキストエディット」というプログラムがあります：
    • Windows - Start
      をクリックし、notepad と入力し、Notepad をクリックします。
    • Mac - Spotlight
      をクリックし、textedit と入力し、表示された中から TextEdit をクリックする。
  2. HTMLタグを理解する。HTMLで記述する場合、ページのさまざまな要素は開タグ（<>）と閉タグ（</>）で示され、要素のテキストはタグの間に収まります。
    • 例えば、段落は、開段落タグ（<p>）を入力し、使用したいテキストを入力し、閉段落タグ</p>を入力することで作成されます。
    • コードの各行は1行にまとめなければならないので、通常はコードの行を書いた後に↵Enterキーを押します。
  3. 基本的なHTMLの書式を確認しましょう。作成するHTML文書では、「文書タイプ」タグ（<!DOCTYPE html>）、HTMLタグ（<html>）、BODYタグ（<body>）で文書を始めます。また、BODYタグを閉じ、HTMLタグを閉じて文書を終了します。例えば
    • <!DOCTYPE html>
    • <html>
    • <body>
    • </body>
    • </html
  4. を考えてみよう。CSSはHTMLを補完する役割を果たす言語であり、ページの書式設定（色、中央揃えテキストなど）やウェブページのその他の視覚的側面をカバーする。
パート2

テキストページの作成

  1. ドキュメントを設定します。文書の最初のHTMLテキストを追加します：
    • <!DOCTYPE html>
    • <html>
    • <body>
  2. ウェブページのタイトルを作成します。これは「ヘッド」とも呼ばれ、ブラウザのタブに表示されるテキストを定義します。あなたのタイトル」をお好みのテキストに置き換えてください：
    • <head>
    • <タイトル>あなたのタイトル</タイトル
    • </head>
  3. ヘッダーを追加します。<h1>テキスト</h1>と入力し、↵Enterキーを押します。<h1>タグと</h1>タグの間には、好きなテキストを入れることができます。
    • ヘッダーはページ全体に重ねることができます。最初のヘッダーの次に使うヘッダーは、番号を増やすだけです（例えば、2番目のヘッダーには<h2></h2>を使います）。
  4. 段落を作る。<p>テキスト</p>と入力して↵Enterキーを押し、「テキスト」を段落のテキストに置き換えてください。
    • テキストの各行ごとに<p></p>タグを繰り返すことで、テキストの各行を新しい行に配置することができます。
  5. ヘッダーと段落のプロセスを繰り返します。ヘッダーと段落はいくつでも追加できます。
  6. ページに区切りを追加する。<br>テキスト</br>と入力し、↵Enterキーを押します。これで、段落間にページギャップができます。
  7. 段落のテキストをフォーマットします。<p></p>タグの中に別のタグ（例えば、<p><em></em></p>など）を使って書式を指定することができます：
    • <em>text</em> - イタリック体のテキストを作成します。
    • <strong>text</strong> - 太字のテキストを作成します。
    • <ins>text</ins> - 下線テキストを作成する。
    • <del>text</del> - テキストに線を引く。
    • <small>text</small> - 小さなテキストを作成する。
    • <!---text---> - 不可視テキストを作成します。ウェブページにメモを追加するときに使います。
  8. ドキュメントのBODYタグとHTMLタグを閉じます。テキストを追加し終わったら、</body>と入力して↵ Enterキーを押し、</html>と入力してドキュメントを閉じます。これでテキストページは技術的に完成しましたので、リンクや箇条書き、画像など他のものを追加することができます。
パート3

リンクの追加

  1. ウェブページの中でリンクを追加する場所を探します。例えば、段落の途中にウェブページへのリンクを追加したい場合、その段落に行き、リンクとして使いたい単語やフレーズを見つけます。
  2. ウェブサイトのURLをコピーする。リンク先のウェブサイトに移動し、ウィンドウの上部にあるバーでアドレスを選択し、Ctrl+C（Windows）または⌘Command+C（Mac）を押します。
  3. オープンリンクタグを入力します。リンクとして使用したい語句の直前のスペースに <a href=> と入力します。
  4. ウェブサイトのURLを貼り付けます。href=と>の間をクリックし、Ctrl+V（Windows）または⌘Command+V（Mac）を押します。href=の右側にリンクが表示されます。
    • 例えば、YouTubeにリンクする場合、<a href=https://www.youtube.com/>と表示されます。
  5. 閉じたリンクタグを追加する。リンクとして使いたいテキストの反対側に、</a>と入力します。例えば、"Follow me on Twitter "という行で、Twitterにリンクし、リンクとして "on Twitter "を使用する場合、コードは以下のようになります：
    • <a href=https://www.twitter.com/>ツイッターで</a>。
  6. IDタグを追加する。IDタグを使うことで、1つのテキストを同じページの別の段落の別のセクションにリンクさせることができます。そのためには
    • <p>タグを<p id=text>に置き換える。
    • リンクにしたいテキストを探します。
    • テキストの前に<a href=#text>と入力します。"#"の後のテキストが "clearall "の後のテキストと一致していることを確認してください。
パート4

箇条書きを追加する

  1. 箇条書きを追加する場所を探します。箇条書きは、情報を列挙したり、整理された手順を作成したりするのに最も適しています。箇条書きを追加したい段落を見つけたら、次に進みます。
  2. 改ページを入れる。箇条書きにしたい場所の上に<br>と入力し、↵Enterキーを押します。
  3. 最初の箇条書きを作成します。<li>text</li>と入力し、↵Enterキーを押します。"text "を箇条書きのテキストに置き換えてください。
  4. さらに箇条書きを追加します。テキストの行の周りに<li></li>タグを使用している限り、タグ間のテキストは箇条書きとしてフォーマットされます。
  5. サブポイントを作成します。<ul>text</ul>と入力し、↵Enterキーを押します。テキストは前の箇条書きの下にインデントされて表示されます。
    • <ul></ul>タグのテキストは、その前に箇条書きがありません。
  6. 改ページを閉じます。先に改ページを選択した場合は、</br>と入力して↵Enterキーを押します。箇条書きリストがページ上で独立します。
パート5

画像を追加する

  1. 画像を挿入する場所を探します。画像は、画像のコードを挿入した場所に表示されます。
  2. 画像タグを作成します。そのためには、<imgと入力しますが、↵Enterは押さないでください。image "タグはそれ自体が完全なタグなので、閉じタグは必要ありません。
  3. source "タグを追加します。img "と "src "の間にスペースを入れて、<imgタグの後に "src="と入力します。
  4. 画像のアドレスを入力する。追加したい画像のURLをコピーし、sourceタグの右側に貼り付けます。
  5. style "タグを追加する。style=」と入力し、「width:px;height:px」と入力します。
  6. 画像の寸法を入力する。width:」の後に画像の幅をピクセル単位で入力し、「height:」の後に画像の高さをピクセル単位で入力する。
  7. 代替説明を入力します。これは、画像の読み込みに失敗した場合に表示されるテキストです。そのためには、alt=と入力し、次に説明を入力します。
  8. 画像タグを閉じます。代替説明の最後の文字の後に「>」を付けて閉じます。
  9. 画像のコードを見直してください。以下のようになっているはずです：
    • <img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=フィヨルド>。
パート6

Windowsで文書を保存する

  1. ファイル」をクリックします。メモ帳ウィンドウの左上にあります。ドロップダウンメニューが表示されます。
  2. 名前を付けて保存...」をクリックします。ファイルのドロップダウンメニューの一番上にあります。
  3. 保存場所を選択します。ウィンドウの左側にあるフォルダ（例：デスクトップ）をクリックします。
  4. ファイルのHTML名を入力します。ファイル名」のテキストフィールドに、「.html」の後に任意のファイル名を入力します。
    • 例えば「ニャー」という名前のファイルなら、ここに「meow.html」と入力します。
  5. Save as type "ドロップダウンボックスをクリックします。ドロップダウンメニューが表示されます。
  6. すべてのファイル」をクリックします。ドロップダウンメニューの中にある
  7. 保存」をクリックします。ウィンドウの右下に表示されます。こうすることで、テキストファイルがHTMLページとして保存されます。
    • HTMLページファイルは、ファイルをクリックして開いているブラウザウィンドウにドラッグすることで、ほとんどのブラウザで開くことができます。
パート7

Macで文書を保存する

  1. TextEditをクリックします。画面の左上にあります。ドロップダウンメニューが表示されます。
  2. 環境設定...をクリックします。ドロップダウンメニューの一番上にあります。環境設定ウィンドウが開きます。
  3. 開くと保存」タブをクリックします。ページの一番上にあります。
  4. プレーンテキストファイルに拡張子「.txt」を追加する」のチェックを外します。これは「ファイルを保存するとき」の見出しの下にあります。
  5. 環境設定ウィンドウを閉じます。ウィンドウ左上の赤丸をクリックして閉じます。
  6. 書式」をクリックします。画面上部のメニューです。
  7. プレーンテキストにする」をクリックします。このオプションはドロップダウンメニューにあります。
  8. ファイル］をクリックします。画面左上のメニューです。
  9. 保存」をクリックします。これはドロップダウンメニューの一番上にあります。
  10. ファイルのHTML名を入力します。Save As（名前を付けて保存）」テキスト・フィールドの名前を、任意の名前に置き換えて、その後に.htmlを付けます。
    • 例えば、「my_website」という名前のドキュメントの場合、ここに「my_website.html」と入力します。
  11. 保存」をクリックします。HTMLドキュメントがデフォルトの保存場所（例：デスクトップ）に保存されます。
    • ファイルをクリックして開いているブラウザ・ウィンドウにドラッグすれば、ほとんどのブラウザでHTMLページ・ファイルを開くことができます。
この記事は、CC BY-NC-SAの下で公開されている「 HTMLページの書き方 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

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

コメント

返信元（返信をやめる）

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

NG表示方式

NGID一覧