簡単なウェブサイトができる人になりましょー！
簡単なウェブサイトを作り、最終的にはサーバーにあげるまでを今後やっていきたいと思います。
基礎知識を学習し、挫折しないようにスモールステップでやって行きましょう。
BEE式とでもいいますか、しっかり覚えましょう！
HTMLの構造を完璧に覚えましょう！
前回作成した、カンプデータと素材
AdobeXDは機能制限はあるものの、無料でもできますよ。
ただし、アカウント登録が必要です。（無料）
素材をダウンロードしてください。
画像は「images」という名前のフォルダにまとめています。
icon.png、logo.png、profile-image.jpgの3つのファイルをフォルダをまとめてimagesとします。
kuma-siteの中に入れます。
前回使っていた index.html、style.cssと今回のimagesフォルダが入っています。
色をつけたり、枠組みはCSSで作ります。
Bracketsを立ち上げる
「kuma-site」フォルダを読み込みます。
左サイドバーからフォルダを開きます。
Getting Startedと表示されているボタンをクリックして、kuma-siteのフォルダを読み込みます。
「index.html」ファイルを開く
DOCKTYPE宣言
HTMLの1行目に書くのはDOCTYPE宣言です。
HTMLには歴史があって、これまでもいくつかのバージョンがありますが、現在の主流はHTML5という最新バージョンです。
HTML5を使うときに<!DOCTYPE html>と書きます。
これは、バージョンごとに書き方が変わります。
DOCTYPEに続くのは<html>タグ
言語を選択します。
lang属性で言語を指定します。
つまり、lang="ja"で、このサイトは日本語でウェブサイトを作りますよ、と宣言しています。
<head>タグと<body>タグの違い
<head>タグ
<head>タグの中には、ホームページの付加情報を書き込んでいきます。
具体的にはmeta情報を書き込んでいきます。
<head>タグの中に書かれたコードは、ブラウザに表示されません。
付加情報とは、フォントの指定だったり、ウェブページの名前など、色々なメタデータが書き込まれます。
メタデータとしてウェブページの概要文を入れるのが一般的です。
タイトルと概要文をしっかり書こう
タイトルや概要分はGoogleなどの検索にも影響を与える部分（SEO）なのでしっかり設定しましょう！
<title>をしっかり設定しましょう。
現在のDocumentから「クマのオフィシャルサイト」に変更します。
その下に<meta name"description"と入力しますが、YouTubeを見ていただくと、候補が出てくるので選択しても大丈夫です。
さらに半角スペースを入れてcontent="">で閉じます。
概要文はcontentの""の中に書きます。
ここでは、「クマについて自己紹介するサイトです。」と入れました。
今回は初歩ということで、これくらいにしますね。
<body>タグ
ウェブページの目に見えるコンテンツは、<body>タグの中に書きます。
つまり、見てもらう、読んでもらう内容は、全部<body>タグの中に書きます。
<body>タグの中に、入れ子でデザインやコンテンツが入るということですね。
「あれ？入れ子ってなんだっけ？」という方はこちら
まとめ
カンプをもとにコーディングする初歩的なサイトを作りました。
スキルを上げて、もっとウェブデザインができるコーディングをめざしましょう！