【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
CPP： AMPに替わる標準策定の提案（翻訳版）
Googleのモバイル検索結果でカルーセル形式で表示される とか「AMP対応」の表示を開始した とのことで、日本でもAMPプロジェクト が話題ですね。個人的には、目的には賛同するけど、やり方には同意できない部分もあるというのが正直なところです。AMPを広めるためにGoogleの検索結果と結びつけてしまったところが特に疑念を抱くところです。 とはいえ、検索結果に優先的に表示されるなら対応を考えないわけにはいかないですよね。背に腹は変えられないですからね。 そんなふうに悩んでいたところ、つい先日、Implementing Responsive Design の著者でもあるTim Kadlecさんの素晴らしい記事を目にしたので、日本の開発者の方々にもぜひ読んでもらいたいと思い、早速Twitterで本人に承諾を得て 翻訳させてもらいました。 以下、原文へのリンクと翻訳です。 CPP: A Stan
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
レスポンシブWebの時代だからこそ見直すべき、3つの「ウェブの哲学」 | Rriver
先日、「A Dao of Web Design」という記事を読んでいて衝撃を受けたので、このブログでもご紹介したいと思います。この「A Dao of Web Design」には、ウェブ制作の歴史と未来が記されています。当時は存在すらしなかった「レスポンシブWebデザイン」やウェブの基本理念である「One Web」にも通じる内容です。 この記事が書かれてから12年以上たっていますが、日本のウェブ制作を次のステップに進めるためにも、「ウェブの哲学書」とも言えるこの「A Dao of Web Design」が、いま一度、日本で見直される必要があると感じています。 いったいどんな記事？ 「A Dao of Web Design」は、オーストラリア出身のJohn Allsopp氏が書いた記事で、2000年4月7日にA List Apartに掲載されたものです。John Allsopp氏は、早くからウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
