ほんっとにはじめてのHTML5とCSS3：[1] テキストエディタで書いてみよう

[1] テキストエディタで書いてみよう

最終更新日：2017年10月30日　（初回投稿日：2010年09月09日）

まずはとにかくHTMLというモノを書いてみましょう。

使用する要素	`<html> 〜 </html>`

テキストエディタで新規ファイルを開く

テキストを書いて保存できるソフトウェアを起動してください。
テキストファイルを作れるものなら何でもOKです。
OS に標準でついているテキストエディタ（Winなら「メモ帳（Notepad）」Macなら「テキストエディット」）でも、今日のところは構いません。

もしも既にコーディング用のテキストエディタ（Dreamweaver とか Atom、Notepad++など）をお持ちならそっちで。
テキストエディタについては後半の「テキストエディタはコーディング用のものを用意しよう」もご覧ください。

テキストエディタで「新規ファイル」を開き、そこに次のようにタイプしてみましょう。
半角英数字で入力します。全角（日本語入力）で書いちゃダメよ。

<html>
</html>

HTMLでは大文字小文字の区別はないので
<HTML>
</html>
と大文字のタグと小文字のタグを混ぜて書いてもエラーにはなりません。
ですが、意味もなく混ぜたりせずに、小文字で統一して書くクセをつけたほうがイイです。将来 HTML文書の中に他の言語（ CSSとか XMLとか）を書く機会も出てくるから。
CSSではクラス名やID名で大文字小文字の区別がある。XMLは大文字小文字の区別があります。混ぜて書くクセがついてるとエラーで困るときが来るかも。また、サーバの OSも大文字小文字の区別があるものが多いです。混ぜて書くクセがついていると、HTML上では大丈夫でもサーバのOSが理解しなくてファイルが表示されないなどの問題が生じます。
小文字だけで書くのが一般的。いつか id名とかに大文字を効果的に入れたりする機会もあるから。今のところは小文字で行こう。

<html> は「ここからhtml要素が始まる」と指示し </html> は「ここでhtml要素は終了」と指示しています。
指示する相手はブラウザです。HTML文書はブラウザに対する「指示書」なのです。

HTMLでは、<html> の他に <h1> や <p>、<div> などたくさんの要素がありますが、
これらの要素はたいてい <　> で囲まれた開始タグで始まり、</　> で囲まれた終了タグで終わります。（終了タグの無い要素もあります。<br>とか。それはまた別の記事で）

<	less-than sign 日本語では「小なり記号」。不等号の記号です。	Shift (シフト)キーを押しながら ←このキーを押します。
>	greater-than sign 日本語では「大なり記号」。不等号の記号です。	Shift (シフト)キーを押しながら ←このキーを押します。
/	slash 日本語では「スラッシュ」。斜線です。	←このキーを押します。
「<」や「>」を、不等号の記号と紹介していますが、要はカギカッコととらえてOK。

さて、今書いた<html>と</html>の間に、何でも好きなテキストを書いてみましょう。

<html>
本日は晴天なり〜！
</html>

拡張子「.html」をつけて保存する

このファイルに適当なファイル名をつけて保存します。拡張子は「.html 」にします。
HTML関連では拡張子は絶対必要。省略できません。

ブラウザは拡張子を頼りにファイルの種類を理解します。HTMLファイルなら .html です。
ファイルの種類ごとに固有の拡張子があります。
例えば、画像なら .gif .jpg .pngなど、CSSは .css、JavaScriptは .js といった具合です。

テキストエンコーディングを指定して保存しよう

保存する時の「テキストエンコーディング」は「UTF-8」にしましょう。
HTML5 のテキストエンコーディングは UTF-8を使用することが推奨されています。

テキストエディタによっては「UTF-8」は「BOMあり」「BOM無し」を選択できる場合がありますが、「BOM無し」にしておこう。
「BOM無し」は「UTF-8N」という表現もあります。

保存したファイルを再度開いたときに、文字化けするなど、うまく開けない場合は、テキストエンコーディングを見直してみてください。

Windows の「メモ帳」は、選択肢が「BOMあり」しか無いそうなんですよ！
今日のところは「あり」でもOKですが、将来的には「メモ帳」ではなく他のテキストエディタを使ったほうがいいです。
下の「テキストエディタはコーディング用のものを用意しよう」を参考にしてください。

「BOM」とは Byte Order Mark（バイトオーダーマーク）の略で「Unicode」特有の仕組み。
「Unicode」には「UTF-16」「UTF-32」もあり、これらは複数の種類があるので「BOM」で区別するんだそうです。
「UTF-8」には複数の種類は無いので「BOM」は無くて良いそうです。（付ければ、コンピュータに「これは UTF-8 で書かれています」と伝えるんだって）
WordPress では「BOMなし」限定（PHP で不具合が出るなどがあってか）ですし、やはり UTF-8 は「BOM」は付けないほうが良い と思います。

