HTMLファイルの編集方法

ページ名：HTMLファイルの編集方法

手作業でウェブサイトをコーディングしたい場合は、メモ帳（Windows）やTextEdit（macOS）のような基本的なテキストエディタでHTMLファイルを編集できます。画面上で要素を動かしたり、ライブプレビューを見たりしたい場合は、DreamweaverやKompozerのようなWYSIWYG（What You See Is What You Get）エディタを使うことができます。このWikiHowでは、標準またはビジュアル編集アプリでHTMLファイルを開いて編集する方法を説明します。

方法1

Windowsでメモ帳を使う

  1. Windowsのスタートボタン
    をクリックします。タスクバーにWindowsのロゴがあるボタンです。デフォルトでは左下にあります。スタートメニューが表示されます。
  2. メモ帳」と入力します。スタートメニューにメモ帳が表示されます。
  3. メモ帳をクリックします。青い表紙のメモ帳のようなアイコンが表示されます。
  4. ファイル］をクリックします。メモ帳のメニューバーの一番上にあります。ドロップダウンメニューが表示されます。メモ帳でファイルを開くためのファイルブラウザが表示されます。
  5. 開く」をクリックします。ファイル」ドロップダウンメニューの2番目のオプションです。
  6. ファイルの種類のドロップダウンメニューで「すべてのファイル」を選択します。テキスト文書（.txt）」というドロップダウンをクリックし、ドロップダウンメニューで「すべてのファイル」を選択します。これにより、ファイルブラウザにすべてのドキュメントタイプ（HTMLファイルを含む）が表示されます。
  7. HTMLファイルを選択し、「開く」をクリックします。HTMLドキュメントがメモ帳で開きます。メモ帳でHTMLコードを編集することができます。
    • または、メモ帳でも可能です。
  8. HTMLコードを編集します。メモ帳でHTMLを編集するには、手書きで編集できるようにする必要があります。編集できる一般的な要素は以下の通りです。
    • <!DOCTYPE html>：HTMLドキュメントの先頭に記述します。ウェブ・ブラウザに、これがHTML文書であることを伝えます。
    • <html></html>：これらのタグはHTML文書の上部と下部にあります。これはHTMLコードがどこで始まり、どこで止まるかを示します。
    • <head></head>：これらのタグはHTML文書の一番上にあります。HTML文書の先頭がどこで始まり、どこで止まるかを示します。HTML文書のheadには、ウェブ・ページには表示されない情報が含まれます。これにはページタイトル、メタデータ、CSSが含まれます。
    • <title>ページタイトル</title>：これらのタグはページのタイトルを示します。タイトルはHTML文書の先頭に記述します。この2つのタグの間にページのタイトルを入力します。
    • <body></body>：これらのタグは、HTML文書の本文の始まりと終わりを示します。bodyはウェブ・ページのすべての内容を記述する場所です。bodyはHTML文書のheadの後に来ます。
    • <h1>見出し</h1>：これらのタグは見出しタグを作成します。<h1>」と「</h1>」タグの間のテキストは、大きな太字で表示されます。テキストはHTML文書の本文に入ります。
    • <p>段落テキスト</p>：これらのタグは、HTML文書内に段落テキストを作成するために使われます。<p>」と「</p>」の間に入るテキストは、通常の大きさのテキストとして表示されます。テキストはHTML文書の本文に入ります。
    • <b>太字テキスト</b>：これらのタグは太字のテキストを作成するために使われます。<b>」と「</b>」の間に入るテキストは、太字テキストとして表示されます。
    • <i>イタリック体</i>：これらのタグは斜体のテキストを作成するために使われる。<i>」と「</i>」の間にあるテキストはイタリック体として表示される。
    • <a href="URL">リンクテキスト</a>：このタグは、他のウェブサイトにリンクするために使用します。リンクしたいウェブアドレスをコピーし、「URL」と書いてあるところ（引用符の間）に貼り付けます。リンク用のテキストは、「リンクテキスト」と書かれているところに貼り付けます（引用符は必要ありません）。
    • <img src="画像のURL">：このタグは、HTMLを使用して画像を投稿するために使用します。image URL」と書かれているテキストを画像のウェブアドレスに置き換えます。
  9. ファイル」をクリックします。画面上部のメニューバーにあります。
  10. 名前を付けて保存」をクリックします。ファイルを保存するためのダイアログボックスが開きます。
    • 既存のファイル名とファイルタイプで保存するには、「ファイル」の下にあるドロップダウンメニューから「保存」をクリックします。
  11. すべてのファイル」を選択します。Save as Type "の隣にあるドロップダウンメニューで "All Files "を選択します。
  12. ファイル名を入力します。ファイル名」の隣にあるボックスにファイル名を入力します。
  13. ファイルの最後に「.html」と入力します。ファイル名」ボックスにファイル名を入力したら、ファイル名の最後に拡張子「.html」を付けます。この拡張子がないと、HTMLファイルではなく、.txtファイルとして保存されます。
  14. 保存」をクリックします。これでファイルが保存されます。
