勉強備忘録：ドットインストールJavaScriptで三択クイズをつくろう

１．html

・sectionタグ
　section要素は、意味的に有意義な方法でグループ化されたコンテンツの
　一般的なセクションに適用され、見出し要素の利用が推奨されている。
・divとの使い分け
　div要素は最も汎用的な要素で、特別ではない意味を持っている。
　意味的に関係のない要素をまとめる最後の頼みの綱として使用する。
・他article
　意味的に関連したコンテンツのセクションに適用。
　このコンテンツのセクションは独立しているべき。
・containerクラス。 複数の要素を含むとういう意味で使用。
　Bootstrapでは、デフォルトでdiv class=containerとしている？
・aタグ→<A>タグはアンカー（Anchor）の略。
　リンクの出発点と到達点を指定するタグ。
・href=""→現在のページに遷移する。ページリロード。
　href="#"→ページトップに遷移する。

２．JavaScript

・スプレッド演算子でコピーを作ってシャッフル
　（もとの配列はそのまま保持される）
・while(オブジェクト)オブジェクトがある限り（trueであるかぎり）
　処理を続ける。
・queryselecter('#result>p')→子要素も取得可能。

３．ロジック

・フィッシャー・イェーツのシャッフル
　最後の要素とランダムな要素を入れ替える
　最後のからひとつ前の要素とランダムな要素をいれかえる
　を繰り返す
・正誤判定によって、クラスのつけはずしをする。
・状態遷移は、状態管理用の変数を用いて管理し、判定処理にて、
　判定する。
・hiddenクラスの付け外しで、表示非表示を制御する。

４.css

・>→指定の親要素内の一階層下の子要素に装飾が適用
　例：#choices >li{}
・,→複数の要素に同じ装飾が適用
　例：#btn,#result>a{}
・.→要素に続けてクラス名を指定することで、
　そのクラス名が付加された要素に装飾が適用
　例：#btn.disabled{} #choices >li.current{}
・::after疑似要素→要素の直後に内容を挿入する。
　挿入内容はcontentプロパティで指定
　::before疑似要素→要素の直前に内容を挿入する。
・position→要素に対し基準位置からの配置位置を指定するときに
　用いられるプロパティ
　top、right、bottom、leftという位置を指定するプロパティを使用
　position:relative　通常の位置を基準に相対位置を指定
　position:absolute　position: static;以外を指定した場合、
　その親要素を基準に絶対位置を指定します。
　三択クイズでも、親要素の.containerにrelativeを指定している！
・box-shadow 要素からの相対的な X および Y のオフセット、
　ぼかしと拡散の半径、色で記述
・rgba(赤 , 緑 , 青 , 透明度)
・margin 0 auto→左右中央寄せ。以下と同等。
　margin-top:0;
　margin-right:auto;
　margin-bottom:0;
　margin-left:auto;
・display:block→インライン要素をブロック要素として扱いたいとき
・text-decoration→ 一括指定プロパティで、テキストの装飾的な線の
　表示を設定
・transition…CSSプロパティが変化する際のアニメーションの速度を操作
・transform…要素に対して移動、回転、伸縮、傾斜の変形を加える
　transitionと一緒に使われることが多い

５．感想

オブジェクトが登場！
とりあえずdivで囲うは、NGだったんか！！