30DAYSトライアル#4日目
はい超絶雑雑省エネ適当忘備録(のレベルに満たない何か)～。
忘備録とは見返すものじゃなくて覚えるためのものだから…。手抜きとかじゃないから…(震え声)。
・font-weight weight(重さ) 文字の太さを操作。normalとbold(太字)がある。
<h1>~<h6>の要素は初期状態で「font-weight: bold;」つまり太字なので、normal指定することで細くなる。h6までは太い見出しってことかな？ためしにh7でやったらデフォルトが細かった(normalっぽかった)。
・p要素、div要素、span要素のそれぞれの違い
p ブロック要素。段落を指定する時に使う。
div 汎用ブロック要素。前後に改行が入る。
span 汎用インライン要素。前後に改行が入らない。
参考にしたサイトの画像参照
・タグと要素の違い
セレクタ：選択物。下にある参照画像でいえば、bodyを選択してますよってイメージ。
プロパティは特性を示す。画像だと色。ほかにも文字の太さとか、色とか、とにかくここに特性をバンバン追加していくイメージ。重要やね
画像参照
・インデント超大事エラーが出てたら要素をしっかり区切れているかチェック
コピペを4回行う工程で、しっかりコピペできてないから1個1個直す羽目になって大変だった。
防ぐ方法として、コピペする前にそのグループがしっかり成立しているか、挙動を見てからやるべきだった。しかし自分で修正できたのは良い点。インデントをちゃんと行っていれば、ミスは見つけやすい。
・position: absolute CSSで通常重ねられない要素を重ねられる。まさにabsolute(絶対)。
サイト全体の左上部分を基準にして位置調整できる。通常はサイトの左上に基準位置があるが、親要素を作ってそれにposition: relative;を指定するとその要素の左上に基準位置を変更することができる。つまりサイト内のアイコンに重ねたいときは、アイコンのCSSにposition: relative;を設定すれば、アイコンが基準になるのでアイコンに文字を重ねられる
画像参照
・width:100%;で要素の中心における。width:auto;だとboarderの中心における？ようなイメージ。
・エディタ？内での検索結果であがってきた候補を固定して見つけやすくしたい。
いい方法ないかなぁ、今度探してみよう。
・box-shadow ボックス要素に影を作るCSS。box-shadow:水平 垂直 色; の順で指定できる。noneにすると影を消すことができる(後述のacrtiveと組み合わせるときに使える)。影を消すときはboxshadowと同じpxを指定する。
・cursor マウスカーソルが乗ったときのカーソルの形の変更。タグによって初期状態で設定されているものもある。例：<a>はデフォルトでpointer
・セレクタ:active とすることで、要素がクリックされている間(active)だけ、CSSを適用できるようになる。
・position: relative;は要素の位置を変更するためにも使うことが出来る。注意点としては、top:6px;とすると、「上に」6pxではなく、「上から」6px。これ大事。relativeと組み合わせると、上から下に下がるように6pxぶん動くというのがわかる。left:10px;なら、左から動くということ。
フッターの構造
wrapperとcontaineの違いがよくわからなかったけど、これでわかるねー。wrapperは下位のものを包み込んでる感じなんだね。でもやっぱcontainerでもできるような…containerとwrapperの位置を逆にしてもできそう。まぁ理解度がもうちょっと進んでからこの辺は詰めよう。
・クラスじゃないものに.はつけるなよー絶対だぞー！
・position: fixed; 常に要素を画面上の指定位置に固定(fixed)できる。top、left、right、bottomを使って指定できる。
positionを設定すると要素の重なりが発生する。そこで要素の重なりの順序を指定する。xyz軸で指定できる縦ならz-indexの数値で指定できる。1~10の範囲？困ったら大きい数字にしておけばあとから間に詰め込めるので10くらいにしておこう。
いやぁ適当にまとめるだけでも時間かかるね。でも今はまだ雑にまとめていく段階でいい。これ全部きれいにまとめてると時間と労力がかかりすぎて3日坊主の元だ。
