HTMLファイルを編集する4つの方法 - 知識

コンテンツ

ステップ
コミュニティの質問と回答
チップ
警告

その他のセクション

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

ステップ

方法1/4：Windowsでメモ帳を使用する

. タスクバーにWindowsロゴが表示されているボタンです。デフォルトでは、左下隅にあります。スタートメニューが表示されます
. Macデスクトップの右上隅にあります。検索バーが表示されます。
タイプ テキストエディット 検索バーで。 これにより、検索結果に一致するアプリのリストが表示されます。
クリック TextEdit.app. 検索結果の上部にあります。紙とペンに似たアイコンの横にあります。
クリック ファイル. テキストエディットを開いているときは、画面上部のメニューバーにあります。
クリック 開いた. これにより、Macをナビゲートしてファイルを開くために使用できるファイルブラウザが開きます。
HTMLファイルをクリックして、 開いた. HTMLファイルには、ファイル名の後に「.html」という拡張子が付いています。ファイルブラウザを使用してHTMLファイルに移動し、クリックして選択します。次に、をクリックします 開いた HTMLファイルをテキストエディットで開きます。
HTMLコードを編集します。 テキストエディットを使用して、makeでHTMLコードを編集できます。手作業で編集できるように、HTMLを学ぶ必要があります。編集できる一般的な要素は次のとおりです。
- ：これはHTMLドキュメントの先頭にあります。これは、これがHTMLドキュメントであることをWebブラウザに通知します。
- ：これらのタグは、HTMLドキュメントの上部と下部に配置されます。これは、HTMLコードが開始および停止する場所を示します。
- ：これらのタグは、HTMLドキュメントの上部にあります。これらは、HTMLドキュメントの先頭が開始および停止する場所を示します。 HTMLドキュメントの先頭には、Webページには表示されない情報が含まれています。これには、ページタイトル、メタデータ、CSSが含まれます
- ページタイトル：これらのタグは、ページのタイトルを示します。タイトルはHTMLドキュメントの先頭にあります。これら2つのタグの間にページのタイトルを入力します。
- ：これらのタグは、HTMLドキュメントの本文が開始および停止する場所を示します。本文は、すべてのWebページのコンテンツが書き込まれる場所です。本文は、HTMLドキュメントの頭の後にあります。
- 見出しテキスト：これらのタグは見出しタグを作成します。「」の間のテキスト
  「と」
  「タグは大きな太字のテキストとして表示されます。テキストはHTMLドキュメントの本文に入ります。
- 段落テキスト：これらのタグは、HTMLドキュメントで段落テキストを作成するために使用されます。「」の間にあるテキスト
  「と」
  「は通常のサイズのテキストとして表示されます。テキストはHTMLドキュメントの本文に入ります。
- 太字：これらのタグは、太字のテキストを作成するために使用されます。「」の間にあるテキスト「と」「は太字で表示されます。
- イタリックテキスト：これらのタグは、斜体のテキストを作成するために使用されます。「」の間にあるテキスト「と」「は斜体のテキストとして表示されます。
- リンクテキスト：このタグは、別のWebサイトにリンクするために使用されます。リンク先のWebアドレスをコピーして、「URL」と表示されている場所（引用符の間）に貼り付けます。「リンクテキスト」と表示されているリンクのテキスト（引用符は不要）。
- ：このタグは、HTMLを使用して画像を投稿するために使用されます。「画像のURL」というテキストを画像のウェブアドレスに置き換えます。
クリック ファイル. 画面上部のメニューバーにあります。
クリック セーブ. [ファイル]の下のドロップダウンメニューにあります。これにより、HTMLファイルが保存されます。
- ファイルの名前を変更するには、をクリックします 名前を変更する [ファイル]ドロップダウンメニュー。画面上部にファイルの新しい名前を入力します。ページの上部に必ず「.html」拡張子を含めてください。

方法3/4：Dreamweaverの使用

