https://buildstd.com/html-css-tips01/
いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。
BUILD
CSS
見出しに使えるfit-contentを解説してみる
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます
- 中央位置に配置した見出しに背景色をつけるスタイルで便利。
- 使わない場合、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまう。
- 見出しにdisplay: inline-blockを使用すればコンテンツ幅に背景色をつけられる。しかし、中央配置ができないため、見出しタグの中にを追加してテキストを括り、見出しタグにtext-align: centerを指定。
- もし、テキストの周りに余白（padding）を指定し、背景色のボックスを広げたい場合にはタグにdisplay: inline-blockを追加。
使用した場合
- 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせて背景色を配置
- width: fit-contentを使用することで、コンテンツ（テキスト）に合わせてボックス要素の横幅を指定でき、背景色を配置可。margin-right: autoとmargin-left: autoで中央配置ができ、もしテキストの周りに余白を指定する場合でもタグやコードを追加しなくても対応可。
h2 {
margin-right: auto;
margin-left: auto;
width: -moz-fit-content;
width: fit-content;
background-color: #e3bf00;
}見出しが２行の場合
- 2行以上になるとコンテンツの中で一番長い行の横幅に合わせて背景色が配置されてしまう。
- テキストだけに背景色を配置したい場合には、テキストをで括る。
fit-contentでマーカー
- 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせてマーカーを配置できる。
見出しが２行の場合
- テキストだけにマーカーを配置したい場合には、テキストをで括る。
ブラウザ対応
- IE以外のモダンブラウザで対応。Firefoxのみベンダープレフィックス（-moz-fit-content）が必要。
参考
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。
- Flexboxでの折り返し：コンテナに十分なスペースがないと、横スクロールが発生する。スクロールするラッパーを必要としない限り、flex-wrapを使用してラッピングを許可する。
- スペースの確保：一見必要がないように見えるスペースも、実装に追加する必要。
- テキストが長いコンテンツ：テキストが長いコンテンツを考慮することは、レイアウトを構築する上で重要。一貫性が重要な場合は、text-overflowとその仲間を使用して、テキストを切り捨てる。
- 画像の伸縮を防止する：ページ上で画像のアスペクト比を制御できない場合、ユーザーがアスペクト比に合わない画像をアップロードしたときの解決策を前もって実装しておくため、CSSのobject-fitを使用する。
- スクロールが連鎖するのを回避：scroll chaining（スクロールの連鎖）を回避するため、CSSのoverscroll-behaviorプロパティを使う。スクロールが必要なコンポーネント（モーダル・チャットコンポーネント・スマホのメニューなど）にこの機能を追加しておく。
- CSS変数のフォールバック：何らかの理由でCSS変数の値が空だった場合に備えて、エクスペリエンスを損なわない方法でそれらを使用するために適用できる方法がある。var()にフォールバック値を追加しておく。
- 固定の幅・固定の高さによるレイアウトの崩れ：高さが固定されたヒーローセクションでコンテンツがはみ出ないようにするには、heightの代わりにmin-heightを使用する。ボタンを固定幅で使用していると、ラベルが端に寄ったりはみ出したりする。これを修正するには、widthの代わりにmin-widthを使用する。
- 忘れがちな背景の繰り返し：大きな画像を背景として使用する場合、大きなスクリーンでの表示を考慮することを忘れがち。背景はデフォルトで繰り返される。必ずbackground-repeatをリセット。
- 垂直のメディアクエリ：たとえばposition: sticky;を追加してサイドバー内のセカンダリリンクをasideセクションの一番下に配置すると、ブラウザの高さが小さくなった時にリンクが重なってしまう。メディアクエリを垂直で使用して、ビューポートが一定の高さの場合のみstickyさせる。
- justify-content: space-between; を使用する：flexコンテナでは、justify-contentを使って子アイテム間のスペースを空けると、子アイテムの数が一定以下の場合にレイアウトが崩れる。簡単な方法は、gapに変更すること。
- 画像の上にテキストを配置：画像の読み込みに失敗した場合を考慮することが重要。要素に背景色を用意しておくことで、簡単に解決。
- CSS Gridで固定値を使用する際の注意点：小さなビューポートサイズではスペースがないため、レイアウトが崩れてしまう。必ずメディアクエリを使用する。
- 必要な場合のみスクロールバーを表示する：長いコンテンツがある場合に限り、スクロールバーを表示するかどうかを制御するため、overflowプロパティの値としてautoを使用する。
- スクロールバーのガター：コンテンツが長くなったときにスクロールバーをつけるとレイアウトがずれてしまうので、scrollbar-gutterプロパティを使用する。
- CSS Flexboxにおけるコンテンツの最小サイズ：flexアイテムに、アイテム自身よりも大きなテキストや画像がある場合、ブラウザはテキストや画像を縮小されない。この問題を解決するには、flexアイテムのmin-widthを0にする必要。
- CSS Gridにおけるコンテンツの最小サイズ：gridアイテムより大きな要素がある場合、その要素はオーバーフローする。防御的なCSSとしては、minmax()関数を使用する。
- auto-fitとauto-fillの使い分け：CSS Gridでminmax()関数を使用する場合、auto-fitとauto-fillのどちらのキーワードを使用するかを決めることが重要。auto-fitは利用可能なスペースを埋めるためにgirdアイテムを拡張する。auto-fillはgirdアイテムの幅を変更せずに、利用可能なスペースを確保したまま。もしgirdアイテムが1つだけでauto-fitが使用されている場合、アイテムはコンテナの幅いっぱいに拡張されてしまうので、auto-fillを使用する方が良い。
- 画像の最大幅：基本的に、すべての画像にmax-width: 100%;を設定する。使用するCSSリセットに追加しておく。
- CSS Gridでposition: sticky;が効かないとき：girdアイテムのデフォルトのビヘイビアは、stretch。このデフォルトにより、aside要素はmain要素と同じ高さになるが、その結果position: sticky;が機能しなくなる。期待どおりに機能させるには、align-selfプロパティをリセットする必要。
- セレクタのグルーピング：異なるブラウザで動作するように意図されたセレクタをグループ化することは推奨されない。セレクタをグループ化すると、w3cによれば、ルール全体が無効。リスト内に無効なセレクタがある場合、リスト全体が無効。