vwとremを組み合わせて、アスペクト比を維持したサイズ可変レイアウトを実装する - Qiita
un-T factory! XA Advent Calendar 10日目の記事です。 リキッドレイアウトの葛藤 リキッドレイアウトによるWebページ制作の際、表示端末の画面幅（viewport）の違いによって各要素のサイズ比率が変わり、デザイン時の意図と異なる見た目になってしまうことがあります。 特にスマートフォンやタブレットでは端末によってブラウザ幅が固定されるため、テキストの改行のされ方や周辺要素とのレイアウトバランスなど、ちょっとした違いでページの印象が大きく変わることもあります。 「さまざまな解像度の端末があるのだから、そのような違いが出ることも許容するべき」という考え方にはもちろん同意ですが、今回は、CSSのサイズ指定を少し工夫してアスペクト比を維持したサイズ可変レイアウトを手軽に実装する方法を紹介します。 サイズ可変レイアウトの実装 一つの例として、画面幅（viewport）
2024年、現在の環境に適したリセットCSSのまとめ
CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