Dreamweaverを開きます。 Dreamweaverには、中央に「Dw」と表示されている緑色の正方形に似たアイコンがあります。 Windowsの[スタート]メニューのアイコン、またはMacの[アプリケーション]フォルダーをクリックして、Dreamweaverを開きます。
- AdobeDreamweaverにはサブスクリプションが必要です。月額$ 20.99からサブスクリプションを購入できます。
クリック ファイル. 画面上部のメニューバーにあります。
クリック 開いた. [ファイル]の下のドロップダウンメニューにあります。
HTMLドキュメントを選択し、 開いた. ファイルブラウザを使用してコンピュータ上のHTMLドキュメントを選択し、クリックして選択します。次に、をクリックします 開いた 右下隅にあります。
クリック スプリット. これは、ページ上部の中央のタブです。これにより、下部にHTMLエディター、上部にプレビュー画面を含む分割画面が表示されます。
HTMLドキュメントを編集します。 HTMLエディタを使用してHTMLを編集します。 DreamweaverでHTMLを編集する方法は、メモ帳やTextEditでHTMLを編集する方法とそれほど変わりません。 HTMLタグを入力すると、一致するHTMLタグを含む検索メニューが表示されます。 HTMLタグをクリックして、開始タグと終了タグを挿入できます。 Dreamweaverは、すべてのHTML要素に開始タグと終了タグがあることを確認します。
- または、HTMLエディタでHTML要素を挿入する場所をクリックして、をクリックすることもできます。 インサート 画面上部のメニューバーにあります。ドロップダウンメニューで挿入する項目をクリックして、HTMLコードを自動的に追加します。
クリック ファイル. HTMLドキュメントの編集が完了したら、[ ファイル 画面上部のメニューバーにあります。
クリック セーブ. 下のドロップダウンメニューにあります ファイル。これにより、HTMLドキュメントが保存されます。

方法4/4：Kompozerの使用

に移動 https://sourceforge.net/projects/kompozer/ Webブラウザで。 PCまたはMacの任意のWebブラウザを使用できます。これはKompozerのダウンロードページです。これは、WindowsとMacの両方で動作する無料のHTML（WYSIWYG）エディターです。
クリック ダウンロード. ページ上部にある緑色のボタンです。これにより、別のダウンロードページに移動します。 5秒の遅延の後、ダウンロードが開始されます。
インストールファイルをダブルクリックします。 デフォルトでは、ダウンロードしたファイルはPCまたはMacの「ダウンロード」フォルダにあります。 Webブラウザーでそれらをクリックして、Kompozerインストーラーを起動することもできます。 Kompozerをインストールするには、次の手順を使用します。
- ウィンドウズ：
  - インストーラーがシステムに変更を加えることを許可するかどうかを尋ねられたら、をクリックしますはい.
  - クリック次イントロウィンドウで。
  - [同意します]の横にあるラジオボタンをクリックして、次.
  - クリック次デフォルトのインストール場所を使用するか、をクリックします ブラウズ 別のインストール場所を選択します。
  - クリック次次にクリックします次再び
  - クリック インストール
  - クリック終了
- マック：
  - Kompozerインストールファイルをダブルクリックします。
  - クリック KompoZer.app
  - 左上隅にあるAppleアイコンをクリックします。
  - クリック システム環境設定
  - クリック セキュリティとプライバシー
  - クリック一般タブ。
  - クリック とにかく開く ウィンドウの下部近く。
  - クリック 開いた ポップアップウィンドウで。
  - Kompozerアイコンをデスクトップにドラッグします。
  - ファインダーを開きます。
  - クリック アプリケーション フォルダ。
  - KompozerアイコンをデスクトップからApplicationsフォルダーにドラッグします。
Kompozerを開きます。 PCまたはMacでKompozerを開くには、次の手順を使用します
- ウィンドウズ：
  - クリック Windowsスタート メニュー。
  - 「Kompozer」と入力します
  - Kompozerアイコンをダブルクリックします。
- マック：
  - 右上隅にある虫眼鏡アイコンをクリックします。
  - 検索バーに「Kompozer」と入力します。
  - ダブルクリック Kompozer.app.
クリック ファイル. アプリの上部にあるメニューバーにあります。
クリック ファイルを開く. これは、[ファイル]の下にあるドロップダウンメニューの2番目のオプションです。これにより、開いているHTMLファイルを選択するために使用できるファイルブラウザが開きます。
HTMLファイルをクリックして、 開いた. これにより、HTMLファイルがKompozerで開きます。
クリック スプリット. これは、ページ上部の中央のタブです。これにより、下部にHTMLエディター、上部にプレビュー画面を含む分割画面が表示されます。
- 作業スペースを増やすために、アプリを拡大する必要がある場合があります。
HTMLドキュメントを編集します。 HTMLソースコード画面は下部にあります。この画面を使用して、メモ帳やテキスト編集の場合とほぼ同じ方法でHTMLを編集できます。プレビュー画面を使用して、次の手順でHTMLを編集することもできます。
- 右上隅のドロップダウンメニューを使用して、テキストタイプ（見出し、段落、電気ショック療法など）を選択します。
- クリックして入力し、テキストを追加します。
- 画面上部のパネルにあるボタンを使用して、太字、斜体、テキストの配置、インデント、またはリストをテキストに追加します。
- 画面上部のパネルにある色付きの四角をクリックして、テキストの色を変更します。
- クリック画像画面上部のアイコンを使用して、HTMLドキュメントに画像を追加します。
- チェーンリンクに似たアイコンをクリックして、HTMLドキュメントへのリンクを追加します。
クリック セーブ アイコン。 ドキュメントへの変更が完了したら、[ セーブ 画面上部のアイコン。フロッピーディスクに似たアイコンの下にあります。これにより、作業が節約されます。