ゼロからコーディングすんのめっちゃ大変だね
本日5.5時間 累計16時間 4日目
— 莉恵/ウェブカツ勉強中のキャバ嬢 (@rieda_yo) 2019年2月17日
<やった事>
・HTML鬼練06〜10
・サンプルHPをゼロから作る
動画で「浮く」とか「高さを出す」とか意味わからなかった言葉が自分でゼロから作る時にようやく繋がった！積み木なのね！てゆか打ちすぎてネイル折れた(ﾟДﾟ)#ウェブカツ #100daysofcode #riedayo
さて今日も忘れないうちにミスした所や絶対自分忘れそうだなこれってやつをどんどん書き出していきまする！
position:absolute;とposition:relative;のめっちゃ分かりやすい解説！
親要素をキャンパス(絵を描くアレ)にして子要素を自由に動かしたい時は
親要素の方にrelativeを指定してあげればいいんだね〜分かりやすい。
そんでabsoluteはおもに動かしたい側の子要素に使うんだね。
absoluteにした要素はダルマ落としのごとくスコンと高さが抜けて自由に動ける。
親要素にrelative指定がされてれば親起点で動くし、指定がなければまたその上の親起点、なければウインドウ起点、、みたいな感じだな。
このサイト凄い分かりやすい。モヤモヤ解決。
インライン要素の中央ぞろえは超簡単
中央に揃えたい要素の親要素に
text-aline: center;
を入れればいいだけね。
親要素＝画用紙
子要素＝文字
だとしたら画用紙の方に「センター寄せで」って命令すればいいだけ。
文字の方に命令するのではないから注意。
ブロック要素を親要素の左右中央に寄せたい時は、、、
寄せたい要素の左右marginをautoにする。
HTMLでclassを「複数」つけたい時には？
半角スペースをつけると普通に何個もクラス属性つけられる！
すごい基本的なことだけど今更理解したこと
potision: なになに;
でポジションを指定したらその下に普通に
top:100px; とか
left:50px;
とかって場所指定しちゃえば動かせる！！！！！
これやっと理解したwwww
marginいくつにしよう、、、とか考えるよりpositionでサクッと動かした方が楽だね。
あと、要素と要素の間にある空間に今後何かが入る予定の時はmarginで動かすよりpositionで動かすほうがいいんだね。
positionは座標ピンポイントに要素をストンと置けるから！
floatで浮かせた要素がある時はその親要素にoverflow:hidden;を必ずつける癖をつけような！わたしよ！
そうじゃ無いと、浮かせた部分の高さがダルマ落としみたいにスコンと消えて下にあった要素がせり上がって来てしまうという。
ブロック要素を重ねたい時。
ブロック要素１
ブロック要素２
ブロック要素３
があっとして、普通ならHTMLで書かれてる順にレイヤーが積み上がっていくから、要素同士がかぶるとしたら３が一番上に来るけど、それを逆にしたり自由に組み替えたりしたい時は、
z-index: 3;
z-index: 2;
とかまあ数字を指定してあげると数字がでかいやつ順で一番上に来てるれる！
便利だ
サンプルページをゼロから作って見たところミスが連発した。
↓
HTML編
グーグルフォントの指定をHTMLに入れ忘れた。
スタイルシートの指定のすぐ下に入れればいいね。
全体的にリンクつけ忘れ。
HTMLでちゃんと書いておかなきゃいけないことって逆に何だっけ。
文字情報、リンク、idとかclassでグループ分け、tableとかli作り。だね。
シンプルに超大きいグループは３つだけ！
<header></header>
<div class="main"></div>
<footer></footer>
シンプルにこの３つの構成からなってるんだよな〜なんかもはや全部divだった方が分かりやすいのでは、、とも思ってしまう。
CSS編
bodyでとりあえず決めておくことまとめ
color: 色;
margin:0;
padding: 0;
line-height: 150%; →行間を文字の150％にするのがトレンドらしい。
フォントを太くしたい
font-weight: bold;
ここも、きっとグーグルフォントでboldを選んでおかないとCSSで設定したところで表示されなさそうだな。試してみよう。
リストの黒丸消し！！！
（てゆか黒丸表示させることって今時あるのか？）
ulタグの中で
list-style: none;
を書く。
ulタグに書かないと、他の場所に書いても効かなかった。
マウスオーバーで下線を表示させるテク
a:hover{
text-decoration:underline;
}
疲れたー
おしまい。
