サイドラインズ 
こんにちは！サイドラインズの信夫でございます。
今回は前回に引き続きHTMLの全体構造の部分を学習していきます。どうやら前回疑問に感じていたhead部分の記載内容に関して教えてもらえるようなので早速進めていきます～
前回の記事
コンテンツ
head要素にはページの設定を記載する
head内には文字コードとか、ページのタイトルとか、CSSを詠み込む際のCSSファイルの指定などを行っていくようです。文字コードっていうのは文字化けを防ぐために指定しておくものだそうで、HTML5ではUTF-8が推奨されているそうなのでそれを指定するらしい。タイトルはわかる。SEOとかでもタイトルタグは重要よね。head要素内にあるのね。
ほんで最後は詠み込むCSSファイルの指定。ここでまた新しいタグ出できた。link（リンク）とrel（レル）っていうらしい。あとさらに過去にやったhref（エイチレフ）っていうタグも使う。
hrefといえばaタグじゃないの？って思って色々調べてみたところ、aタグっていうのはbody内で使われるもので、主にユーザー用にリンクを貼るように使われるタグ。ユーザに対して使われるタグ。一方でlinkタグは「このページは他にも関連するページとかファイルがあるよ」っていう宣言をするタグで、それは検索エンジンとか、読み込んでくれるブラウザに対して知らせるためのタグらしい。なるほど。
でrel（レル）タグっていうのはrelation（リレーション）の略で、linkタグの中にあることで、その後にhrefタグで指定するファイル名との関係性を証明？宣言？している感じのようですよ。なんとなく把握！でもこれ実践結構むずそうね！
と思いきや案外サクッとクリーア
「これ全部手打ちすんのは結構たいへんそうだなー」と思って演習に挑みましたが、タグ自体はコピペでいけました。Progateのスライドにも書いてましたけど、実はこのあたりはテンプレートみたいなモノで、覚える必要は無いのかもしれませんね。そしてお次はレイアウトに関するレッスンのようです。てことはCSSかな？
これも制作の現場でよく見聞きした「div」属性
CSSの話しかなと思いきや、htmlでした。レイアウトに関してはdiv属性っていうのが需要らしい。これもよく現場でclassと並んで見聞きしたやつだ。classとdiv。水戸黄門でいう助さん格さんみたいな感じ。どんな感じだ。
divっていうのはdivision（ディビジョン）の略で、要素をグループ化するためのタグらしい。こないだやったclassの要素の親子関係とは違うのよね？よくわからんけど進めていこう。
プログラミング勉強しながらリアルタイムで記事書くと振り返れて良い
この、「divは要素をグループかするためのタグ」って思った時に、ふと同時に「あれそういえばclassはなんなんだっけ」って考えてしまって、自分がこれまで書いた記事を遡りました。classに関する記事はこれ
そうだったそうだった。見返して思い出した。classは要素を指定するためのものだった。classタグとかclass属性とか呼び方は未だにどっちで呼んで良いのかよくわからないけど、とにかくdivとは違うね。divは要素をグループ化するものだからね。
class属性はhtmlファイル上で開始タグの中でclass=”◯◯◯”って指定してあげると、CSSファイル上でその◯◯◯だけを指定して色々変えられるのよ。その時にはそのclass名はセレクタとして指定するんだけど「.◯◯◯」っていう感じでclass名の前に「.」が必要なのね。オッケー思い出した！
授業で言うところの、Progateが教科書で、記事がノートみたいな感じで使えてます。教えてもらったことを自分で咀嚼してノートにリアルタイムで書いているので、振り返りしやすい。プログラミング勉強する人は同時にブログも書こう！
エディタには便利な機能が色いろあるらしい
本格的にdivでレイアウトをいじっていく前に、エディタの説明がありました。divって打ってさらにtabキーを押すと、開始タグと終了タグをそのまま打ってくれるっていう機能。確かに手打ちだとミス多いですしね。だからみんな好みのエディタとかバラバラだったりするのか～。補完してくれる具合によって好みに合うエディタっていうのが人それぞれあるんだろうな～。
divとclassを使った演習。楽しい。
いざ演習をやってみました。まずはhtml上で、ヘッダー（header）、メイン（main）、フッター（footer）の3つのグループを作成。ブラウザ上では一番上、真ん中、一番下っていうエリアを作る感じね。でそのdivに対してclass属性でそれぞれheader、main、footerっていう名前を付与してあげる。headerはこんな感じ。
<div class=”header”>
</div>
っていうのは、class属性を使ってheaderっていう名前でグループ（div）を1つ作っている状態っていうことですね。
でその上でCSS側でheaderの背景色（background-color）とか高さ（height）を指定してあげると、ブラウザ上のレイアウトが変わると。さっきも書いたけど、CSSでセレクタとして指定する時には「.」（ドット）を忘れずにつける。
クリア！たのっし！！
おお～無事にクリアできた～なんか楽しい～(・∀・)とりあえずdivも使えるようになりました。Progate良い。サクサク進めて楽し。
ほんだら次はheaderの構造らしいので引き続きやっていきましょう～
次回の記事はこちら
