手作業でウェブサイトをコーディングしたい場合は、メモ帳（Windows）やTextEdit（macOS）のような基本的なテキストエディタでHTMLファイルを編集できます。画面上で要素を動かしたり、ライブプレビューを見たりしたい場合は、DreamweaverやKompozerのようなWYSIWYG（What You See Is What You Get）エディタを使うことができます。このWikiHowでは、標準またはビジュアル編集アプリでHTMLファイルを開いて編集する方法を説明します。
方法1
Windowsでメモ帳を使う
-
Windowsのスタートボタン をクリックします。タスクバーにWindowsのロゴがあるボタンです。デフォルトでは左下にあります。スタートメニューが表示されます。
-
メモ帳」と入力します。スタートメニューにメモ帳が表示されます。
-
メモ帳をクリックします。青い表紙のメモ帳のようなアイコンが表示されます。
-
ファイル］をクリックします。メモ帳のメニューバーの一番上にあります。ドロップダウンメニューが表示されます。メモ帳でファイルを開くためのファイルブラウザが表示されます。
-
開く」をクリックします。ファイル」ドロップダウンメニューの2番目のオプションです。
-
ファイルの種類のドロップダウンメニューで「すべてのファイル」を選択します。テキスト文書（.txt）」というドロップダウンをクリックし、ドロップダウンメニューで「すべてのファイル」を選択します。これにより、ファイルブラウザにすべてのドキュメントタイプ（HTMLファイルを含む）が表示されます。
-
HTMLファイルを選択し、「開く」をクリックします。HTMLドキュメントがメモ帳で開きます。メモ帳でHTMLコードを編集することができます。
- または、メモ帳でも可能です。
-
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」と書かれているテキストを画像のウェブアドレスに置き換えます。
-
ファイル」をクリックします。画面上部のメニューバーにあります。
-
名前を付けて保存」をクリックします。ファイルを保存するためのダイアログボックスが開きます。
- 既存のファイル名とファイルタイプで保存するには、「ファイル」の下にあるドロップダウンメニューから「保存」をクリックします。
-
すべてのファイル」を選択します。Save as Type "の隣にあるドロップダウンメニューで "All Files "を選択します。
-
ファイル名を入力します。ファイル名」の隣にあるボックスにファイル名を入力します。
-
ファイルの最後に「.html」と入力します。ファイル名」ボックスにファイル名を入力したら、ファイル名の最後に拡張子「.html」を付けます。この拡張子がないと、HTMLファイルではなく、.txtファイルとして保存されます。
-
保存」をクリックします。これでファイルが保存されます。
方法2
Macでテキストエディットを使う
-
虫眼鏡アイコン をクリックする。Macのデスクトップの右上にあります。検索バーが表示されます。
-
検索バーに「TextEdit」と入力します。検索結果に一致するアプリのリストが表示されます。
-
TextEdit.app をクリックします。検索結果の一番上にあります。紙とペンを模したアイコンの隣にあります。
-
ファイル」をクリックします。TextEditが開いているときは、画面上部のメニューバーにあります。
-
開く」をクリックします。ファイルブラウザが開き、Macを操作してファイルを開くことができます。
-
HTMLファイルをクリックし、「開く」をクリックします。HTMLファイルには、ファイル名の後に「.html」という拡張子がついています。ファイルブラウザを使ってHTMLファイルに移動し、クリックして選択します。次に「開く」をクリックして、HTMLファイルをテキストエディットで開きます。
-
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」と書かれているテキストを画像のウェブアドレスに置き換えます。
-
ファイル」をクリックします。画面上部のメニューバーにあります。
-
保存をクリックします。ファイル」の下のドロップダウンメニューにあります。これでHTMLファイルが保存されます。
- ファイル名を変更するには、「ファイル」のドロップダウンメニューから「名前の変更」をクリックします。画面上部に新しいファイル名を入力します。その際、必ず先頭に拡張子「.html」を付けてください。
方法3
Dreamweaverを使う
-
Dreamweaverを開きます。Dreamweaverには、真ん中に「Dw」と書かれた緑色の四角に似たアイコンがあります。Windowsのスタートメニューにあるアイコンをクリックするか、Macの場合はアプリケーションフォルダをクリックしてDreamweaverを開きます。
- Adobe Dreamweaverには、.NET Frameworkが必要です。 月額20.99ドルからサブスクリプションを購入できます。
-
ファイル」をクリックします。画面上部のメニューバーにあります。
-
開く」をクリックします。ファイル」の下のドロップダウンメニューにあります。
-
HTMLドキュメントを選択し、「開く」をクリックします。ファイルブラウザでコンピュータ上のHTML文書を選択し、クリックして選択します。右下の「開く」をクリックします。
-
分割」をクリックします。ページ上部の真ん中のタブです。下にHTMLエディタ、上にプレビュー画面が表示されます。
-
HTMLドキュメントを編集します。HTMLを編集するには、HTMLエディタを使用します。DreamweaverでHTMLを編集する方法は、メモ帳やテキストエディットでHTMLを編集する方法とあまり変わりません。HTMLタグを入力すると、一致するHTMLタグの検索メニューが表示されます。HTMLタグをクリックすると、そのタグの開始タグと終了タグが挿入されます。Dreamweaverは、すべてのHTML要素に開閉タグがあるかどうかを確認します。
- または、HTMLエディタでHTML要素を挿入したい場所をクリックし、画面上部のメニューバーで［挿入］をクリックすることもできます。ドロップダウンメニューから挿入したい項目をクリックすると、HTMLコードが自動的に追加されます。
-
ファイル」をクリックします。HTML文書の編集が終わったら、画面上部のメニューバーで「ファイル」をクリックします。
-
保存をクリックします。ファイルの下のドロップダウンメニューにあります。これでHTML文書が保存されます。
方法4
Kompozerを使う
-
ウェブブラウザにアクセスします。PCでもMacでも、どのウェブブラウザでもかまいません。これはKompozerのダウンロードページです。WindowsでもMacでも使える無料のHTML（WYSIWYG）エディターです。
-
ダウンロードをクリックしてください。ページの一番上にある緑色のボタンです。ダウンロードページに移動します。5秒後にダウンロードが始まります。
-
インストールファイルをダブルクリックします。デフォルトでは、ダウンロードしたファイルはPCまたはMacの「ダウンロード」フォルダにあります。また、ウェブブラウザでファイルをクリックして、Kompozerインストーラを起動することもできます。以下の手順でKompozerをインストールしてください：
-
Windows：
- Windows：インストーラーがシステムに変更を加えることを許可するかどうか尋ねられたら、[はい]をクリックします。
- イントロウィンドウで[次へ]をクリックします。
- I accept the agreement "の横にある放射状のボタンをクリックし、[Next]をクリックします。
- Next（次へ）」をクリックしてデフォルトのインストール場所を使用するか、「Browse（参照）」をクリックして別のインストール場所を選択します。
- Next（次へ）をクリックし、もう一度Next（次へ）をクリックします。
- インストールをクリックします。
- 完了をクリックします。
-
Macの場合
- Kompozerインストールファイルをダブルクリックします。
- KompoZer.appをクリックします。
- 左上のアップルアイコンをクリックします。
- システム環境設定]をクリックします。
- セキュリティとプライバシーをクリック
- 全般タブをクリックします。
- ウィンドウの一番下にある「とにかく開く」をクリックします。
- ポップアップウィンドウで[開く]をクリックします。
- Kompozerアイコンをデスクトップにドラッグします。
- Finderを開きます。
- アプリケーションフォルダをクリックします。
- Kompozerアイコンをデスクトップからアプリケーションフォルダにドラッグします。
-
Windows：
-
Kompozerを開きます。以下の手順で、PCまたはMacでKompozerを開きます。
-
Windowsの場合
- Windowsのスタートメニューをクリックします。
- "Kompozer "と入力します。
- Kompozerアイコンをダブルクリックします。
-
Mac
- 右上の虫眼鏡アイコンをクリック。
- 検索バーに「Kompozer」と入力。
- Kompozer.appをダブルクリックします。
-
Windowsの場合
-
ファイル」をクリックします。アプリ上部のメニューバーにあります。
-
ファイルを開く」をクリックします。ファイル」の下にあるドロップダウンメニューの2番目のオプションです。ファイルブラウザが開き、開いているHTMLファイルを選択できます。
-
HTMLファイルをクリックし、「開く」をクリックします。KompozerでHTMLファイルが開きます。
-
分割」をクリックします。ページ上部の真ん中のタブです。下にHTMLエディタ、上にプレビュー画面が表示されます。
- 作業スペースを確保するために、アプリを拡大する必要があるかもしれません。
-
HTMLドキュメントを編集します。HTMLソースコードの画面は下にあり、この画面を使ってメモ帳やテキストエディットと同じようにHTMLを編集することができます。また、プレビュー画面を使って、以下の手順でHTMLを編集することもできます：
- 右上のドロップダウンメニューでテキストの種類（見出し、段落など）を選択します。
- クリックしてテキストを入力します。
- 画面上部のパネルにあるボタンを使って、テキストに太字、斜体、文字揃え、インデント、リストを追加します。
- 画面上部のパネルで色の付いた四角をクリックすると、テキストの色を変更できます。
- HTML文書に画像を追加するには、画面上部の画像アイコンをクリックします。
- HTML文書にリンクを追加するには、チェーンリンクに似たアイコンをクリックします。
-
保存アイコンをクリックします。文書の変更が終わったら、画面上部の保存アイコンをクリックします。フロッピーディスクに似たアイコンの下にあります。これで作業が保存されます。
コメント
最新を表示する
NG表示方式
NGID一覧