HTMLファイルを作るときにMacはテキストエディット、Windowsではメモ帳でつくるときの方法をまとめました。
テキストエディタを使用したほうが早いのですが、いろいろなHTMLファイルの作り方を覚えておくと何かの場面で使うときがきたらスムーズにHTMLファイルを作れるので覚えておこうと思います。
HTMLファイルの作り方を覚えるときに気をつけること
HTMLファイルを作成するときの作り方で気をつけることはそんなに多くはありません。
- テキストファイルを保存するときの拡張子は「.html」で保存する
- 文字コードの指定をUTF-8でファイル保存する
HTMLではHTMLファイルの文字コード、そしてHTMLファイルを表示するブラウザの文字コードを必ず同じにします。
これはブラウザでHTMLファイルを表示したときに文字化けが発生しないようにするために必ず気をつけることです。
あとはHTMLファイルの作り方の流れさえ覚えてしまえば、ホームページに必要なHTMLファイル作成ができます。
MacでHTMLファイルの作り方を覚える
MacでHTMLファイルを作るときの大まかな流れを先に覚えておきます。
- HTMLファイルが使えるようにテキストエディットの環境設定
- HTMLファイルを入れるフォルダの作成
- index.htmlファイルの作成
- HTMLのサンプルコードを記述して表示の確認
上記の流れを以下から細かく説明していきます。
テキストエディットの環境設定
まずはMacのアプリケーションにある「テキストエディット」を開きます。
HTMLファイルが使えるようにテキストエディットの環境設定を確認。
フォーマットがリッチテキストになってたら「標準テキスト」に変更します。
環境設定の「開く/保存」に移動します。
「ファイルを開くとき」のところ
「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示」にチェックします。この部分はテキストエディットでHTMLファイルを編集するときにチェックを入れておかないとHTMLコードとして表示されないためです。
そして「ファイルを保存するとき」では「標準テキストファイルに拡張子.txtを追加」にチェックしてあればチェックを外します。
拡張子はファイルの後ろに付くのですが、ファイルの性質が分かるようにするための仕組みなってます。チェックを外したのはHTMLファイルをつくるときに自動で「.txt」が付いてしまいファイルの性質が変わらないようにするためです。
最後にHTML保存オプションでエンコーティングを「unicode(UTF-8)」にします。
テキストエディットでHTMLファイルを作る
次にMacでHTMLファイルを入れるフォルダ作成をします。
- finderをクリック
- 書類をクリック
- 歯車のアイコンをクリックして新規フォルダをクリック
- 新規フォルダが表示されるのでフォルダ名を決めます。
HTMLファイルを入れるフォルダを「書類」にしたのは今回、わかりやすくするためなので書類じゃない場所でも大丈夫です。
そしたらテキストエディットを開きます。
先ほど作成したフォルダが「書類」に入ってるので書類をクリック
決めた名前のフォルダをクリック
今の状態が決めた名前のフォルダの中にいる状態です。
この状態で「新規書類」をクリックするとテキストエディットが開くのでHTMLファイルにHTMLタグでマークアップしていきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
</head>
<body>
<h1>大見出し１</h1>
<p>文章文章文章文章</p>
</body>
</html>
HTMLファイル作成の後に表示確認をするのでHTMLをテキストエディットに書きます。
上記をコピペでもおっけーです。
HTMLを記述したらMacの左上の「ファイル」から保存をクリック。
保存して開いた画面に表示された名前に「index.html」と入力。
index.htmlを格納するフォルダが先ほど決めたフォルダか確認。
標準テキストのエンコーティングが「unicode(UTF-8)」になってることを確認して保存をクリック。
もし保存のときに拡張子を.htmlにしてもいいですか？と表示されたらhtmlを使用を選んでクリックします。
そうすると作成した名前のフォルダの中にHTMLファイルのindex.htmlファイルが出来上がります。
HTMLファイルをブラウザで確認
作成したHTMLファイルの表示はブラウザで確認ができます。
HTMLファイルを作ったら、作ったHTMLファイルがしっかり画面に表示できるか確認することも大切です。今回はそのためにHTMLファイルにはindex.htmlを作りました。
HTMLファイルの表示確認方法は、Macは作成したフォルダに入ってるindex.htmlをダブルクリックします。
そうするとブラウザが開き、先ほど作ったHTMLファイルの中の文だけが画面に表示されたらMacでHTMLファイル作成の成功です。
HTMLファイルをダブルクリックして既定のブラウザで表示確認するのではなくHTMLファイルの開き方をブラウザを指定して表示したい場合には、以下の「MacでHTMLファイルの開き方」が参考になります。
作成したHTMLファイル編集と保存のやり方
Macで作ったHTMLファイルを編集して保存するやり方も必要になるので覚えておきます。
テキストエディットを開いて、作ったファイルまで行き、ファイルをクリックして開くを選択。
HTMLタグや文を編集したら、画面左上のファイルから保存をクリックでファイルの内容が上書きされ保存されます。
WindowsでHTMLファイルの作成を覚える
HTMLファイルをWindowsで作る方法です。
HTMLファイルを作る大まかな流れ
- HTMLファイルを入れるフォルダの作成
- Windowsのメモ帳でHTMLの記述
- HTMLファイルの保存
- 作成したHTMLファイルをブラウザで表示確認
上記の流れを細かく説明していきます。
エクスプローラーでフォルダを作成
Windowsの場合は、まずはWindowsの「エクスプローラー」を開いて左のサイドバーから「ドキュメント」をクリック。
キーボードのCtrl＋Shift＋Nで新しいフォルダを表示させてフォルダ名を入力します。
今回はわかりやすくするために「ドキュメント」内でフォルダを作成したので、フォルダを置く場所はぞれぞれでも大丈夫です。
これでWindowsでHTMLファイルを入れるフォルダが完成したのでHTMLファイルを作っていきます。
HTMLファイルをメモ帳で作る方法
Windowsの「メモ帳」を開いてHTMLファイル作成の後の表示確認用としてHTMLコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
</head>
<body>
<h1>大見出し１</h1>
<p>文章文章文章文章</p>
</body>
</html>
HTMLを記述したらメモ帳の左上のファイルで名前を付けて「上書き保存」をクリック。
Windowsエクスプローラーの画面が表示するので以下の項目を入力します。
- ファイル名をindex.htmlと入力
- ファイルの種類を「すべてのファイル」にします。
- 文字コードを「UTF-8」にします。
保存をクリック。
作成したhtmlファイルにファイル拡張子が表示されてない時はWindowsのエクスプローラー左上の「表示」を選択して、右のほうにある「ファイル名拡張子」にチェックを入れると拡張子が表示されます。HTMLファイル作成後にファイルの種類が分かりやすいようにチェックを入れておくといいかと思います。
これでWindowsのHTMLファイルの作り方は完成ですが、HTMLファイルの表示チェックもしておきます。
作成したファイルの表示確認
Windowsのエクスプローラーからドキュメントをクリックします。
先ほど作成したフォルダをクリックして、その中に入ってるindex.htmlをダブルクリック。
そうするとブラウザが立ち上がって作成したhtmlファイルの中の文が画面に表示されたらWindowsのHTMLファイル作成は成功してます。
HTMLファイルをダブルクリックして既定のブラウザで表示確認するのではなくHTMLファイルの開き方をブラウザを指定して表示したい場合には、以下の「Windows10でHTMLファイルの開き方」が参考になります。
メモ帳でHTMLの編集と保存のやり方
Windowsでメモ帳を開いて、左上のファイルから「開く」を選択するとフォルダが開くので、ドキュメントをクリックしてHTMLファイルを選択。そして開くをクリックするとメモ帳にHTMLファイルが表示されます。
このときに、もし開くファイルがエクスプローラーに表示されてない場合は、テキスト文書だけになってると思うので「すべてのファイル」にすると作成したHTMLファイルが表示されます。
HTMLファイルを編集したらメモ帳の左上のファイルから上書き保存をクリックで保存できます。
ブラウザで表示させてるまま、編集したHTMLファイルの表示をブラウザで確認したい場合は、ブラウザのリロードをすると更新された表示が確認できます。
