HTMLとCSSのメモ Vol1

フロントエンド勉強したああああい！！と思い立ったので、インターン先で本を借りて勉強することにしました。メモとして記録するためなので推敲はしません。笑
要点を抜粋してます。

Webページ製作準備

構成要素

• webページを作る主要ファイルは、HTML、CSS、JavaScriptの3種

• HTMLを使うとリンク構造を持つ文章が作成可能

• CSSはHTMLにレイアウトやスタイリングを施すことが可能

• javaScript（JS）はアニメーションとかを付けることが可能

• 追加で画像ファイルを使ったり使わなかったり（png、jpg、svg、gif）

制作フロー

1. 目的を明確に

2. デザイン

3. 素材集め

4. コーディング

5. 確認検証

6. 公開

7. 更新修正

私の経験上素材集めとコーディングは同時並行になりがちな印象

最近のトレンド

• レスポンシブデザイン；なにこれ！！！！と思ったけど、要はスマホ対応のデザインも必須だよってことですんなりと理解

• Googleマップの設置；スクレーピングかな。知らんけど

• あとはアクセスのしやすさとかを考慮。UX良くしておけってことかな

他の情報はこの本で新たに学んだことではないのでパス。

HTMLの基本

役割

• 文字情報に意味付け（タイトルとその他、みたいな）

• リンクと紐付け

要素とタグ

ここからやっとエンジニアらしいことになった。

「内容」を「タグ」で意味づけ（マークアップ）する。何のことやら。

<h1>Creative</h1>

Creativeが「内容」で、<h1>や</h1>が「タグ」である。hはheaderの略。pを使うと段落を示すことになるらしい。英語ができれば多少は楽？
おまけに空要素。これは終了タグが不要で、画像を表すときや改行したいときに使う。

<area>,<base>,<br>,<col>,<embed>,<hr>,<img>,<input>,<link>,<meta>,<param>,<source>,<track>,<wbr>

多分一例。意味は今んとこわかるのが少ないけど後々わかればいいだろう。

属性と属性値

開始タグの後ろにつけて文字に色をつけたりできる。ふーん。

<h1 style=“color: blue”>Creative</h1>

こう書くとCreativeが青色で表示されるってこと。なるほど？

id属性とclass属性

わーお新単語。めげないめげない。タグで分けきれなかった分類をするんだって。CSSと関連したものなので後述。同じh1で括ってるものを分類できるんだとか。

階層構造

HTMLは階層構造を持っていて、要素同士の関係性は、親要素・子要素と、兄弟要素と、祖先要素・子孫要素がある。祖先要素は親要素を内包してて、子孫要素は子要素を内包している。理解。これはすんなりいけた。

注意点

• タグは必ず半角で記述

• タグはきちんと閉じる

• インテンドをつける（これは良くやるからいけそう）などしてコードを見やすくする

次の章は実践ぽいことなのでここで一旦noteは終了！Vol2を書く気力があれば出すかもしれない。

ごきげんよう。