Open11
CSS完全に理解したい(希望)
れなっちCSS完全に理解したい・・・
早くあのパーカーを着てみたい
まだ無理〜〜〜
忘れないようにメモとして残して次の自分が困らないようにするためのものです。
れなっちレスポンシブに対応可能な画像
img系で使用する画像の大きさの指定された幅と高さの比率を指定できるCSS
aspect-ratio: 1 / 1<アスペクト比を書く>;
img系で使用する画像の表示する部分を調整可能
object-fit: cover;
れなっち固定したり、そこから動かしたくない場合・画像をスクロールと一緒に動かしたい(伝われ)
sticky(粘っこい)
直前のブッロクに対して相対配置される。コンポーネントと相対配置した場合、スクロールについていく画像にできる。また、rootに相対配置した場合、ヘッターやフッターを固定することができる
ヘッターで使用する場合下記のコードが使用できる
position: sticky;
top: 0px;
れなっち下線部引きたい！
文字に下線部が引きたい・文字の下！
text-decoration: underline(下線);
れなっちHTMLだけど、線を書きたい場合につかえるかも？
<hr />
れなっちz-indexを目視で確認することができる
れなっちマウスポインタの設定
れなっちコンポーネントごとにスクロールを設定したい！(要素が溢れたらスクロースさせて表示したい！)
overflow: scroll;
※ 注意：同じクラスにwidthやheightを追加して、パネルの大きさを決めること
width: 100%;
height: 100%;
また、このクラスの下の子クラスのwidthやheightも決めて、どこからスクロースさせるかを確定すること
スクロールバーを表示させない場合はこれ。Macとwindowsでは見方が違うため確認すること
scrollbar-width: none;
れなっち固定の要素（icon）等を縮めたくない
flex-shrink
flex-shrink: 0;
れなっちHTMLは、「ホワイトスペース」を無視します。
「 Hello 」→「Hello」と表示される
CSSで省略されないようにすること
span {
white-space: pre-wrap;
}
れなっちbox-shadowはめちゃくちゃ重い！
影をつけるcssなんだけど、大きくするとグラデーションの計算処理で描画がめちゃくちゃ重たくなる
なんか遅いなってなったら、cssの処理速度も確認すること