
レスポンシブで画像を正方形に維持する
HTML
<div class="cont">
<div class="box">
<img src="/img.jpg">
</div>
<div class="box">
<img src="/img.jpg">
</div>
<div class="box">
<img src="/img.jpg">
</div>
</div>
CSS
.cont{
display: flex;
gap: 5%
justify-content: space-between;
}
.box{
background: #000000;
position: relative;
overflow: hidden;
}
.box::before{
content: "";
padding-top: 100%;
display: block;
}
.box img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
html+css
- before・afterをcssで画像にする
- ハンバーガーメニュー・左から出て右へ消える
- WEBサイトが開いたときにムービーが動いている
- headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応
- 都道府県一覧
- 画像の縦横比を固定してレスポンシブHTML+CSS
- css flexで内側要素を文字数に応じて比例した幅にする
- table内の文字の折り返しが効かない時white-space: normal
- flex基本
- cssでdiv等の要素を正方形に固定(レスポンシブ)
- head内のレスポンシブ分岐(metaタグなど)
- iframe縦横比固定・div正方形維持(レスポンシブ)
- スクロールすると上から降りてくる
- フッターを下に固定|コンテンツが少ない時
- favicon
- css gridの中のdivの中のdivの高さを合わせる
- 文字列の下半分にマーカーを引く
- youtube画像埋め込みのレスポンシブ
- webフォントを使う
- 1枚にcssもjsも書くhtmlの基本
- Pリンクボタン中央寄せ
- HTMLの複数行を左揃え中央寄せする
- ::before ::after【css】
- dl,dt,dd・シンプルにコピペ
- テーブルhtml・シンプルにコピペ
- HTML付き都道府県リスト・ヘボン式ローマ字リスト
- マウスオーバーで画像を大きくする
- divやpタグを文字幅に合わせて縮める