「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）
そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
[toc]
『HTML』学習、基本のツボ！
『HTML』は何にコードを書くの？
『HTML』は、
『テキストエディタ』と呼ばれるものに書いて使います。
WindowsのPCを使っている方なら、『メモ帳』。
Macの方なら、『テキストエディット』です。
プログラミング学習に慣れてきたら、
もっと使いやすい『テキストエディタ』が他にもあります。
お好みのものを使って頂いても問題ありません。
（むしろ、慣れてきたら他のものを使った方が効率的でオススメです。）
今回の記事では、ご参考として、
Macの『テキストエディット』を使う場合の流れを載せておきます。
Macの『テキストエディット』を使う場合の流れ
-
『テキストエディット』を起動する
以下の手順で、『テキストエディット』を立ち上げましょう。
①『Launchpad』をクリック
②『テキストエディット』をクリック
-
HTMLコードが表示されるように設定する（未設定の方のみ）
初期設定のままだと、
HTMLコードがそのままで表示されない為、
初めての方は以下設定を行いましょう。①『テキストエディット』のメニュー［環境設定］を開く
②［環境設定］の［開く/保存］をクリック
③［ファイルを開くとき:］の［HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示］をチェック
④［環境設定］を閉じる
-
ファイルを作成する
新しくファイルを作る際は、
メニューの［ファイル］-［新規］をクリックします。
-
HTMLのファイルとして保存する
作成したファイルはそのままではHTML形式のファイルになっていません。
以下の通り、HTML形式にして保存しましょう。①テキストエディットの［ファイル］-［保存］をクリック
②ファイルの名前をHTMLに対応した名前に変更する
（ファイルの拡張子を「.html」にする）最初は、ファイル名が「名称未設定.txt」になっています。
ファイル名を「テスト（お好みの名前）.html」に変えましょう。
こうすることで、HTML形式のデータなんだなと認識されるようになります。
③保存した場所を指定する
お好みのファイル保存場所を選択します。
④保存する
「保存」ボタンをクリックして、
お好みのファイル保存場所にファイルを保存しましょう。
-
ブラウザで表示する
HTML形式で保存したファイルをダブルクリックすると、
ブラウザで表示出来ます。
（いつも皆さんが見ているwebページの感じで表示出来る）作成したHTMLファイルが、
どんな感じで表示されるのか確認する際は、
以下手順をご参照下さい。①「Finder」をクリックする
②保存しているHTMLファイルをダブルクリックする
保存したファイルを探して、
ダブルクリックしましょう。
③ブラウザで表示される
ファイルに書かれたHTMLコードに応じて、
実際にwebページの形で表示されます。こんな感じ↓↓
-
既にあるHTMLファイルを開いて作業する
既にあるHTMLファイルを再度作業したい場合は、
以下の手順で、ファイルを開いて作業します。①『テキストエディット』の［ファイル］-［開く］をクリック
②保存したファイルをクリックして開く
『テキストエディット』上で、
HTMLファイルが開きますので、
後はそこでやりたい追加作業を進めていきましょう。
HTMLを学習する時は、
ここでご紹介した基本的な手順は必ず使いますので、
覚えておきましょう！
『HTML』の超基本、「タグ」を理解しよう！
『HTML』の基本は、
「タグ」です。
「タグ」は、
必ず小なり記号（＜）で始まり、
大なり記号（＞）で終わります。
百聞は一見にしかず。
以下、基本的なHTMLの書き方を見てみましょう。
<p>ようこそ！プログラミング学習のツボへ！</p>これをブラウザで表示するとこんな感じになります。
「<p>」と「</p>」が「タグ」です。
最初の「<p>」を「開始タグ」、
お尻の「</p>」を「終了タグ」と言い、
「終了タグ」には、
「/（スラッシュ）」をつけます。
また、
「<」と「>」の間に、
「p」がありますが、
ここを変えることで、
「タグ」に挟まれた内容の意味が変わります。
今回の例で使った「p」は「段落」の意味です。
改行のないひとかたまりの文章を表示したい時に使います。
「p」のことを「タグ名」と言います。
ちなみに、「 段落」は英語で言うと、「paragraph（パラグラフ）」。
今回の例で使った「<p>」の「p」は、
「paragraph（パラグラフ）」の頭文字、「p」をとっています。
HTMLには、 色んな「タグ名」があります。
何の略なのか、
その「タグ名」になった背景もおさえておくと、
知識が身につきやすく、
学習方法として、オススメです。
更に見ていきましょう。
<p>と</p>で挟まれた、
「ようこそ！プログラミング学習のツボへ！」が、
実際に表示される内容ですが、
これを「要素の内容（コンテンツ）」と言います。
「要素」という単語がいきなり出てきましたが、
「要素」とは、「タグ」で挟まれた全体のこと。
今回の例で言えば、
「<p>ようこそ！プログラミング学習のツボへ！</p>」
のことを言います。
その他のポイントとして、
HTMLは、「要素の内容（コンテンツ）」以外、
全て「半角」で書きます。
区切りのスペース（空白部分）も半角です。
プログラミング学習初心者の方のミスとして、
「半角になっていなかった…」、
というのはプログラミングあるあるですので、
覚えておきましょう！
（かくいう私もよくミスりました。。）
色々と書いてきましたが、
『HTML』学習の入り口として、
ココがポイント
- 『HTML』は、表現したい内容を「タグ」で挟む
- 「タグ」にも種類があり、挟むタグの種類で意味が変わってくる
最初は、これだけおさえておきましょう！
まとめ
-
HTMLコードの入力には、「テキストエディタ」を使う
-
「テキストエディタ」は「メモ帳」や「テキストエディット」のこと
-
「テキストエディタ」の使い方、ブラウザへの表示の仕方は覚えておこう！
-
『HTML』の基本はタグで挟むこと
-
タグには色々な種類があり、挟むタグで意味が変わってくる
いかがでしたでしょうか？
今回は、『HTML』学習初心者の方向けに、
超基本の解説をさせて頂きました。
覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！
今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。
今回の記事が、
少しでも皆さんのお役に立てたら幸いです！