方法2

Macでテキストエディットを使う

  1. 虫眼鏡アイコン
    をクリックする。Macのデスクトップの右上にあります。検索バーが表示されます。
  2. 検索バーに「TextEdit」と入力します。検索結果に一致するアプリのリストが表示されます。
  3. TextEdit.app をクリックします。検索結果の一番上にあります。紙とペンを模したアイコンの隣にあります。
  4. ファイル」をクリックします。TextEditが開いているときは、画面上部のメニューバーにあります。
  5. 開く」をクリックします。ファイルブラウザが開き、Macを操作してファイルを開くことができます。
  6. HTMLファイルをクリックし、「開く」をクリックします。HTMLファイルには、ファイル名の後に「.html」という拡張子がついています。ファイルブラウザを使ってHTMLファイルに移動し、クリックして選択します。次に「開く」をクリックして、HTMLファイルをテキストエディットで開きます。
  7. HTMLコードを編集します。TextEditを使ってmakeのHTMLコードを編集することができます。手で編集できるようにする必要があります。編集できる一般的な要素は以下の通りです。
    • <!DOCTYPE html>：これはHTMLドキュメントの先頭に記述します。ウェブ・ブラウザに、これがHTML文書であることを伝えます。
    • <html></html>：これらのタグはHTML文書の上部と下部にあります。これはHTMLコードがどこで始まり、どこで止まるかを示します。
    • <head></head>：これらのタグはHTML文書の一番上にあります。HTML文書の先頭がどこで始まり、どこで止まるかを示します。HTML文書のheadには、ウェブ・ページには表示されない情報が含まれます。これにはページタイトル、メタデータ、CSSが含まれます。
    • <title>ページタイトル</title>：これらのタグはページのタイトルを示します。タイトルはHTML文書の先頭に記述します。この2つのタグの間にページのタイトルを入力します。
    • <body></body>：これらのタグは、HTML文書の本文の始まりと終わりを示します。bodyはウェブ・ページのすべての内容を記述する場所です。bodyはHTML文書のheadの後に来ます。
    • <h1>見出し</h1>：これらのタグは見出しタグを作成します。<h1>」と「</h1>」タグの間のテキストは、大きな太字で表示されます。テキストはHTML文書の本文に入ります。
    • <p>段落テキスト</p>：これらのタグは、HTML文書内に段落テキストを作成するために使われます。<p>」と「</p>」の間に入るテキストは、通常の大きさのテキストとして表示されます。テキストはHTML文書の本文に入ります。
    • <b>太字テキスト</b>：これらのタグは太字のテキストを作成するために使われます。<b>」と「</b>」の間に入るテキストは、太字テキストとして表示されます。
    • <i>イタリック体</i>：これらのタグは斜体のテキストを作成するために使われる。<i>」と「</i>」の間にあるテキストはイタリック体として表示される。
    • <a href="URL">リンクテキスト</a>：このタグは、他のウェブサイトにリンクするために使用します。リンクしたいウェブアドレスをコピーし、「URL」と書いてあるところ（引用符の間）に貼り付けます。リンク用のテキストは、「リンクテキスト」と書かれているところに貼り付けます（引用符は必要ありません）。
    • <img src="画像のURL">：このタグは、HTMLを使用して画像を投稿するために使用します。image URL」と書かれているテキストを画像のウェブアドレスに置き換えます。
  8. ファイル」をクリックします。画面上部のメニューバーにあります。
  9. 保存をクリックします。ファイル」の下のドロップダウンメニューにあります。これでHTMLファイルが保存されます。
    • ファイル名を変更するには、「ファイル」のドロップダウンメニューから「名前の変更」をクリックします。画面上部に新しいファイル名を入力します。その際、必ず先頭に拡張子「.html」を付けてください。
方法3

Dreamweaverを使う

  1. Dreamweaverを開きます。Dreamweaverには、真ん中に「Dw」と書かれた緑色の四角に似たアイコンがあります。Windowsのスタートメニューにあるアイコンをクリックするか、Macの場合はアプリケーションフォルダをクリックしてDreamweaverを開きます。
    • Adobe Dreamweaverには、.NET Frameworkが必要です。 月額20.99ドルからサブスクリプションを購入できます。
  2. ファイル」をクリックします。画面上部のメニューバーにあります。
  3. 開く」をクリックします。ファイル」の下のドロップダウンメニューにあります。
  4. HTMLドキュメントを選択し、「開く」をクリックします。ファイルブラウザでコンピュータ上のHTML文書を選択し、クリックして選択します。右下の「開く」をクリックします。
  5. 分割」をクリックします。ページ上部の真ん中のタブです。下にHTMLエディタ、上にプレビュー画面が表示されます。
  6. HTMLドキュメントを編集します。HTMLを編集するには、HTMLエディタを使用します。DreamweaverでHTMLを編集する方法は、メモ帳やテキストエディットでHTMLを編集する方法とあまり変わりません。HTMLタグを入力すると、一致するHTMLタグの検索メニューが表示されます。HTMLタグをクリックすると、そのタグの開始タグと終了タグが挿入されます。Dreamweaverは、すべてのHTML要素に開閉タグがあるかどうかを確認します。
    • または、HTMLエディタでHTML要素を挿入したい場所をクリックし、画面上部のメニューバーで［挿入］をクリックすることもできます。ドロップダウンメニューから挿入したい項目をクリックすると、HTMLコードが自動的に追加されます。
  7. ファイル」をクリックします。HTML文書の編集が終わったら、画面上部のメニューバーで「ファイル」をクリックします。
  8. 保存をクリックします。ファイルの下のドロップダウンメニューにあります。これでHTML文書が保存されます。
