こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、html&css実践として、htmlの概要説明をしたいと思います。
シリーズ化して、ホームページ作成ができるようになるところまで続けて行こうと思っています。
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
ホームページはどのように作られている？
まず、ホームページがどのように作られているか、簡単にご説明します。
Yahooなどのページを開き、ウィンドウの何もないところで右クリックをして「ページのソースを表示」を選択してみてください。
すると、別タブでそのページの中身が表示されます。
これがhtmlです。
ホームページは、htmlファイルで作られています。
htmlとは？
htmlとは「HyperText Markup Language」の略で、頭文字をとって「エイチティーエムエル」と呼びます。
と言っても、こんな難しい名前を覚える必要はなく、コンピューターやブラウザが認識できるファイルと覚えればOKです。
写真や画像データはjpgなどのファイル、動画データはmp4などのファイルのように、htmlもファイルになります。
jpgファイルは画像を表示させるデータ、mp4ファイルは動画を再生するデータ、htmlファイルはホームページを表示させるデータ、といえば分かりやすいかもしれません。
htmlの中身
htmlの中身はタグやテキスト等がいっぱい書いてあります。
これを書くことをhtmlコーディングと言います。（マークアップとも言ったりする）
最初は「うわ、英語だらけ・・こんなの書けるわけないじゃん」と思いますが、タグやルールを覚えてしまえば、そんなことありません。
最低限覚える必要のあるタグをご紹介します。
タグとは？
タグをご紹介する前にタグの説明をしたいと思います。
タグとは<h1></h1>や、<p></p>のような、< >で囲まれているものをタグと言います。
この< >で囲まれているタグは全て決まっていて、自由に書くことはできません。
また、< >は開始タグで、</>は終了タグです。
<h1></h1>は見出しタグで、<p></p>は段落を指定するためのタグになります。
「いやいや、そんなこと言われてもわからないよー！」と思いますが、ここでは< >に囲まれているものをタグと言うんだなと覚えていただければと思います。
htmlの必須なタグ
htmlの必須なタグをご紹介します。
これらのタグがないと、ブラウザがhtmlファイルと理解できず、表示がおかしくなってしまう場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="xxx, xxx, xxx">
<meta name="description" content="xxxxxxx">
<title>xxxxxxx</title>
</head>
<body>
</body>
</html>順番に解説しますね。
タグの後に読み方も記載します。
<!DOCTYPE html>（ドックタイプタグ）
DOCTYPEタグは、「このファイルはhtmlだよ！」と、コンピューターやブラウザに宣言するタグになります。
正確にはタグではないのですが、そこは気にせず、必ず1行目に入れると覚えておきましょう。
<html lang=”ja”>（エイチティーエムエルタグ）
htmlタグで囲んだものを、htmlとコンピューターが認識してくれます。
これもお決まりのタグとして覚えておきましょう。
2行目は開始タグで、最後の行が終了タグになります。
ちなみに、htmlタグにはlanguageを記述できます。
languageを記述しないと、コードの評価が下がってしまうので、必ず記述するようにしましょう。
<head>（ヘッドタグ）
headタグの中には、ブラウザ上で目に見える部分ではなく、ページの情報を記述します。
上記ソースの例では必要最低限の、文字コード・タイトル・説明を入れています。
<meta>（メタタグ）
metaタグは、必ずheadタグの中に記述します。
head以外だと認識されない可能性が高いです。
あと、metaタグは属性とセットにしてさまざまなメタデータを記述することができます。
属性がないとタグの力を発揮しません。
・<meta charset=”utf-8″>
charset属性で「文字コードはutf-8だよ」と記述。
文字コードとは、htmlファイルのテキストをどの文字コードで書いているか認識させるものです。
たまに文字化けしているサイトがありますが、コンピューターは人間じゃないので、認識させないと理解してくれません。
・<meta name=”keywords” content=”○○○,○○○,○○○”>
name属性でキーワードと指定して、contentで中身を記述。
キーワードとは、その名の通り、このページのキーとなるワードです。
このページで言うと「html, タグ, コーディング」とかになります。
一昔前はこのキーワードが検索順位に効果がありましたが、今はほとんど意味がないようです。
ですが、基本的に記述した方が良いので、2〜3個は記述しておきましょう。
・<meta name=”description” content=”○○○”>
name属性でディスクリプションと指定して、contentで中身を記述。
ディスクリプションとは、このページの説明になります。
何か検索したときに、大きい文字の下に小さい文字が表示されているのを見たことがあると思います。
あの部分が説明になります。
このディスクリプションはとても重要なので、必ず記述しましょう。
この他にもsns用に記述する属性など、いくつかありますが、一旦はこの基本の属性を覚えておきましょう。
<title>（タイトルタグ）
その名の通り、タイトルタグで、検索したときに大きい文字で表示されるとても重要な要素になります。
タイトルタグは開始タグと終了タグで囲んで記述します。
「タグの中に書いたり、開始タグと終了タグで囲んで書いたり、もうわからないよー」と最初はなりますが、もうこれは慣れるしかありません！
<body>（ボディタグ）
ここまではページ上で目に見えない部分でしたが、ここからはいよいよ目に見える部分になります。
それがbodyタグです。
bodyタグの中に書いたものがページ上に表示されます。
ここまでが必須のタグ！
全部覚えるのは大変なので、上記ソースをコピーして、何でもいいのでメモ帳やテキストエディターにペーストして、「index.html」とファイル名をつけて保存しよう！
htmlファイルをブラウザで表示させてみよう！
先ほど保存したindex.htmlファイルをダブルクリックすると、ブラウザ上で表示されると思います。
でも、まだbodyタグの中身がないので真っ白なページになると思います。
再度index.htmlファイルをテキストエディターで開き、bodyタグの中身に何でもいいので、テキストを書いてみましょう。
書いたら保存して、ブラウザに切り替えて更新（F5 or command + R）してみましょう。
無事表示されたでしょうか？
↓コピペ用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="web, デザイン, xxx">
<meta name="description" content="xxxxxxx">
<title>xxxxxxx</title>
</head>
<body>
こんにちは
</body>
</html>最後に
以上、htmlの概要説明でした。
次回は、作成したindex.htmlの中身を、もう少し肉付けしていきたいと思います。
htmlは文字ばっかりで、最初は難しいですが、タグとルールを覚えるとスラスラ書けるようになります。
頑張ってホームページを作れるようになりましょう！
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント