HTMLコードの書き方

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

HTMLとは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略。 最も基本的なプログラミング言語のひとつで、主にウェブデザインで使われる。 最初は少し複雑に感じるかもしれませんが、実は簡単に学べるプログラミング言語のひとつです。 このウィキハウでは、基本的なHTMLの書き方を説明します。 でもすぐに、自分の手で素晴らしいウェブサイトを作れるようになりますよ。

パート1

新しいHTML文書の作成と保存

  1. テキストエディタを開きます。 HTMLを書くには、システムにプリインストールされているテキストエディタを使うことができます。 ウィンドウズならメモ帳。 MacではTextEditを開きます。 以下の手順でテキストエディタを開きます：
    • Windows
      • Windowsのスタート・アイコンをクリックする。
      • メモ帳」と入力する。
      • メモ帳」をクリックする。
    • Macの場合
      • 右上の虫眼鏡をクリックする。
      • 検索バーに「TextEdit」と入力し、Enterキーを押します。
      • 新規ドキュメントをクリックします。
  2. ページの先端に<!doctype html>と入力する。 このタグは、ウェブブラウザにドキュメントのタイプがHTMLドキュメントであることを伝えます。
  3. ファイル］をクリックする。 一番上のメニューバーにあります。
  4. 名前を付けて保存」をクリックします。 ファイル」メニューの中にあります。
    • Macの場合は、「保存」をクリックします。
  5. ドキュメントの名前を入力します。 ウェブサイトの各ウェブページ用に別々のHTMLドキュメントを作成します。 多くのウェブサイトでは、トップページのタイトルは「index.html」となっていますが、好きな名前を付けることができます。 ファイル名」の横にドキュメントのファイル名を入力します。
  6. ファイルの拡張子を.htmlに変更します。 デフォルトでは、メモ帳は「.txt」ファイルとして、テキストエディットは「.rft」ファイルとして保存されます。 以下のいずれかの手順で、文書をHTML文書として保存します：
    • PC：「Save as type:」の隣にあるドロップダウンメニューを使い、「All Files (*,*)」を選択する。 次に、ファイル名の末尾にある拡張子「.txt」を手動で削除し、「.html」に置き換えます。
    • Macの場合保存ウィンドウの下部にある「ファイル形式」の隣にあるドロップダウンメニューをクリックします。 次に、ドロップダウンメニューから「Webページ（.html）」を選択します。 これにより、ファイル名の末尾に「.html」という拡張子が自動的に追加されます。
  7. 保存をクリックします。 これで文書がHTML文書として保存されます。 これ以降、作業を保存する必要がある場合は、「ファイル」の後に「保存」をクリックするだけです。
パート2

ヘッドとボディを書く

  1. 次の行に<html>と入力します。 これはHTML文書の開始タグです。 これは「<!doctype html>」タグの後の2行目に記述します。 このタグはウェブ・ブラウザに、次のテキストがHTML形式であることを伝えます。
  2. Enter ↵ を数回押し、</html>と入力します。 これで数行の空白行ができ、冒頭の「<html>」タグの閉じタグが追加されます。
    • HTMLでは、すべてのものに開始タグと終了タグがあります。 新しいHTMLタグを作成するときは、必ず閉じタグを追加することを忘れないようにしなければなりません。 さもなければ、それは機能しません。
    • <html>」タグは常に文書の一番上に、「</html>」タグは常に文書の一番下に置かなければなりません。 残りのHTMLコードは、この2つのタグの間に記述します。
  3. 3行目に<head>と入力します。 これは、HTML文書のHTML Headの開始タグです。 headには、通常、人々があなたのウェブサイトを見るときには画面に表示されないメタ情報が含まれています。 headの開始タグは、「<html>」タグのある行のすぐ下の行に記述します。
    • 通常、文書のタイトル、テンプレート、関連ページへのリンク、ウェブブラウザ用の特別なコーディング指示が含まれます。 また、CSS（カスケーディング・スタイル・シート）として知られるスタイル言語を含めることもできます。
  4. を押します ↵ Enterタイプ <title>。 これは文書のタイトルを含むタグです。 ウェブブラウザで見たとき、タイトルは上部のタブに表示されるテキストです。 このタグはHeadの開始タグのすぐ下に記述します。
  5. ウェブページのタイトルを入力します。 ウェブページのタイトルは自由に入力できます。 <title>タグの直後か、次の行に入力してください。
  6. </title>と入力します。 これはtitleタグの閉じタグです。 HTML文書のタイトルの後に記述します。 同じ行でも別の行でもかまいません。 重要なのは、HTML文書のtitleタグを閉じることです。
  7. Enter ↵ を押し、</head>と入力します。 このタグがHTML文書のHeadを閉じます。 文書の先頭に何か追加したい場合は、必ず「<head>」タグと「</head>」タグの間に入力してください。 必要なだけ何行でも使えます。
  8. Headの後に<body>と入力します。 これはHTML文書のBodyの開始タグです。 ボディには、HTML文書全体に表示されるウェブ・ページの視覚的要素が含まれます。
    • これには、テキスト、画像、クリック可能なボタン、リンク、背景色、背景画像など、ウェブブラウザからウェブサイトを表示したときに画面に表示されるものが含まれます。
  9. Enter ↵を2回押して、</body>と入力します。 これは、HTML文書のBodyを閉じる前のスペースです。 このスペースを使って、HTML文書の内容を書き始めることができます。 ウェブページの内容はすべて、「<body>」タグと「</body>」タグの間に書くことになります。 ここまでで、あなたの文書全体はこのようになるはずです：
      <!doctype html> <html> <head> <title>文書のタイトル</title> </head> <body> </body> </html>