方法4

Kompozerを使う

  1. ウェブブラウザにアクセスします。PCでもMacでも、どのウェブブラウザでもかまいません。これはKompozerのダウンロードページです。WindowsでもMacでも使える無料のHTML（WYSIWYG）エディターです。
  2. ダウンロードをクリックしてください。ページの一番上にある緑色のボタンです。ダウンロードページに移動します。5秒後にダウンロードが始まります。
  3. インストールファイルをダブルクリックします。デフォルトでは、ダウンロードしたファイルはPCまたはMacの「ダウンロード」フォルダにあります。また、ウェブブラウザでファイルをクリックして、Kompozerインストーラを起動することもできます。以下の手順でKompozerをインストールしてください：
    • Windows：
      • Windows：インストーラーがシステムに変更を加えることを許可するかどうか尋ねられたら、[はい]をクリックします。
      • イントロウィンドウで[次へ]をクリックします。
      • I accept the agreement "の横にある放射状のボタンをクリックし、[Next]をクリックします。
      • Next（次へ）」をクリックしてデフォルトのインストール場所を使用するか、「Browse（参照）」をクリックして別のインストール場所を選択します。
      • Next（次へ）をクリックし、もう一度Next（次へ）をクリックします。
      • インストールをクリックします。
      • 完了をクリックします。
    • Macの場合
      • Kompozerインストールファイルをダブルクリックします。
      • KompoZer.appをクリックします。
      • 左上のアップルアイコンをクリックします。
      • システム環境設定]をクリックします。
      • セキュリティとプライバシーをクリック
      • 全般タブをクリックします。
      • ウィンドウの一番下にある「とにかく開く」をクリックします。
      • ポップアップウィンドウで[開く]をクリックします。
      • Kompozerアイコンをデスクトップにドラッグします。
      • Finderを開きます。
      • アプリケーションフォルダをクリックします。
      • Kompozerアイコンをデスクトップからアプリケーションフォルダにドラッグします。
  4. Kompozerを開きます。以下の手順で、PCまたはMacでKompozerを開きます。
    • Windowsの場合
      • Windowsのスタートメニューをクリックします。
      • "Kompozer "と入力します。
      • Kompozerアイコンをダブルクリックします。
    • Mac
      • 右上の虫眼鏡アイコンをクリック。
      • 検索バーに「Kompozer」と入力。
      • Kompozer.appをダブルクリックします。
  5. ファイル」をクリックします。アプリ上部のメニューバーにあります。
  6. ファイルを開く」をクリックします。ファイル」の下にあるドロップダウンメニューの2番目のオプションです。ファイルブラウザが開き、開いているHTMLファイルを選択できます。
  7. HTMLファイルをクリックし、「開く」をクリックします。KompozerでHTMLファイルが開きます。
  8. 分割」をクリックします。ページ上部の真ん中のタブです。下にHTMLエディタ、上にプレビュー画面が表示されます。
    • 作業スペースを確保するために、アプリを拡大する必要があるかもしれません。
  9. HTMLドキュメントを編集します。HTMLソースコードの画面は下にあり、この画面を使ってメモ帳やテキストエディットと同じようにHTMLを編集することができます。また、プレビュー画面を使って、以下の手順でHTMLを編集することもできます：
    • 右上のドロップダウンメニューでテキストの種類（見出し、段落など）を選択します。
    • クリックしてテキストを入力します。
    • 画面上部のパネルにあるボタンを使って、テキストに太字、斜体、文字揃え、インデント、リストを追加します。
    • 画面上部のパネルで色の付いた四角をクリックすると、テキストの色を変更できます。
    • HTML文書に画像を追加するには、画面上部の画像アイコンをクリックします。
    • HTML文書にリンクを追加するには、チェーンリンクに似たアイコンをクリックします。
  10. 保存アイコンをクリックします。文書の変更が終わったら、画面上部の保存アイコンをクリックします。フロッピーディスクに似たアイコンの下にあります。これで作業が保存されます。
この記事は、CC BY-NC-SAで公開されている「 HTMLファイルの編集方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

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

コメント

返信元（返信をやめる）

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

NG表示方式

NGID一覧