フォルダを作ってその中に保存しよう

保存する場所は、自分の分かりやすい場所にフォルダを作って、その中に保存してください。フォルダには適当な名前をつけてください。

フォルダ名には、半角英数字の他に「_（アンダーバー）」や「-（ハイフン）」が使えます。その他の記号は使わないほうが無難です。

今後、画像を配置したり、別のHTMLファイルにリンクを貼ったりします。このとき、URL（リンクをたどる道筋）がとても重要です。
ファイルをフォルダ（ディレクトリ）で整理すると、URLも書きやすくなります。そのためにもぜひ、フォルダの中に保存しておいてください。

保存方法はコチラを↓参考にしてください。

テキストエディタはビジネス文書を簡単に制作するために「リッチテキスト」がデフォルトのファイル形式になっているものが多いです。
リッチテキストとは、文字の色や大きさなどの「レイアウト情報」を含んでいるファイル形式です。

ですがこの「リッチテキスト」は、HTML文書には使えません。HTMLはマークアップ言語なので、その言語以外の情報があったらブラウザに理解されず表示されません。
必ず単なるテキストファイルにしてから保存してください。

Winのテキストエディタ
●「メモ帳」は、保存時にファイル名に拡張子「.html 」を付けて、ファイルの種類はそのまま「テキスト文章（*txt）」で保存します。文字コードを「UTF-8」にすることもお忘れなく。

Macのテキストエディタ
● Macの「テキストエディット」では、新規ファイルはデフォルトでリッチテキストになってます。
メニューバー→フォーマット→「標準テキストにする」で、テキストファイルにしてから、拡張子「.html 」を付けて保存します。テキストエンコーディングを「UTF-8」にすることもお忘れなく。

ブラウザでプレビューする

保存したファイルをブラウザで開きます。
こんなふうに ↓ 自分で書いたテキストだけが表示されれば成功。

上のプレビューは Chrome（on MacOS）でファイルを開いたもの。
ファイル名は「aaa.html」とし、デスクトップ上の「html_test」というフォルダに保存しました。

自分で作ったファイルをブラウザで開いても「何も表示されない」なら、何かが間違ってます。
タイプミス（「>」や「/」が足りない、または多い）、半角じゃなく全角で書いちゃってる（そんなバカなことしないよって思うだろうけど、けっこうありがちですw）フォーマットが「テキストファイル」じゃない、テキストエンコーディングが「UTF-8」じゃないなど、よ〜く見直してみてください。

サンプルファイルをダウンロードできます

で、たぶん、リッチテキストや文字コードで手こずっているかなあ？と思い、上のプレビューのファイルをダウンロードできるようにしました。
↓クリックでダウンロード用のページが別ウィンドウで開きます。
サンプルダウンロードページへ

ダウンロードしたファイルを、テキストエディタで開く時は、必ず「標準テキスト」で開いてくださいね。（リッチテキストで開かないように）

テキストエディタはコーディング用のものを用意しよう

Windowsの「メモ帳」は 改行コード「CR+LF」しか扱えないんだそうです。
で、上でダウンロードしたサンプルファイルを「メモ帳」で開くと、改行コード「LF」を認識せず「 <html> 本日は晴天なり〜 </html> 」と「改行なし状態」で表示されます。
今はコードが少ないからイイけど、そのうちコードが増えていくと見にくくて大変です。
（情報をくださった平野様ありがとうございます）

「メモ帳」は UTF-8 を「BOMあり」でしか保存できないこともありまして、やはり OS 付属のテキストエディタでは力不足。
余計な問題を抱えずにスムーズに勉強するには、コーディング用のエディタを用意したほうがいいです。やっぱり。

無料のものも豊富にありますので、ご自分の OS で使えるテキストエディタをググってみてください。
例えば「Windows　テキストエディタ　コーディング　フリー」なんてググれば、無料のテキストエディタの情報がいっぱい出てくるはず。

Win なら「Notepad++（フリー）」が人気らしい。有料の「秀丸エディタ」も有名。
Mac なら「Atom（フリー）」がイイらしい。有料の「Coda」も良さげです。
私は Adobe Dreamweaver を使っています。単に使い慣れているので何となく。

コーディング用のエディタなら、タグを色分けしてくれたり、複数ファイルをタブ形式で表示できたりしてほんっと便利です。ぜひ、ダウンロードして使ってみてください。

リナックスアカデミーさんの「エンジニアの入り口」で、フリーテキストエディタを紹介するページがありましたので、リンクを貼っておきます。
（2017年情報です。別ウィンドウで開きます）
【Windows編】フリーテキストエディタ13選！初心者にもおすすめ
 【Mac編】フリーテキストエディタ13選！初心者にもおすすめ

次回予告

次回は、タイトル（<title>要素）を設定してみましょう。
だんだんHTML要素を増やしていきますよ。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-10-30（Mon）│
投稿日：2010-09-09（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