古の腐女子がHTML/CSSをドットインストールで復習しているのでそのまとめ

こんにちは、古の腐女子です。
古の腐女子なので、同人サイトを作っていた経験があり（今は亡きジオシティーズで作っていました。ロリポップは永遠の憧れです）、
HTMLの知識はあるものの何分知識が古すぎる(m*10 + n 年以上前)ので、ドットインストールで再勉強しています。

若い頃とは違って、勉強したことが走馬灯のように左から右に通り過ぎていくので、
復習と理解の促進のために、アウトプットしておきます。

知識あるからと調子に乗って、ドットインストールのHTMLを学ぼうコーナーを素通りしてJavaScriptで三択クイズとか作ってたら、チンプンカンプンすぎてえらいことになったので、自分の能力を適切に理解する過程は本当に必要ですね。

はじめてのHTML
はじめてのCSS

##はじめてのHTML

• headerとfooter
• section
• リスト表現( ol, ul, li )
• anchor
• label
• MDN

headerとfooter

ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。
headerタグはheadタグとよく混同されることがあるのですが、headタグとは違います。
ちなみにheaderタグやfooterタグは、文書構造によってはひとつの文書の中に複数書くこともあります。

sectionタグ

ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。

リスト表現( ol, ul, li )

どれがどれ？となりやすいのですがolもulもliも略語です。

• ol >>> ordered list
• ul >>> unordered list
• li >>> list item

liはlist itemであることを明示するために利用するので、olやulで囲うことが多いでしょう。

HTMLを書くときは文書の意味を考えて適切なタグを囲うことが求められるので、横並びであっても積極的にリストを使っていきましょう。

anchor

リンクを貼る時にaタグを使うのですが、これの意味はanchorです。
私が初めてaタグを使ったのは小学生のときだったのですが、「anchorのaだよ」と教えてくれる人はどこにも居らず、
「まあ、そんなもんだろ～～」と処理していたので、晴天の霹靂です。
「ごん、お前だったのか……」のテイストで驚きました。「a, お前anchorのaだったのか……」

MDN

仕様の説明をしてくれる優しいサイト。
私が子供のときなかったよね？と確認すると、2005年かららしい。
MDN

HTMLフォームの部品

Label

入力に関する情報を提示するには、labelタグを使うことが推奨されている。
どちらかを使う。

index.html

  <label for="name">名前</label>
  <input type="text" id="name">

index.html

  <label>名前 <input type="text"></label>

チェックボックス

##はじめてのCSS

• セレクタとプロパティ
• divタグ
• 役に立ちそうなcssタグ

###セレクタとプロパティ
なんちゃって独学なので、万事が万事「まあ、こんなもんだろ～～」と処理しているので、用語の再確認をします。
セレクタが「どこに」で、プロパティが「どのようなスタイルを」です。

###idとclassの使い分け

idはたったひとつしか割り当てられない
classはいくつでも割り当てられます

概念は分かるんですが、ドットインストールを見ていると、「え、ここでid使うんだ～」ってなってしまうので、
まだ適切に選べる自信がありません。。

###divタグ
レイアウトのためのタグです。
識別子を付けるためにクラスをつけます。
とりあえずよくつくる。

class属性を付けた要素は.クラス名で表現することができます。

index.html

<div class="container">

styles.css

.container {
 background-color: pink;
 margin-left: auto;
 margin-right: auto;

}

ちなみに、divで使った領域を中央寄せにしたい場合、この左右のmarginをautoに設定するテクニックがよくつかわれます。

###Flexboxで横並びにする
横に並べたい要素があったら、Flexboxを使うといいです。
その親要素にプロパティを追加しましょう。

index.html

    <div class="container">
      <div class="icon">
      ...
      </div>
      <div class="info">
      ...
      </div>

styles.css

.container {
   display :flex;
}

###基本セレクタ早見表

#id名

.classs名

〇,〇,〇, (カンマ区切りで複数のセレクタを書く)

複数のタグやクラスに対して同じCSSをまとめて適用させたいときは、カンマ区切りで並べます。タグ名やclass名、id名を一緒に並べてもOKです。

◯ ◯ ◯(半角スペース区切りで子孫セレクタ)

半角スペースで区切って並べることで「◯の中の◯に対してのみCSSを適用」というようなことができます。このように絞り込むような指定は「子孫セレクタ」と呼ばれます。

◯ > ◯ (「>」で子要素にのみ適用)

半角スペース区切りだと、子要素の中の要素（孫要素）にまでスタイルが適用されますが、「>」をつけることで1つ下の階層の子要素にのみCSSが適用されるようになります。

CSSのセレクタとは？覚えておきたい25種類と書き方

###CSSのリファレンスサイト

基本を学んだらあとはいろんなタグを知っていけばいいと思うので、リファレンスサイトや本で情報収集しようと思っています。
おすすめの情報収集方法があれば教えていただけると嬉しいです～。
（以下は参考にする予定のサイトです）

w3schools
MDN CSSリファレンス