横幅に合わせて縦の長さを変更するには？
「aspect-ratio: 100/66」なら、アスペクト比は「横100:縦66」になります。 ↓下の場合、最大width が 500px の時、縦の長さは 330px になります。
横幅に合わせて縦の長さを変更するには？ Read More »
CSS
CSS body の背景画像を設定した。その上にある要素の背景を少し透明にするには？
body に背景画像を付ける。ブラーで画像を少しぼかす。カバーで画像を引き延ばして、fixed でスクロールしても動かないように固定する。 その背景の上に segment を配置した。segment の背景の白色を少しだけ透けるようにしたい気分になった。
CSS body の背景画像を設定した。その上にある要素の背景を少し透明にするには？ Read More »
iframeを横幅100%で埋め込みたいけど、高さを設定するには？
iframe の横幅（width）を指定して読み込むことはできますが、これだと スマートフォン で表示したときに、ページから iframe がはみ出てしまいます。 width に 100% を設定してみますが、これだと縦長になってしまいます。 横幅100% で 縦は横幅に対して 66.66% になるように、以下の方法で対応します。①position:relateive で 横幅100% と 縦のパディングトップ66.66% の枠を作ります。②中身の position:absolute は、width100% と height100% で relateive の枠（横幅100% と 縦のパディングトップの枠）まで引き伸ばします。 更に、横幅を最大 500px に抑えるには、max-width で囲みます。
iframeを横幅100%で埋め込みたいけど、高さを設定するには？ Read More »
CSS ある子要素を持つ親要素を指定するには？
ワードプレスの場合「高度な設定」で CSSのクラスを設定できるので、そこ（子要素）を始点にして設定できると便利なのかなと思いました。
CSS ある子要素を持つ親要素を指定するには？ Read More »
CSS マージンの指定のしかた
①上、右、下、左 のマージンを指定する。 ②上下、左右 のマージンを指定する。 ③上、左右、下 のマージンを指定する。 ④全方向 のマージンを指定する。 値を入れない場合は「auto」を入力します。 H3 の上下に１文字分のマージンを設けます。