CSS 逆引き
「名前がわからんけど、CSSでこれやりたい」、をメモる
これをやらないと全然知識が蓄積されていかない気持ちになった
図があるとわかりやすい
codepen的なリンクがあると良い
ここじゃないが
CSS、選択肢が複数あるときの正解がわからない
レスポンシブをやりたい時に、mediaを使う方法と使わなくてもできる方法があった場合、常に後者の方が優位なのか
コンテンツが大きすぎて壊れた、などのあるあるの対策を8つほど紹介
Flexbox Wrapping
Image Distortion
長いコンテンツがはみ出た
Component Spacing
Background repeat
CSS grid fixed values
CSS Variable Fallback
こういうレスポンシブ
spも2columnだった
赤い部分が画像で、正方形にしたい
青い部分は文章
できればmediaを使わずに実現したい
むりだった
悩みポイント
画像を正方形に
spの場合はリストは縦並び
spの場合は中身も縦並び
画像データはサイズが統一されているとは限らない
画像サイズがバラバラなやつは未対応
画面を狭めるとstyleが崩れる
2columnリスト
レスポンシブ
色々選択肢がある
flex, width:50%
@mediaがないと無理
grid
float
画像をトリミングする
object-fitでトリミングして
object-positionで場所の指定などをする
object-fit: cover などを使う画像を正方形に保つ
height/widthを明示しなくても正方形になってほしい
横幅は100%にして、縦幅は横幅と同じにしたい
トリッキー。自分で見つけるの無理やろ
このやり方だと、横：縦 = 2：3とかもできて便利そう
カードみたいなデザインって何のタグ使って囲うの？
全体はどこかのページのリストになっているが、anchorという感じでもない気もする
スクボのページ下のリンクはanchorだな
カードという感じでもないけど
after の中では、三角矢印の指定をしている .left では、丸の指定をしているcss.left {
display: inline-block;
width: 4em;
height: 4em;
border: 0.5em solid #333;
border-radius: 50%;
margin-right: 1.5em;
}
.left:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: 0.6em;
width: 1.4em;
height: 1.4em;
border-top: 0.5em solid #333;
border-right: 0.5em solid #333;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}