パート3

テキストを書く

  1. ヘッダーを追加するには、Bodyに<h1>と入力します。 HTML文書の内容はすべて「<body>」タグと「</body>」タグの間に入ります。 <h1>」タグは、ヘッダーを書くための開始タグです。
    • HTMLで使えるヘッダタグは、大きさの異なる6つのタグがあります。 「<h1>」が一番大きなヘッダーで、「<h6>」が一番小さなヘッダーです。
  2. headerタグの後に見出しを書きます。 <h1>」タグの後に書いたテキストは、大きなヘッダー形式で表示されます。 ページのタイトルを一番上に大きく表示させたい場合は、「<h1>」の後にタイトルを書きます。
  3. </h1>」と入力してヘッダー・タグを閉じます。 HTML文書のテキスト全体をヘッダー形式で表示させたいのでなければ、ヘッダー・タグを閉じます。 ヘッダーテキストの後に"</h1>"と入力してヘッダーを閉じます。
  4. 改行を追加するには<br>と入力します。 テキストの後にスペースを追加したい場合は、「<br>」と入力します。 これでテキストが改行され、もう1行追加されます。 <br>」タグは何行でも入力できます。 改行タグは、閉じタグを必要としない数少ないHTMLタグのひとつです。
  5. 段落テキストを追加するには「<p>」と入力します。 HTMLで段落テキストを追加したいときは、「<p>」タグを段落テキストの冒頭に使用します。
  6. 段落テキストを入力します。 <p>」タグの後に入力したテキストは、段落テキストとしてフォーマットされます。 必要なだけテキストを追加することができます。
  7. 段落テキストを閉じるには「</p>」と入力します。 段落テキストを書き終えたら、"</p>"タグを使って"<p>"段落タグを閉じます。
  8. HTMLテキストタグにstye要素を追加する。 タグに少しスパイスを加えたい場合は、HTMLテキストタグの中に「style=」と入力し、テキストにスタイルを付けるHTML要素を追加します。 セミコロン（;）で区切ることで、タグに複数のスタイル要素を追加することができます。以下は、テキストタグのスタイル設定に使用できるオプションです：
    • 色: テキストの色を変更するには、HTMLタグの "style="の後に "color:[色名]; "と入力します。 色名]」の代わりに、実際の色の名前、または16進数のカラーコードを入力します。 たとえば、ヘッダーの色を赤に変更するには、<h1 style="color:red;">と開始タグに入力します。
    • フォント テキストのフォントを変更するには、HTMLタグの「style=」の後に「font-family:[フォント名];」と入力します。 例えば、段落のテキストをガラモンに変更するには、<p style="font-family:garamond;">と入力します。 すべてのフォントがどのコンピューターからもアクセスできるわけではないことを覚えておくことが重要です。 Arial、Arial Black、Roboto、Times New Roman、Times、Courier New、Courier、Verdana、Georgia、Palatino、Garamond、Bookman、Comic Sans MS、Candara、Impactなどです。
    • テキストのサイズ テキストのサイズを変更するには、HTMLタグの "style="の後に "font-size:[サイズはパーセント(%)またはピクセル(px)]; "と入力します。 例えば、ヘッダーの高さを50ピクセルに変更したい場合は、<h1 style="font-size=50px;>と入力します。
    • 整列： HTMLタグの "style="の後に "text-align:[alignment]; "と入力することで、テキストを左寄せ、中央寄せ、右寄せにすることができます。 例えば、ヘッダーをページ上部の中央に配置したい場合は、<h1 style="text-align:center;">と入力します。
  9. リストの追加 HTMLに番号付きリストや箇条書きリストを追加することができます。 以下の手順でHTMLにリストを追加してください：
    • 番号付きリストを始めるには「<ol>」、箇条書きリストを始めるには「<ul>」と入力します。
    • <li>」と入力すると、新しいリスト項目が作成されます。
    • リスト項目のテキストを追加するには、"<p>"タグを使用します。
    • リスト項目のテキストを入力する。
    • </p>」と入力して、リスト項目のテキスト部分を閉じます。
    • </li>」と入力して、リスト項目のタグを閉じます。
    • 他のリスト項目も同様に入力します。
    • リストの最後に"</ol>"または"</ul>"を入力して、リスト・タグを閉じます。
  10. HTML文書を見直しましょう。 定期的にチェックすることをお勧めします。 まだそうしていないなら 作業を保存してください。 次にHTMLドキュメントを右クリックし、Open withを選択します。 ウェブブラウザで表示するには、ウェブブラウザを選択します。 ここまでで、あなたのHTMLコード全体はこのようになるはずです：
    • <!doctype html> <html> <head> <title>ピーナッツバターとゼリーのサンドイッチ</title> </head> <body> <h1 style="color:red;align:center;">ピーナッツバターとゼリーのサンドイッチの作り方 </h1> <br> <h2>材料：</h2> <ul> <li>ピーナッツバター</li> <li>ゼリー</li> <li>パン</li> </ul> <br> <p>パンにピーナッツバターを塗り、ゼリーをのせる。 その上にパンをのせる。 半分に切る。
