タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
今まで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
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などを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
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などのキーワードをアニメーションさせる方法
レスポンシブ対応と言うと、通常は幅、水平方向のサイズのバリエーションですが、最近では高さ、垂直方向のサイズに対するニーズも高まっています。スマホではさまざまな高さのサイズがあるだけでなく、横向きのランドスケープもあります。またデスクトップでもブラウザをスクリーンいっぱいの高さにしているとは限りません。 レスポンシブを高さの観点から考慮した、Webサイトやスマホアプリの実装で役立つCSSのテクニックを紹介します。 Responsive Height Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに なぜ高さに対してテストするのか デベロッパーツール CSSで垂直方向を考慮する 垂直のメディアクエリの使用例 終わりに はじめに Responsive Height Design！
行送り（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() ってなに？ 固有サイズの設定キーワードが指す実際の数値を、計算に利用できる関数です。 固有サイズの設定キーワードの例として次のようなものがあります。
hikaku-sitatter is a tool that you can compare the height of different people and objects. You can type the name, height, gender, and color.
July 16, 2024 Get the screen width and height as pixel values using a few lines of CSS. Powered by @property & trigonometric functions Unitless values so you can easily use them inside any formula Updates on screen resize (No need for JavaScript) @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>'; inherits: true; initial-value: 100vh; }
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
2021年5月31日 source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る UI開発者 橋本 Google Chrome 90からsource要素におけるwidth属性、height属性の指定がサポートされました。 これまでpicture要素で表示する画像のアスペクト比は、picture要素に含まれるimg要素に指定されたwidth属性、height属性から計算されていましたが、source要素に指定したwidth属性、height属性からもアスペクト比が計算されるようになります。 width属性とheight属性を付けることで解決できる問題 Core Web Vitalsの3つ指標のうちの1つにCumulative Layout Shift、略してCLSというレイアウトシフトがどれくらい発生したかをスコアにしたものがあります。 レイアウト
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.
2020年12月17日 Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る UIデザイナー 辛川 この記事はミツエーリンクス Advent Calendar 2020 - Adventarの17日目の記事です。 皆さんはこんな経験ありませんか。 デザイン上は美しい余白だったが、設計後想定よりも若干余白が大きくなってしまった。 デザインテンプレートを作成したページは想定通りだったが、別ページでその他のモジュールと組み合わせた際に、想定されない余白が生じてしまった。 開発後に上記が発覚しデザインの調整を行おうとすると、影響範囲を考えながらモジュールの調整を行うような大工事になる事もあり、想定外の工数が発生してしまいます。このような場合、デザイン時に何かしらの想定不足が考えられますが、その1つにline-heightの考慮があげられると思います。 大型サイトの
The Lorem ipsum text is derived from sections 1.10.32 and 1.10.33 of Cicero's De finibus bonorum et malorum. The physical source may have been the 1914 Loeb Classical Library edition of De finibus, where the Latin text, presented on the left-hand (even) pages, breaks off on page 34 with "Neque porro quisquam est qui do-" and continues on page 36 with "lorem ipsum ...", suggesting that the galley t
🔥 Want improve your Debugging CSS skills? Get my book for just $19.99! Buy the book I know, I know. You might be thinking about why did I choose such a title for a blog post. Responsive height design, seriously? Well, the term Responsive Web Design is often known as checking the browser on multiple viewport widths and device sizes. We always test horizontally by reducing the width, but I rarely s
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
Adobe XDでテキストの行間のサイズを測るにはどうしたらいいの？XDでは行間のサイズは単位なしになっていて、 コーディングする時にline-heightでどう指定すればいいか分からなくて困っているXDにおけるline-heightの計算方法が知りたい 数値 / 文字サイズで求められる結論。 指定されている数値を文字サイズで割ってあげる、これだけでOKです。 これだけだとちょっとイメージしづらいと思うので続いて画像つきで解説します！ XDでline-heightを計算してみる数値が43.2に指定されている添付画像のテキストの場合を例に計算してみましょう。 計算式は、43.2 / 24 = 1.8。 これをline-heightで指定するので実際のコードは以下のようになるでしょう。
It’s been possible to create gorgeous layouts 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 graphic design details incredibly easy.
テキストを画像化してimg要素としてdivに配置し、iPhoneやデスクトップ版のSafariで表示したら、なんだか画像のサイズがおかしい。CSSに指定したheightの寸法よりも大きく見える。インスペクタで要素の高さを確認したところ、問題のimg要素だけheightの計算値がおかしい！こんな現象にハマりました。発生条件が判ったのでメモ。 動作環境 macOS 10.14 (Mojave), Safari 13.1 現象 要素div.tabに固定のheightと上下にpaddingを持たせ、子要素としてimg要素をheight: 100%で埋め込みます（下図）。図で「LOREM IPSUM」はテキストを画像化したものです。デスクトップ版のChromeやFirefoxでは、上側のようにLOREM IPSUM画像がdiv.tabのコンテンツボックスにぴったり収まって表示されますが、Safari
久々に個人的に目からウロコの 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
[Online] potatotips #73 iOS/Android開発Tips共有会 https://potatotips.connpass.com/event/202810/
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
Note 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, stre
If you messed around with CSS for long enough, chances are you've tried at least once to make a transition from height: 0 to auto... only to find out that it doesn't work! 😢 ➡️ Luckily, today there is actually a solution to this problem: it uses CSS Grid under the hood, and it is just so easy and it works flawlessly! Let's start with a practical example. I have built this simple accordion: The HT
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
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
記述例 <img src="xxx.png" width="300" height="250"> 対応ブラウザ width属性とheight属性は以下のブラウザでサポートされています。 IEEdgeFirefoxChromeSafari widthとheightを付けるメリット 画像にwidth属性とheight属性を付けるとどのような利点があるのか説明します。 レイアウトシフトを回避できる FirefoxやChromeなどのメジャーなブラウザでは、img要素にwidthとheight属性を指定することで、画像が読み込まれる前に画像のサイズを計算してレイアウトを確保します。 画像の遅延読み込みをしている場合、画像のサイズを指定しておかないと画像が読み込まれた後にレイアウトが動いてしまう可能性があります。 レイアウトが動いてしまうことでユーザーに不要なクリックを誘発したり、アンカーリンクのス
What I'm trying to achieve is a textarea that starts out as a single line but will grow up to 4 lines and at that point start to scroll if the user continues to type. I have a partial solution kinda working, it grows and then stops when it hits the max, but if you delete text it doesn't shrink like I want it to. This is what I have so far. export class foo extends React.Component { constructor(pro
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
概要 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ファイルを吐き出す 想定ディレクトリ 以下のデ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
