●HTMLに記号をつける意味・・
など文書の意味を表す記号(タグ）をつけることによって、検索エンジンをはじめとしたコンピュータがあなたの書いた文書を正しく活用してくれる
●画像の挿入・・altで画像の説明を加える。
●テクニック・・VSコード上で右クリックをし「ドキュメントのフォーマット」を選択すれば自動で整う
●説明付きリストの例
- HTML
- 文書の意味
- CSS
- 文書のみため
- Javascript
- 文書の動き
●mainタグはページ内に１つのみしか置けないルール
● HTMLの要素には、その中に入れられる要素と入れられない要素が厳密に区別されているので、（divはhの中に入れられないなど）疑問に思ったら必ずMDNの「許可されている内容」で調べる。
●選択画面で複数を選べるようにするにはcheckbox、 1つしか選べないようにするにはradioを使う
(CSS)
●8の倍数を使うと綺麗に見えることが多い。
●要素の指定・・中央に寄せるためにはmarginの左右にautoを指定。文字画像を中央に寄せるにはtext-align:center
●背景画像の設定・・CSSで背景画像を指定するにはbackground-imageプロパティを用いる background-image: url(画像のURL);のように使う。
●要素の透過・・opacityプロパティを使えば要素を透明にできる。
透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定。
●文字の間隔の指定・・letter-spacingプロパティを用いることで文字の間隔を指定。
●レイアウトの調整・・カーソルが乗ったときの状態をhoverと言う。
CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定す る。角を丸めるにはborder-radiusプロパティを用いる。
●marginとtext-align・・containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使う。
●アイコンの使用・・Font Awesomeは、以下の手順で使用することができる。
①Font AwesomeのCSSファイルを読み込む
②タグにfaクラスとfa-アイコン名クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が掲載。）
●透明・・
opacityには要素の中身全てを透明にするという性質がある。背景色のみを透明にするには、rgbaというものを使う必要がある。
●画像の挿入・・タグに画像のURLを指定する場合は、
とする。
また、タグには閉じタグは不要。
●transition・・transitionを使うとアニメーションをつけることができる。
「変化の対象」や、「変化にかかる時間」などを指定できる。
「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用出来る。
●要素を重ねる・・HTMLの要素同士は通常重なって表示されることはないが、position: absolute;を使うと、要素同士を重ねて表示することが出来る。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定。また、rightやbottomを併用することも可能。
●CSSのボックス要素・・インラインボックスとブロックボックスの違いを抑えることは大切
・インラインボックス・・インラインボックスは左から右へ横方向に配置される。インラインボックスの前後には改行は伴わず、行内の一部としてレイアウトされる
・幅（width）や高さ（height）を指定できない。※1
・上下の margin を指定できない。
ex)a, img
・ブロックボックス・・ブロックボックスは幅に関係なく、上から下へ縦方向に配置される。ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされる
・幅（width）や高さ（height）を指定できる。幅を指定しなければ親要素の幅全体に広がる。
・上下左右の margin 、padding を指定できる
displayプロパティでblock,inlineでそれぞれ指定できる
・inline-blockを指定することで、要素を横に配置しつつ、サイズを指定できる
＊img要素もインラインボックスだが、特殊な動き方をする
●相対位置指定・・
position relative(後に続く要素には影響なし
position absolute(何も指定しないと、ブラウザからの位置関係。後に続く要素は詰められる。スクロールすると一緒に動く（fixと違い）
*大切・・ position: absolute; を指定した要素の基準として指定できるのは、その要素を囲っている要素のみ
・object-fit: cover・・画像を挿入した時に元の画像の縦横比を保ちながら編集する
・opacity・・要素の透明度を指定
・画像に限らずインラインボックスの要素であれば、 vertical-align を使って、行ボックスの中で上下方向の位置を調整することができる
・背景に画像をつけるには・・background-image: url()
・箇条書きリスト、順序付きリスト、説明リストでは、基本的にはブラウザがデフォルトでつけているスタイルを調べて、それをリセットしてから、自由にスタイリングしていくという手順になる。
●class 属性には、複数の値を設定できるのと同じ値を複数の要素に設定することもできるという特徴があります。
このように共通のスタイルは共通のクラスセレクターで、個別のスタイルは個別のクラスセレクターで指定するといったテクニックもよく使われる
●idセレクター・・# で始まるセレクターを id セレクターと呼ぶ
*クラス属性には複数の値を設定できるが、id属性には一つの値しか設定できない。
JavaScript で扱う要素で、なおかつその要素をスタイリングしたい時に id セレクターが使われることが多い
・間に記号などを挟まずに、半角空白だけで区切ると、子孫要素を表す結合子になる
)section p
＊ 大なり記号で区切ると子要素、空白だけで区切ったら子孫要素を意味する！！
●擬似要素・・p::before 、 p::after とすると、 p 要素のタグの中のこことここに CSS だけで擬似的な要素を追加することができる
●・・セレクタの優先度・・セレクターには詳細度というスコアがあって、そのスコアが最も高いものが優先される
スコアの算出方法・・・3 つの数値からなっていて、最初の数値はセレクターの中に id セレクターが現れる回数
次の数値はクラスセレクター、擬似クラス、属性セレクターが現れる回数、そして最後が要素セレクター、疑似要素が現れる回数