お母さん頑張りなさいね。まとめHTMLとは?WEBサイトを制作するためにまず勉強すべきものは『HTML』と『CSS』です。今回は『HTML』についての説明をしていきます。ランゲージ)」の頭文字の略です。お母さん横文字わからないわ。́・ω・`)ユトピ要するにパソコンとお話しするための”言葉”の一つだよ母さん。この”言葉”のことを「プログラミング言語」といいます。パソコンにあることをさせたいときに、日本語や英語で話しかけても通じるはずがありませんよね。昔の頭の良い人たちがパソコンと話せる言語を作りました。それが「プログラミング言語」です。言語とはそのまんま言葉という意味ですね。その「プログラミング言語」の一つが『HTML』なんですね。HTMLはサイトを制作する際に必要な言語なのです。お母さんパソコンさんサイト作って!パソコンさんHTML語でおk。ユトピ(こいつ日本語で返してるやんけ・・・)HTMLの書き方さて、さっそくHTMLを書き方について説明していきましょう。HTMLには独自の「タグ」というものがあります。お母さんタグってこんなやつ?ユトピ随分ロックなタグだなぁ・・・。そんなイメージ!マークとして使うのは似てるね!「タグ」とはただの文章にHTMLとしての意味を付け加えるものなんです。<p>というタグは「段落」という意味のタグ、<ul>は「リスト」という意味です。こんな感じのタグが現在(2016年8月)約100個ほど存在しているそうです。お母さん意外と少ないのね。ユトピう、うん!(数えてないとは言えない)それでは実際に書いてみましょう。お母さんこのセリフはジョジョね!母さん知ってるわよ!ユトピジョジョはやっぱり1部!!こんな感じで意味を持たせるテキストをタグで挟んでいきます。最初の<p>が「開始タグ」、最後の</p>が「終了タグ」です。入れて開始タグと分けています。挟まないで使うものもありますが(imgタグなど)、基本的にはこの形で書いていきます。ユトピこれで「震えるぞ♡!燃え尽きるほどヒート!」がパソコンさんに段落だってことを伝えることができたね!先ほどタグには数百種類あるといいましたが、実際に覚えるのはよく使用する20個ほどかなとは個人的に思います。相変わらずこちらも数えていないですが、少なくともHTMLのタグ全部をよく使うということはないですね。作りますかねそれではHTMLの書き方を解説したところで、実際にHTMLファイルを制作してみしょうかね。お母さんやっとね!まず最初にHTMLを書くために必要なツールを立ち上げましょう。簡単なツールとしては「メモ帳」が適しています。どのパソコンにも入っていますし、無料で使用できますしね。お母さんメモ帳なら電話の横にあるわよ!ユトピ違うよ母さん。パソコンさんにあるメモ帳だよ。HTMLを書くために絶対に必要なタグがあります。それが以下のものです。charset="UTF-8"><title>タイトル</title></head><body></body></html>お母さんふぇえええユトピこれはコピペすれば使いまわせるよ。html>『DOCTYPE宣言』とはこれから書く文章が「HTML5で書かれていますよー」と宣言するという意味です。これを一番上に記述します。「HTML5」とはHTMLのバージョンです。ITの技術は日々進歩していますので、HTMLもそれに合わせてバージョンアップしています。ここでは現在(2016年8月)の最新バージョンが「HTML5」なので、DOCTYPE宣言は上記のものを記入します。htmlタグ<html></html>1<html></html>『<html>タグ』とはHTMLで書かれた文章全体を囲むタグです。何も考えずに囲みましょう。headタグ<head></head>1<head></head>『<head>タグ』の間には「ヘッダ情報」というものを記述します。「ヘッダ情報」とはHTMLでサイトを作るうえで他にも必要なファイル(cssファイルやJavaScriptファイルなど)の情報を記述していきます。『<head>タグ』の中では他にも『<meta>タグ』や『<link>タグ』などを使います。この辺はまた後程解説しようかと思います。charset="UTF-8">『文字コード宣言』とは文字の種類を宣言するということ。文字コードにはいろいろな種類があって、このコードを間違えたりするといわゆる「文字化け」を起こします。基本的にHTMLを書くときは「UTF-8」にしておきます。ユトピお、おうtitleタグ<title></title>1<title></title>『<title>タグ』とは今からHTMLで作るページのタイトルを書きます。プロフィールページとか、記事のタイトルだとかを記入していきます。bodyタグ<body></body>1<body></body>『<body>タグ』は先ほどの<html>タグのさらに内側に記述します。この『<body>タグ』の中にメインのHTMLを記述していきます。以上が絶対に必要なタグたちです。基本的にコピペで使いまわせるので、毎回自分で書く必要はないです。HTMLファイルを保存しようここまでタグが書けたらデータが消えないように保存しましょう。僕はこんな感じのHTMLを書きました。メモ帳の場合は上のメニューから「ファイル」>「名前を付けて保存」をクリック。保存したい場所を選択したら、ファイルの名前を付けます。半角英数字でわかりやすい名前にしておきましょう。今回は「test」にしておきます。名前を付けたら最後に「.html」を付けます。保存ボタンを押す前に「文字コード」を「UTF-8」に指定してください。この設定をしないと表示したときに文字化けを起こしますので、忘れずに指定しましょう。保存できたか確認するために「test.html」をダブルクリックか、開けない場合はインターネットブラウザにドラッグ&ドロップしてみましょう。画像の場合はドラッグ&ドロップです。上の画像のように表示されたら無事完成です。これであなたもHTMLマスターです。お母さんやってみると意外と簡単かもしれないわね!ユトピそうだよ!まずはやってみることが重要なんだね!まとめ今回はこれで終わりにしましょう。HTMLの入門編としてはこれで十分ですね。いうかこれ以上やると疲れちゃう。書いてる僕も疲れちゃう。次回はWEBサイトを作る上でもう一つ欠かせない『CSS』について解説していきます。そんなこんなでどうぞよろしくお願いいたしましゅ。質問や意見がありましたらお気軽にツイッターの方へどうぞ。コメントをキャンセルメールアドレスが公開されることはありません。