パート4

他の要素の追加

  1. Bodyの背景にカラースタイルを追加する。 ボディの背景色を変えたい場合は、「<body>」タグを編集して「<body style=""」とする。 そして、"style="の後に "background-color:[色名]; "と入力します。"[色名]"は色の名前か16進数のカラーコードに置き換えてください。 例えば、背景色を黒にしたい場合は、<body style="background-color:black;">と入力します。
    • また、bodyタグの中に背景画像を設定することもできます。 その場合は、<body style="background-image:[image url]">と記述します。 image URL]」は、使用したい画像のウェブアドレスまたは場所に置き換えてください。
  2. 画像を追加します。 ウェブページに画像を追加するには、<img src="[画像のURL]">と入力します。 "[image url]"は画像のウェブアドレスに置き換えてください。例えば、「<img src="https:◆www.mywebsite.com/image.png">」のように。 画像タグには閉じタグは必要ありません。
    • height="と "width="の後に画像の高さと幅をピクセル単位で追加することで、画像のサイズを調整することができます。 例えば、"'''<img src="https:\www.mywebsite.com/image.png" width="500" height="600">のように。
    • また、タグの前に<center>、imageタグの後に</center>という開始タグを入力することで、画像を中央に配置することもできます。
  3. 他のウェブページへのリンクを追加する 他のウェブページへのリンクは、ウェブデザインにおいて重要です。 次の手順で、他のウェブページへのリンクを作成します：
    • <a href=」と入力してリンクタグを開始します。
    • a href="の後に、リンク先のページのURLを引用符で囲みます。
    • リンクの開始タグを閉じるには「>」と入力します。
    • 開始タグの後に、リンクに使いたいテキストを入力する。 また、画像をクリック可能なリンクとして使用するには、imageタグを使用します。
    • HTMLのリンクタグを閉じるには</a>と入力します。 例として、<a href="https://www.wikihow.com/Create-a-Link-With-Simple-HTML-Programming">リンクの貼り方はこちら</a>というタグは、.HTMLを表示します。
  4. 横線を追加するには<hr>と入力します。 水平線は、テキストの主題的な区切りとして使用できます。 横線を追加するには、単に<hr>と入力します。 このタグには閉じタグは必要ありません。
  5. 自分の仕事を見直す HTML文書の作成がかなり進んだら、保存してウェブ・ブラウザで表示し、どのように見えるかを確認しましょう。 あなたのHTMLコードは次のようになるはずです：
    • <!doctype html> <html> <head> <title>文書のタイトル</title> </head> <body style="background-color:black;"> <center> <img src="https://www.mywebsite.com/logo_banner.png> <br> <a href="https://www.mywebsite.com/home><img src="https://www.mywebsite.com/home_button.jpg> <a href="https://www.mywebsite.com/page2><img src="https://www.mywebsite.com/next_button.jpg> </center> <br> <h1 style="color:white;">私たちについて</ht> <br> <p style='color:white;">私たちについて少し...</p> <hr> </body> </html>

基本的なウェブページのHTML例

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

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

コメント

返信元（返信をやめる）

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

NG表示方式

NGID一覧