突然ですが、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を記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前か
Responsive Resources A collection of resources about the various aspects of responsive web design.
🎉 Celebrating 10 years of Responsive Web Design Jun 11, 2021 🥳 Ten Years of RWD with Ethan Marcotte Well, that was fast! We're celebrating ten years of Responsive Web Design this week with a fresh take from Ethan Marcotte. (Happy tenth to that little yellow book!) Take a look back (and ahead!) as Ethan reflects on what inspired Responsive Web Design, what we need to reckon with as designers, and
I find working with the grid helpful. The grid helps to maintain consistency across the different layouts and make faster design decisions. Grids give more precise control over alignments and layout on different screen sizes. This article highlights the most important aspect of the responsive grid and how product designers can adapt grids in their design workflow. Grid AnatomyA grid is composed of
This content is 6 years old. Remember that the following content might be outdated. I was invited to “Ask the Expert”, an online meetup where experts share their knowledge around different topics related to building the web. In the talk and article, I show how I design systems of components that go beyond responsive adaptation to different screen/viewport size and can also be used in different lay
WordPress 10+ Examples of Responsive Websites That Nailed It Mark AdamsJuly 15, 20200 Comment07.3k You would naturally like to see that your website will look good on every browser and device. Especially so if it’s an eCommerce website. The following responsive web design examples are designed to provide you with information you can use to accomplish just that. There’s more than just a few specifi
When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints. Instead of configuring Polypane to show devices, you can configure it to show the breakpoints supported by the frameworks. Polypane comes with workspace presets for Bootstrap v5, Materialize, Bulma and Tailwin
As the number of mobile phone users on the internet increases, it has become more and more important for web designers to lay out content in ways that work well for a variety of screen sizes. Responsive web design, originally defined by Ethan Marcotte in A List Apart, is a design strategy that responds to users' needs and their devices' capabilities by changing a site's layout to suit the device b
Generated CSS: What are fluid-responsive fonts / fluid typography? Also known as: Responsive typography (excellent article), Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography, and even Responsive Display Text. They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints. Some versions address the whole page,
皆さんこんにちは、リースブログ編集部です。 本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。 →紹介：CSSテクニックを駆使したサイト参考 高さ不明のブロック要素の比率を維持させる方法 レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。 画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。 →【おすすめ記事】初心者におすすめのコーディングを効率化出来る面白い方法 【NG例】通常のレスポンシブ対応方法例 通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。 具体的な例がこちら。 ブラウザのウィンドウサイズをグイングイ
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
