～HTML編～

・HTML内で遷移させたい場合、遷移先にid=sessionと書き、リンク部には「#session」と書く
・スマホの場合だけ改行させたい場合は<br class="sp">と書く
・クラス名は階層構造にして「AAA」、「AAA__BB」もしくは「AAA__BB-CC」のように書く（アンダースコア１つは使わない）
・メイン部分mv以下は <main class="content">でくくる
・画像はCSS側でも書ける。「スマホの場合は小さめの画像を表示したい」などの場合はCSS側で書いたほうがいい。
・１塊の文中の改行や文字サイズ変更は、<span class="xxx">～</span>でくくる
・「main」＞「section」＞「divでcontainer」が常套手段
・同じスタイルの繰り返しがある場合、CSSで一緒にあてたほうが効率的なので、全てに共通できるようなクラス名にする
・ひとまとまりの部分をclass="○○__body"でくくる
・複数の子要素はclass="○○__item"でくくる
・<figure>タグは画像などのまとまりを示す。figcaptionで画像に説明を追加できる。
・とにかく階層構造を考えてclassを区切る
・テーブルの<th><td>にもクラス名を与える
・<td>内に<h3>や<p>を書いてもよい
・１つのタグにclassは複数書ける。複数書くには半角スペースで区切る。

＜フォームについて＞
・フォーム全体はのformタグでくくる
・action属性で入力情報を飛ばす先のURLを書く
・method属性でpostと書く
・送信ボタンはbutton属性で「type=”submit”」と書く
・入力フォームでよく使われるinputタグ内で使う属性
<input type="text"> → 1行文字列
<input type="email"> → メールアドレス（@が入っていないとエラーが出る）
<input type="password"> → パスワード （maxlengthやminlength属性をよく指定する）
<input type="number"> → 数字
<input type="radio"> → ラジオボタン
<input type="checkbox"> → チェックボックス
<input type="image"> → 画像
<input type="file"> → ファイル
<input type="reset"> → 入力内容のリセット
・複数行とドロップダウンはinputタグではなく、それぞれtextareaタグとselectタグを使う
・ドロップダウンの選択肢はoptionタグで書く
・入力フォームでよく使うtype以外の属性
name/id → フォームのIDの役割。ラベルと紐づけなどに使う。重複不可。
value → 初期値の設定
placeholder → プレースホルダー
required → 必須。=”true"は省略可能
・見栄えのための属性
labelタグでフォームの名前をつける
for属性はラベルとインプットを紐づける役割。入力用タグにid="xxx"と設定し、ラベルタグにfor="xxx"とすることで紐づけができる



～CSS編～

・displayプロパティの値について
block → 画面の横幅いっぱいに広がり改行される。p、div、ul、h1〜h6などのタグの初期値はコレ。
inline → 改行されずに横に並ぶ。 a、span、imgなどのタグの初期値はコレ。幅と高さ、上下の余白の指定はできない（要素の中身によって自動で決まる。左右の余白は指定可能）。
inline-block → blockとinlineの間のような存在。並び方はinline的で、中身はblock的。いいとこ取り。
none → 非表示にする。パソコンでは表示してスマホでは非表示にしたいような時に使う。
flex → 親要素にdisplay: flex;と設定することで、子要素を横並びにできる。親要素を「フレックスボックス」といい、子要素を「フレックスアイテム」という。それぞれ、関連して設定できるプロパティがたくさんある。

・brfore、afterとは？
疑似要素と呼ばれるもの。要素（文字とか）は基本的にHTML側で書かなければならないが、CSS側でbeforeやafterとして疑似要素を作ることで、要素をCSS側でコントロールできる。beforeは要素の前、afterは要素の後という意味。例えばHTMLで「こんにちは！」だけ書いて、CSSでbeforeでcontent="Hello！"、afterでcontent="ニーハオ！"としたら「Hello！こんにちは！ニーハオ！」と表示できる。CSSは検索エンジンに見られないため、SEOを気にせずに自由な表現ができる。例えばタイトルはh1で日本語で書きたくて、検索エンジンにも日本語だけ見せたいけど、デザイン的に日本語の上にカッコイイ英語を入れたい場合は、beforeで英文を入れれば実現できる。疑似要素はposition: absoluteにすることで、自由な位置に配置もできる。そのほか、文字の前にアイコンを設置する時にもよく使う。FontAwesomeがよく使われる。

・positionプロパティについて
基本の４つ
static → 初期値。特に設定なし。
relative → 現在の位置（何も設定しなかった時の位置）を基準に相対的な位置を決める
absolute → 親要素を基準に絶対的な位置を決める
fixed → 画面上で決まった位置に固定する
※positionプロパティは基本的にtop, bottom, left, rightというプロパティ（２つ）とセットで使う。

・trainsitionプロパティについて
ホバー時に見た目を変形させるなどの実装が可能。
値の設定例
all → そのタグの全てを対象とする（background-colorと書くと背景色のみに適用できる）
3s → アニメーションの開始から終了までの時間
ease → 開始と終了を滑らかにする
ease-in → 開始がゆっくり
ease-out → 終了がゆっくり
ease-in-out →開始と終了がゆっくり

・HTMLで書いたのにCSSで装飾しないこともある
将来のためか？

・CSSを書く順番
例えば、上から「root→全体→ボタン→レイアウト→見出し→テーブル→ヘッダー→Gナビ→MV→各セクション→フッター→スマホ設定」という順番
恐らく、全体共通なものほど上に書き、個別のものほど下に書くイメージ（スマホ設定は最後）

・親要素と子要素について
子要素では、親要素から設定は引き継がれるため、子要素では親要素から変更したい部分だけを指定すればOK

・z-indexについて
要素の重なり順を指定する。
単純に数字の大小で大きい方が上。（ちなみにz-indexなどを何も指定しないと、後ろに書かれた要素が上に表示される）
positionがrelative、absolute、fixedのどれかでないと使えない。
今の要素の位置を変えたくない場合は、relativeにする。































以上！