Contents
CSSのまとめページです。
こんにちは、「ふ」です。
フーノページ内の、CSSに関する記事をまとめました。
みなさんの目的にたどりつきやすいよう、関連性のある記事同士を近くに並べています。ぜひ参考にしてください。
レイアウト。
aspect(縦横比)。
CSSで画像をぴったりと配置する、object-fit:cover。
〽️ 縦横比キープでサイズ合わせ。
CSS、要素の縦横比を固定〜aspect-ratio。
〽️ heightの相対値問題を解消。
flex。
CSS:上下中央揃えはflexを使おう。
〽️ たった３行でOK。
flex-grow,flex-shrinkについて〜flexプロパティ前編。
〽️ 「比率」を指定するということ。
flex-basis、flexについて〜flexプロパティ後編。
〽️ 残りの２つも解明しましょう。
position。
position:stickyとfixedの違いと使い分け。
〽️ 特徴を知って状況ごとに対応。
アクション。
scroll。
スクロールに関する色々な制御。CSSだけでかなりのことができます。
CSSだけでヘッダー固定(一部のみも可)。
〽️ position: stickyが便利すぎる。
CSS、要素を一定の区間だけ追尾させる。
〽️ そのうち消えるのでうざくない追尾。
CSS:決まった位置にスナップさせるスクロール。
〽️ ユーザに優しいインターフェース。
CSS：横スクロールをflexで作成。
〽️ 「見せ方」も大事です。
input。
input type = "range"をCSSでカスタマイズ。
〽️ 使い分けて作業効率⤴️
hover。
CSS、hoverで親要素/子要素をtransition。
〽️ 複数セットも簡単。
スマホでのhoverを考える。
〽️ ４つのパターンで検証。
効果。
animation。
CSSアニメーション 作り方。
〽️ CSSアニメーションをしっかり習得。
CSS、scroll-drivenでスクロールアニメーション。
〽️ ２種類の関数が使える。
filter。
CSS、フィルターの使い方。
〽️ CSSだけでCG処理。
font&text。
font-size。
CSS、font-sizeの最大値/最小値を指定。
〽️ max/min/clamp関数の理解。
Google Fonts。
Google Fonts 使い方。
〽️ デバイスを問わないwebフォントを使おう。
Google Fonts日本語、必要な文字だけを読み込んで軽量化。
〽️ フォントをサブセット化しよう。
JavaScriptでのCSS制御。
JavaScript、iPhoneを特定してCSSを変更。
〽️ iPhone対応の「奥の手」。
CSS/JavaScript、スクロールの禁止と解除。
〽️ １番軽いやり方を見つけました。
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。