[B! css][コンテンツ] ropparaのブックマーク

roppara id:roppara

cssとコンテンツに関するropparaのブックマーク (3)

CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Flexboxでの折り返しスペースの確保テキストが長いコンテンツ画像の伸縮を防止するスクロールが連鎖するのを回避 CSS変数のフォールバック固定の幅・固定の高さによるレイアウトの崩れ忘れがちな背景の繰り返し垂直のメディアクエリ justif
roppara 2022/01/20
css

レイアウト

コンテンツ

テクニック

TIPS

まとめ

web制作
リンク
HTML Living Standard ｜ HTML要素チートシート
No.HTML要素ネスト調査主要コンテンツカテゴリ他のカテゴリフォーム関連カテゴリ特徴属性概要公式文書情報連番要素名親子コンテンツモデル・概要（特性／子）使用できるコンテキスト・概要（親）メタデータフローセクショニングヘディングフレージングエンベディッドインタラクティブスクリプトサポートセクショニングルートパルパブルフォーム関連付要素送信可能要素リセット可能要素ラベル付け可能要素自動大文字化継承要素API記載要素カテゴリなし透過的置換要素グローバル固有属性読み意味（要約）関連する要素章タイトル（分類）文書No.使用できるコンテキストコンテンツモデル
roppara 2021/11/16
コンテンツ

html

あとで読む

css

TIPS

資料

まとめ
リンク
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめにケース1: カードのオーバーレイケース2: カードのタグケース3: ヒーローセクションケース4: display: contents; ケース5: カードアイテムの並べ替えケース6: 中央寄せケース7: 画像のアス
roppara 2021/09/28
css

コンテンツ

webデザイン

TIPS
リンク
1