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

最終更新日:2017年09月18日  (初回投稿日:2010年09月09日)

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

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

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

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

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

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

<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
日本語では「小なり記号」。不等号の記号です。
key1Shift (シフト)キーを押しながら
←このキーを押します。
> greater-than sign
日本語では「大なり記号」。不等号の記号です。
key2Shift (シフト)キーを押しながら
←このキーを押します。
/ slash
日本語では「スラッシュ」。斜線です。
key3←このキーを押します。
「<」や「>」を、不等号の記号と紹介していますが、要はカギカッコととらえて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要素を増やしていきますよ。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTML5 HTML html要素

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.