コンテンツ
HTMLの基礎を身につけよう
こんにちは、ホームページ制作のオイゾウです！
今回は、ホームページを作る上で知識として身につけてなければならない「HTML」（エイチティーエムエル）について解説をします。
オイゾウ
HTMLという言葉を聞いたことがありますか？
篠田さん
ない。
ジョージさん
聞いたことはあるけど、意味は知らない。
オイゾウ
HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、ウィキペディアによると「ウェブ上の文書を記述するためのマークアップ言語である」。
篠田さん
訳が分からないよ。
オイゾウ
分かりました、では「篠田さんの土産物屋をホームページで宣伝する」という前提で説明します。
篠田さん、お店の名前と紹介文を書いてみてもらえますか？
篠田さん、お店の名前と紹介文を書いてみてもらえますか？
篠田さん
こんな感じでどうかな？
しのだ屋
しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。
オイゾウ
ありがとうございます。
とても簡潔で分かりやすい紹介文ですね！
ではこれをウェブで見れるようにするために、最低限いくつかやらなければいけないことがあるので、それを順に説明しますね。
とても簡潔で分かりやすい紹介文ですね！
ではこれをウェブで見れるようにするために、最低限いくつかやらなければいけないことがあるので、それを順に説明しますね。
1. HTMLファイルで記述する
HTMLファイルとはファイル形式の1つで、拡張子は.htmlまたは.htmになります。
拡張子については「拡張子（かくちょうし）を理解してパソコン初心者を卒業！」にてご確認ください。
オイゾウ
このHTMLファイルを、Windowsならメモ帳で、Macならテキストエディットで作ってみましょう！
篠田さんはMacbookを購入したということですので、Macのテキストエディットで先ほどの文章を入力し、拡張子を「.html」にして「index.html」というファイル名で保存してみてください。
このファイルを開くと、先ほど篠田さんが書いた文章がブラウザで見れるかと思います。
試しに以下の「index.html」というアイコンをクリックしてみてください。
篠田さんはMacbookを購入したということですので、Macのテキストエディットで先ほどの文章を入力し、拡張子を「.html」にして「index.html」というファイル名で保存してみてください。
このファイルを開くと、先ほど篠田さんが書いた文章がブラウザで見れるかと思います。
試しに以下の「index.html」というアイコンをクリックしてみてください。
篠田さん
ほー。
感動だな～。
感動だな～。
ジョージさん
意外と簡単だね。
2. CSSファイルで装飾する
CSSとはCascading Style Sheets（カスケーディングスタイルシート）の略で、HTMLファイルなどのスタイルを指定するための言語です。
オイゾウ
CSSファイルにスタイルを記述することによって、例えば背景の色を変えたり、背景に画像を配置したり、文字の色を変えたり、大きくしたり、余白や行間を調節したり、いろいろできるんです！
ジョージさん
そうするとさっきのシンプルな表示をもっと凝った感じにできるってこと？
オイゾウ
そういうことです、ちなみにHTMLファイルに直接スタイルを指定する記述もできますが、一般的にはスタイルの指定はCSSファイルで記述します。
その理由や、CSSについての詳しいことはまた別の機会に詳しく説明しますね。
本日のお題はHTMLですので！
その理由や、CSSについての詳しいことはまた別の機会に詳しく説明しますね。
本日のお題はHTMLですので！
篠田さん
要するに、デザインにこだわらなければこれでもうOKってこと？
オイゾウ
これでまだ終わりではありません。
今の段階ではローカル（自分のパソコン）にこのファイルがあるというだけで、ウェブに公開されたわけではないのです。
つまり、この時点で見ることができるのは篠田さんのパソコンだけです。
これでは公開したと言えませんし、誰にも見てもらえません。
今の段階ではローカル（自分のパソコン）にこのファイルがあるというだけで、ウェブに公開されたわけではないのです。
つまり、この時点で見ることができるのは篠田さんのパソコンだけです。
これでは公開したと言えませんし、誰にも見てもらえません。
ジョージさん
ってことは、これを公開するために何かしなければいけないってこと？
オイゾウ
はいその通りです！
このファイルを、サーバにアップロードする必要があります。
アップロードは自分のパソコンからサーバなどにデータを渡すことで、対義語のダウンロードは逆にデータを受け取ることです。
このファイルを、サーバにアップロードする必要があります。
アップロードは自分のパソコンからサーバなどにデータを渡すことで、対義語のダウンロードは逆にデータを受け取ることです。
3. FTPソフトでサーバにアップロードする
FTPはFile Transfer Protocol（ファイルトランスファープロトコル）の略で、2台のコンピューター間（この場合は自分のパソコンとサーバ）でデータを送受信するための、通信上の約束事です。
このソフトを使うことで、サーバに先ほどの「index.html」というファイルをはじめ、様々なファイルやフォルダ（ディレクトリ）をアップロードすることができます。
ジョージさん
アップロードとダウンロードの意味は分かるけど、特別な方法とかがあるの？
オイゾウ
あります。
自分のパソコンとサーバとのデータのやり取りは、FTPソフトを使います。
FTPソフトの使い方についてはまた別の機会に説明するとして・・・。
サーバに先ほどのHTMLファイルをアップロードすれば、篠田さんのお店「しのだ屋」の情報が全世界に発信されるというわけです！
自分のパソコンとサーバとのデータのやり取りは、FTPソフトを使います。
FTPソフトの使い方についてはまた別の機会に説明するとして・・・。
サーバに先ほどのHTMLファイルをアップロードすれば、篠田さんのお店「しのだ屋」の情報が全世界に発信されるというわけです！
篠田さん
何となく分かってきた。
でもさっきのファイルだと、ただのワープロ文章みたいでホームページっぽくないよね。
俺が思うには、最初に店のロゴがあって、その下には写真や文章が載ってたりして、クリックしたら違うページに変わってとか、そういうのがホームページって印象なんだけど。
でもさっきのファイルだと、ただのワープロ文章みたいでホームページっぽくないよね。
俺が思うには、最初に店のロゴがあって、その下には写真や文章が載ってたりして、クリックしたら違うページに変わってとか、そういうのがホームページって印象なんだけど。
オイゾウ
分かりました。
では、HTMLファイルの記述にはルールがありますので、それを説明したいと思います。
まずはこちらをご覧ください。
では、HTMLファイルの記述にはルールがありますので、それを説明したいと思います。
まずはこちらをご覧ください。
<html>
<head>
<meta charset=“UTF-8”>
<title>しのだ屋</title>
</head>
<body>
<h1>しのだ屋</h1>
<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>
</body>
</html>[/html]
ジョージさん
何のことだか、さっぱり・・・。
オイゾウ
「<」で始まり「>」で終わり、中には英語で「head」とか「body」とかありますが、これらを「タグ」と呼びます。
そしてこのタグには基本的に「開始タグ」と「終了タグ」があります。
その開始タグから終了タグまでを「要素」と呼びます。
図で説明すると以下のようになります。
そしてこのタグには基本的に「開始タグ」と「終了タグ」があります。
その開始タグから終了タグまでを「要素」と呼びます。
図で説明すると以下のようになります。
篠田さん
急に話が難しくなってきたぞ。
この辺で諦めておこうかな・・・。
この辺で諦めておこうかな・・・。
オイゾウ
篠田さん、諦めるのが早いです（笑）。
もう少しがんばって覚えてください！
HTMLは慣れればそんなに難しくありませんから大丈夫ですよ～。
ちなみに図の「h1」とはHTMLのタグの一種で、見出しを定義するものです。
見出しのタグはh1以降h2、h3、h4・・・とあり、h1はこれら見出しタグの中で最も高い階層（最も重要な見出し）になります。
もう少しがんばって覚えてください！
HTMLは慣れればそんなに難しくありませんから大丈夫ですよ～。
ちなみに図の「h1」とはHTMLのタグの一種で、見出しを定義するものです。
見出しのタグはh1以降h2、h3、h4・・・とあり、h1はこれら見出しタグの中で最も高い階層（最も重要な見出し）になります。
ジョージさん
見出しとは？
オイゾウ
新聞や雑誌、もちろんインターネットでもそうですが、小さい文字で書かれた記事には、その記事の内容を一言で説明したような、記事の前に大きくて太い文字で書かれたものがあると思いますが、それが見出しです。
HTMLというのは、このように様々な要素をタグを使うことによって定義することができるんです！
HTMLというのは、このように様々な要素をタグを使うことによって定義することができるんです！
篠田さん
ますます分からないぞ・・・。
オイゾウ
まあ、完璧に覚えなくても大丈夫ですから「HTMLにはHTMLの記述のルールがある」ということを理解してもらえれば、とりあえずはOKですよ。
本文を囲っているpタグは文章の段落を定義しています。
どんなときに使うかというと、主に文章のひとかたまりをp要素として表現したいときに使います。
本文を囲っているpタグは文章の段落を定義しています。
どんなときに使うかというと、主に文章のひとかたまりをp要素として表現したいときに使います。
ジョージさん
これは覚えるのが大変だな～。
このタグっていうのは、何種類くらいあるの？
このタグっていうのは、何種類くらいあるの？
オイゾウ
増えたり減ったりしますが、確か100種類以上はあります。
ジョージさん
えー、そんなに？
篠田さん
これは俺には覚えるのは無理だな・・・。
そろそろ潮時かな・・・。
そろそろ潮時かな・・・。
オイゾウ
ちょっと待ってください！
まず、全てを覚える必要はありませんので安心してください。
実際に使うのはそれほど多くありません。
まず、全てを覚える必要はありませんので安心してください。
実際に使うのはそれほど多くありません。
ジョージさん
そうは言ってもねぇ・・・。
だいたい出だしから「<!DOCTYPE html>」って、何て書いてあるか分からないし。
ドックタイプ？
しかも「！」ビックリマークは単語の後ろに付けるのが普通なのに、これはなんで前に付いてるのか訳が分からないよ！
だいたい出だしから「<!DOCTYPE html>」って、何て書いてあるか分からないし。
ドックタイプ？
しかも「！」ビックリマークは単語の後ろに付けるのが普通なのに、これはなんで前に付いてるのか訳が分からないよ！
オイゾウ
これは「HTMLファイルの出だしに必ず書くもの」というルールだと思ってもらえればOKです。
ちなみに<!DOCTYPE html>は「HTML5（というバージョン）の文書型です」という意味です。
つまり、どのバージョンのHTMLを記述しているかということを文頭で宣言しているのです。
その他についても説明すると、
ちなみに<!DOCTYPE html>は「HTML5（というバージョン）の文書型です」という意味です。
つまり、どのバージョンのHTMLを記述しているかということを文頭で宣言しているのです。
その他についても説明すると、
<html></html>
HTML文書であることを示しています。
<head></head>
この中にヘッダー情報を記述します。
ヘッダー情報に必要な要素はいろいろありますが、前述のHTMLファイルの記述には
<title>しのだ屋</title>[/html]
このように2行の要素が入っているのが分かるかと思います。
<meta charset="UTF-8">
「文字コード」を指定しています。
<title>しのだ屋</title>
このページのタイトル（ここでは店舗名）を記述しています。
このheadタグは、ブラウザにページの内容を正しく解釈してもらうためにあります。
<body></body>
このタグの中に記述した内容がブラウザに表示されます。
オイゾウ
いかがでしたでしょうか？
何となく分かりましたか？
何となく分かりましたか？
ジョージさん
よく分からないけど、とりあえずホームページの中身って実際にはこうなってるんだなってことが分かったかな。
篠田さん
やっぱり知っておかないとマズイかな？
できればこういう難しいことはやり過ごしてホームページ作れるようにしたいんだけど。
できればこういう難しいことはやり過ごしてホームページ作れるようにしたいんだけど。
オイゾウ
結論からすれば、HTMLの知識が全くなくても作れなくはないです。
ただ、今後話すCSSなども含め、これからホームページを作っていく中でこれらの知識がかなり役に立つことは間違いないので、是非前向きにがんばってください！
せっかくなので次回は「よく使うタグ一覧」をまとめてみる予定です！
ただ、今後話すCSSなども含め、これからホームページを作っていく中でこれらの知識がかなり役に立つことは間違いないので、是非前向きにがんばってください！
せっかくなので次回は「よく使うタグ一覧」をまとめてみる予定です！
[…] こんにちは、ホームページ制作のオイゾウです！ 前回「初めてのホームページ作りに必要な知識：HTMLとは？」では、ホームページがHTMLという言語によって構成されていることを説明し […]
[…] どうやって画像をアップロードすればいいのでしょうか？ それは「初めてのホームページ作りに必要な知識：HTMLとは？」でも軽く触れましたが、FTPという通信を行なう必要があり、その […]
[…] けど、全く知識がない」という方を対象に書いていますが、前回「初めてのホームページ作りに必要な知識：HTMLとは？」ではHTMLについての概要を説明し、その中でホームページ作成に […]