HTMLとCSSの便利そうなやつ

本日３.５時間 累計６時間 ２日目
<やった事>
・HTML部17から18の途中

box-sizing:border-box;の所が最初分からんちんで焦ったけどググったら理解した！多分めっちゃ便利だし要素の横とか揃えんのすごい楽やーんと思った。ググると凄い覚える。4時間ならず。#ウェブカツ #100daysofcode #riedayo

— 莉恵/ウェブカツ勉強中のキャバ嬢 (@rieda_yo) 2019年2月14日

記憶に定着させる目的で、今日勉強したことをアウトプットしてみる。

リスト作るのに便利そうなやーつ。

<tbody>

<tr><th>項目</th><td>ここは内容だよ</td></tr>

</tbody>

<td>は「tatedayo(縦だよ)」って覚えることにした。

だから<tr>は横。

そんで<th>は、表で言う所の項目部分を書くのに凄い便利だった。

テキストエリアにうすーく文字入れてくれるやつ

メルカリとかにも実装されてるけど、テキストボックスにグレーの薄文字で見本みたいな文字入れてくれる機能がこちら。超便利。前から知りたかったやつ。早速出て来て嬉しいな。

▼メルアドとかパスワード的な一行のテキストボックスはこれ

<input type="text" placeholder="ここに書いたやつがグレーになるワケ" name="email">

▼テキストエリアの時はこれ。colsは横。「コルセットがパーン！て弾ける」から横って覚えてる。

<textarea cols="100" rows="10" placehoder="ここの文字もグレーになるやで" name="comment">

プレイスホルダーね〜ふーん便利じゃんヽ(・∀・)ﾉ

CSSのあれこれ

業界ではbodyタグのmarginとpaddingはゼロ０にするのがデフォらしいよ。

font-familyの指定方法はシングルクオーテーションとカンマ！今日間違えたやつ。

p{

font-family:　'　　　','           ';

}

要素を角丸にしたい時

border-radius:  なんとかpx;

width: 30%;　とかって何？

親要素の横幅の３０％にするって意味。自動的にやってくれるから楽。

超使えそうなやつ。

box-sizing:border-box;

これは、要素のpaddingとborderをwidthの中に含めてくれる！！！

最初意味わかんなかったけど、ググったらわかった。

普通、widthとかheightって要素自体の大きさだからpaddingとかborderって含まれてないじゃん。要素っていう心臓があって、その周りにpaddingていう脂肪が付いてて、その脂肪の表面の皮膚がborderって感じじゃん？

けどbox-sizing:border-box;はその脂肪と皮膚を含んでくれる！わかりやすい！設計しやすそう！まだ使ったことないけど。

終わり