HTML5.1で変更された見出し要素の使い方、レスポンシブイメージの要素などが分かりやすく解説されたコーダ−必読のリファレンス本 | コリス

2017/03/24 44 users リファ コーダ コリス 階層 見出し

2016年11月1日に勧告化されたHTML5.1ではレスポンシブイメージの要素などが追加され、定義されている要素が108個から113個に増えました。また、HTML5では見出しをすべてh1要素で統一することも可能でしたが、HTML5.1では見出しの階層を無視した使い方され、見出しの階層は合わせるべきと定義されています。 今持っているHTMLのリファレンス本は、HTML5対応ですか？ 現役の人はリファ... 続きを読む

EmmetでHTML 5.1のレスポンシブイメージを効率よく記述しよう - Qiita

2017/01/25 45 users Emmet Qiita コーディング CSS 昨今

HTML、CSSを短い文字数で打てるプラグイン Emmet を使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか？ 本エントリーでは、 Emmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します 。 ※ 参考記事「 レスポンシブイメージで画像の表示を最適化 〜CSSもJS... 続きを読む

面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方 – Rriver

2016/10/17 216 users Rriver pngquant 手動 ウェブサイト ツール

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、 イメージオプティム とか Mac Automatorとpngquant などのツールを駆使して一生懸命に画像自体を最適化したり レスポンシブイメージ を使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。... 続きを読む

レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA

2016/09/26 500 users CSS ICS MEDIA タブレットユーザー 最適化 新機能

日本のwebサイトにおけるスマートフォン・タブレットユーザーのシェアは32%に達し（参照「 StatCounter 」)、今やレスポンシブなwebデザインなどのスマートフォンを意識した設計が必須です。しかし、レスポンシブなレイアウトにおいて画像を取り扱う場合、最適な画像サイズ、最適な画像の見せ方を実現するには、複雑なCSS・JavaScriptコードが必要でした。 HTML 5.1では、このような... 続きを読む

<picture>まわり雑感 その1 - fragmentary

2014/10/31 38 users fragmentary picture ネイティブサポート

2014-10-31 <picture>まわり雑感 その1 HTML Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Ro... 続きを読む

レスポンシブイメージのネイティブサポート - HTML5 Rocks

2014/09/30 130 users ネイティブサポート HTML5 Rocks

Your browser may not support the functionality in this article. <picture> 要素とは <picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込み... 続きを読む