CSSの覚書 | ワクガンス

remとpxの比較検証

---

remはhtml要素のフォントサイズを基準とした倍率を表す。
ブラウザでズーム縮小拡大させてみたが、remはpxと同様な挙動である。 ブラウザをモバイルモード（スマホモード）にしたり、ブラウザの画面右下ドラッグで伸び縮みさせてみたが、やはり挙動はpxとまったく変わらず。

Bootstrap4とremについて

Bootstrap4はremを基準としているということで、嫌厭していたが特に気にすることもなさそう。

remとem

remはhtml要素レベルを基準としているので使い勝手が悪いこともある。
当ページはBootstrap3を用いているせいか、1remで指定すると文字列が小さくなってしまう。
なのでremよりemを使った方が保守的には優れている。

区画にremを用いるべきか？

文字を重視したレイアウトならremかemが良いかもしれない。
区画を重視したレイアウトならpxが良いかもしれない。
あまり細かく気にする必要はない。

borderの太さで検証

2020-7-15

xxx

2020-7-15

vertical-align: middle | 縦中央寄せの検証

ダメな例：ブロック

	<div style="vertical-align:middle;width:100%;height:100px;background-color:skyblue">
		イリオモテヤマネコ
	</div>
	

---

ダメな例:インラインブロック

インラインならいけるようだが、インラインブロックだとダメ。

	<div style="width:100%;height:100px;background-color:#ffc6bf;display:inline-block;">
		ヤンバルクイナ
	</div>
	

---

成功例：table-cell

table-cellならうまくいくのだが、その代わり「width:100%」は効かなくなる。「width:200px」などpx指定なら問題ないようだ。

	<div style="width:100%;height:100px;background-color:#c1ffc1;display:table-cell;vertical-align:middle;">
		ヤンバルケナガネズミ
	</div>
	

---

成功例：内部がブロック要素

table-cellであれば、内部がブロック要素（div)であっても縦中央寄せはうまくいくようだ。

	<div style="width:100%;height:100px;background-color:#ffc4f3;display:table-cell;vertical-align:middle;">
		<div>キノボリトカゲ</div>
		<div>ヒメヌマガエル</div>
	</div>
	

---

成功例：width:100%を裏技的な手法で実現

widthの値にあえて大きな値を指定する。しかし、table-cellの特性のため親の最大幅を超えない。これにより「width:100%」が裏技的に実現できる。

	<div style="width:5000px;height:100px;background-color:#dfdbf0;display:table-cell;vertical-align:middle;margin-right:auto;margin-left:auto;">
		タテヅノマルバネクワガタ
	</div>
	

---

2020-8-11

videoタグのCSSスタイル | Youtubeなどの画面を16:9のフィットサイズに

HTML

<div class='video_w'>
	<iframe src='https://www.youtube.com/embed/0EIor7Sh_Wo' frameborder='0' allowfullscreen></iframe>
</div>
	

CSS

.video_w {
	position: relative;
	width: 100%;
}
.video_w:before {
	content:"";
	display: block;
	padding-top: 56.25%; /* 画面比率16:9 */
}
.video_w iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

---

見本

2021-5-1

xxx

2021-5-1