webサイト作ってみたいんだけど。まずは形からでしょ、調べるのめんどうだから手っ取り早く教えてよ！
すごい髪型だね！わかる！まずは形からだよね、簡単に説明するね！
まずは形からですよね。新しいことにチャレンジする時にとても大事な考え方だと思います。自分も最初にブラウザ上に文字を表示した時の感動は今でも忘れません、新しい技術を自分で発見してしまったような感覚を覚えました！ぜひその感覚を味わってほしいです！それではpcのデスクトップにブラウザで表示できる様にフォルダを作成してブラウザに自分の表現したいものを表示させてみましょう。
htmlの骨組み
HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。
htmlファイルを作成しブラウザに表示してみる。
メモ帳もしくはテキストエディタでデスクトップにindex.htmlを作成して。以下ににサンプルをコピーして貼り付けて保存する。開いているブラウザにファイルをドラッグすると文字が表示される。
※サンプル
<!DOCTYPE html>
<html>
<head>
<title>グラデ</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>学ぶは真似ること</h1>
<p>htmlの骨組み</p>
</body>
</html>
※参考サイト
Windows→メモ帳→index.html
Mac→テキストエディット→index.html
<p></p>（pタグ）で挟まれている文字が表示されます。文字を変更する場合は必ず保存する。
おおー文字が表示できた！すげ〜！なんかweb上に文字が書けた感覚！
わかる〜もうわかると思うんだけど文字の色も変更できるんだ！
cssの装飾
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。
文字に色をつけてみる
index.htmlに以下のサンプルを貼り付けて保存してみてください。
<!DOCTYPE html>
<html>
<head>
<title>グラデ</title>
<meta charset="UTF-8" />
<style>
body {
color: gray;
}
</style>
</head>
<body>
<h1>学ぶは真似ること</h1>
<p>htmlの骨組み</p>
<p>cssの装飾</p>
</body>
</html>
文字全体がグレーになります。redにすると赤になります。
おーこれが装飾かー！色がつくと、だんだん楽しくなってくるね！
文字の大きさとか変更できるんだ！色鉛筆で好きな色を塗る感じだね！
画像の部品の用意
jpg（ジェイペグ）写真とかを保存したりホームページに載せるのに向いている、画像ファイルの圧縮形式
画像を追加してみる。
デスクトップ上に名前はなんでも良いのでフォルダを作成する。（例：サイトフォルダ）作成したフォルダの中に先ほど作成したindex.htmlを入れる。フォルダの中に「img」というフォルダを作成する。そのフォルダの中に表示させたい画像ファイルを入れる。（sample.jpg）以下のサンプルをコピーする。保存をする。
<!DOCTYPE html>
<html>
<head>
<title>グラデ</title>
<meta charset="UTF-8" />
<style>
body {
color: gray;
}
</style>
</head>
<body>
<h1>学ぶは真似ること</h1>
<p>htmlの骨組み</p>
<p>cssの装飾</p>
<p>
<img src="./sample.jpg" alt="sample" />
</p>
</body>
</html>
pngやGIFも表示可能です。
htmlに使う部品を用意して行く感じだね！gifアニメーションをキャンバスに表現できるのは時代の進歩を感じるね！早く表示してみよう！
アニメーションは、なかなか2Dキャンパスには表現できないよね！
まとめ
html作成→骨組み
css作成→装飾
画像作成→部品
形から入れましたかね？イラレとかと違ってコードを書くことで画面上に表現する方法は新鮮だと思います。レイヤー構成をコードで管理する感じですけね。もちろん作り込んでいくと要素が重なってくるのでルールも多くなります。
下記のサイトで簡単なwebページを作れるぐらい詳しく書かれているのでみてみてください！
今回はとりあえず形から入ってみるでした！
