タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙♂️ CSS trick: transition from height 0 to auto! by Fra
CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。 Animate to height: auto; in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに autoなどのキーワードをアニメーションさせる方法
UIのインタラクションの実装で、height: 0 → autoなど、数値とキーワード値とをアニメーションさせたいと思ったことはないでしょうか。 一見可能そうに見えるものの、従来はCSSのみではアニメーションが不可能でした。代替手段として数値同士を変更してトランジションを実装したり、JavaScriptでの実装を行うほかありませんでした。 height: autoの代わりに、offsetHeightを取得してアコーディオンの開閉アニメーションを実装する例 Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。 ※本記事の作例は、
行送り（line-height）の世界基準 アクセシビリティのスタンダードであるWCAG「達成基準 1.4.12: テキストの間隔を理解する」では、行送りの最低値を1.5と定めている行送りを1.5にした場合でもデザインが破綻しないように促している（@SaekiTominagaさんのご指摘で解釈を誤っていたことが発覚。修正いたします）。しかし世の中のホームページには、リセットCSSを変更していなかったり（あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか？1 ただ、sanitize.cssなど、line-heightがちゃんと1.5と設定されているリセットCSSもちゃんと存在する）、古いBootstrapをそのまま使っていたりして、line-heightが狭いのが割とある。そんな場合でも
Chrome129 で calc-size() 関数がデフォルトで使用可能になります。 可変のボックスに対するアニメーション付与がかなり楽になる予感がするのでご紹介します。 calc-size() ってなに？ 固有サイズの設定キーワードが指す実際の数値を、計算に利用できる関数です。 固有サイズの設定キーワードの例として次のようなものがあります。
July 16, 2024 Get the screen width and height as pixel values using a simple CSS code. Unitless values so you can easily use them inside any formula Updates on screen resize (No need for JavaScript) :root { --w: calc(100vw/1px); /* screen width */ --h: calc(100vh/1px); /* screen height */ /* The result is an integer without a unit! */ } Resize the demo below to see how the values update in real-ti
By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/poi
Google Search Console AMP HTML タグの属性で指定されたレイアウトが無効です 必須属性「height」がタグ「amp-video」にありません の対処方法 Google Search Consoleからメールがきて 「AMP HTML タグの属性で指定されたレイアウトが無効です」 というエラーが表示されいてた Google Search Consoleの管理画面を開き 該当ページのURLをクリックすると右側の詳細画面に 「必須属性「height」がタグ「amp-video」にありません」 という表示 どうやら、<video>タグにwidthやheightを指定していないとこのエラーが出るみたい アスペクト比を維持しつつ画面の横幅いっぱいに動画が表示されるように設定するため <video>タグにはwidhtとheightを指定しないで、CSSを使ってレイアウトを決
この記事は、アソビュー！ Advent Calendar 2022 の 17日目（裏面）です。 みなさん、こんにちは。アソビュー！でフロントエンドエンジニアをしている白井です。 弊社ではバックエンドエンジニアの比率が多いこともあり、CSS 怖い！CSS わからない！という声をよく聞きます。 CSS と少しでも仲良くなるために、今回はレイアウトを作る際に基本となる幅（width）、高さ（height）、余白（margin）を指定する際に考えていることなどお話ししようと思います。 まずはじめに レイアウトを整える前に、不要な CSS プロパティは消しておく 普段作業していて CSS を書き換えていると不必要なスタイル定義は意外と残ってしまいがちです（よくやってしまいます…）。 色や形に関するプロパティは大体決まっているので重複したりすることは少ないですが、要素の位置は display、posi
One of my longstanding annoyances with CSS has been the inability to transition to height auto. It’s an incredibly common use-case that’s needed for dropdowns and accordions and all sorts of other UI patterns. Unfortunately, this just doesn’t work: /* Doesn't work */ .dropdown { height: 0; transition: height 0.5s ease-out; } .dropdown.is-open { height: auto; } It’ll open and close just fine, but i
突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました？ <picture> <source srcset="img/img-800x480px.jpg" media="(min-width: 820px)" width="800" height="480"> <img src="img/img-480x480px.jpg" width="480" height="480" alt="画像の説明"> </picture> 実は1年以上前に公開されたChrome 90からサポートされていたそうで（僕はつい先日知りました）、上のコードのようにimgとsourceの両方にwidthとheightを記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前か
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Historical examples of context menus, from Windows 95 through macOS 12 and Height.app 2021. They may look simple, but context menus can actually be quite intricate. We’ll go through the details one by one to break down the context menu user experience. Position menus correctlyThere are two main ways to open a context menu these days: from a right-click, or from a button-click. Here’s an example of
calc-size() は 2024 年 9 月 14 日時点で Chrome v129 で #enable-experimental-web-platform-features フラグを有効にすることで利用可能です。 CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。アニメーションを適用するためには、具体的な値を指定する必要があるためです。そのため、JavaScript を使って要素の高さを計算してアニメーションを実装することが一般的でした。 このような問題を解決するために、calc-size() 関数が提案されました。この関数は calc() とよく似ていますが、calc-size() は auto, min-content, max-content, fit-content, stretch,
It’s been possible to create gorgeous typography on the web for decades, but often refining the details to perfection can take a lot of effort. Arguably too much effort, and developers just don’t have the time. Happily, the last few years of CSS have seen a lot of new tools, sometimes very simple tools, that when used in a smart fashion suddenly make polishing such graphic design details incredibl
Granola for iPhone Meeting notes on the go and for your phone calls Our app was mysteriously using 60% CPU and 25% GPU on my M2 MacBook. It turned out this was due to a tiny CSS animation! In this post, I show how to find expensive animations, why some are so expensive, and how to make many animations much cheaper. Along the way, we'll learn how the browser renders CSS animations and how to use Ch
久々に個人的に目からウロコの tips があったので記事にしておこうと思います。 はじめに アコーディオンアニメーションを実装しようとして、css transition height auto などと検索すると、主にheightを数値指定する方法や、max-heightを使った方法がヒットすると思います。 それらの方法は、何かしら大きな制約があり今まで避けていましたが、実装が簡単かつ制約がかなり小さい方法を知りました。 実装 <div class="container open"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
Unlock product updates, special deals, and inspiration！ Make movement part of your everyday routine with the best height adjustable standing desk: The versatile centerpiece that adapts to your workflow and enhances your health, comfort, and productivity. Its motor(s) and multi-stage lift desk columns support a wide range of postures, and the transition between sitting and standing is so seamless t
Textareas areas are great when it comes to accepting a large amount of text from the user. But, the problem with textareas is that they have a fixed height. So, if the user enters more text than the height of the text, the text will overflow and the user will have to scroll to see the rest of the text. You can increase the height of the textarea using the rows attribute. But, that’s not a good sol
DEV Community Follow A space to discuss and keep up software development and manage your software career Future Follow News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more. Open Forem Follow A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here
The average jump height of a person on earth and its equivalent in other worlds of the solar system🌍🪐 https://t.co/SopsmB2LFq
要素マージンを含めた width / height を取得するのがちょいと大変だったのでメモ。 html { font-size: 16px; } .div { margin: 0.3rem 0.2rem; // 4.8px 3.2px 相当 border: .3rem solid #000; // 4.8px 相当 width: 6.2rem; // 99.2px 相当 height: 6.2rem; // 99.2px 相当 } margin を含んだ値で取得できる API は無いっぽい clientWith / clientHeight … border, margin を含まない Int 値 offsetWidth / offsetHeight … border は含み margin は含まない Int 値 getBoundingClientRect … border は含み ma
概要 npm-scriptsでimgに自動でwidth/heightを付与する方法です。 Node.js上でDOM操作をするために、jsdomというモジュールを使います。 わりかし思いつきで書いたコードなので、考慮不足等々あったらご指摘ください（というか誰か最適化してくれ）。 前提 Mac環境のみ検証済み（Windowsは未検証です。適宜調整してください） ローカルにある画像が対象 参考リポジトリ 全体のコードは以下リポジトリに置いてあるので気になった方は参考にしてもらえると幸いです。 npm-scriptsの実装 大まかな流れ Node.jsでHTMLファイルを取得 jsdomを使用して、画像のパスを取得 image-sizeを使用して画像のサイズを取得 imgにwidth/heightを付与する width/heightが付与されたHTMLファイルを吐き出す 想定ディレクトリ 以下のデ
iOSでwindow.innerHeightがキーボードの高さを考慮してくれない（キーボードの表示有無に関わらず同じ値を返す）のでちょっと困っていたんですが、 iOS13からvisualViewport.heightを使うことでキーボードを除いた高さを取得できるようになったんですね。 👇 このツイートの動画がわかりやすい。 AndroidでもiOSと同じようにキーボードを除いた高さを返してくれるっぽい。 visualViewportのブラウザ対応 モダンブラウザはすべて対応してる。IEは未対応。
Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like 100vh. Philip Braunen explores why this happens and presents a solution to fix it. I was recently asked by a student to h
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
unsplash.com