いいこと聞いた！ CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ

2023/12/12 159 users CSS リセットCSS デフォルト ターゲット ブラ

最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラ... 続きを読む

これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード | コリス

2021/05/26 171 users コリス フォールバック src WebP画像 HTML

画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバック... 続きを読む

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

2020/07/02 650 users height Rriver link jpg width

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般... 続きを読む

「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31

2019/09/11 350 users Twitter 仕様 解釈 話題沸騰 ツイート

web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 img要素の仕様を理解す... 続きを読む

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート | コリス

2019/04/24 291 users コリス 遅延 Engineering Manager 解説

Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていまし... 続きを読む

これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス

2018/10/22 205 users コリス cla Lazy Load 超軽量ライブラリ 状態

最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にcla... 続きを読む

HTMLにおけるimg要素のalt属性

2013/06/20 250 users alt属性 原文 HTML HTML Standard 基本

HTMLにおけるimg要素のalt属性 HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代... 続きを読む

[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス

2013/04/10 112 users デフォルト 共通 実装 HTML コリス

画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切... 続きを読む

[CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート | コリス

2012/05/13 132 users コリス エフェクト CSS アニメーション カラス

画像をホバーすると、ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシートを紹介します。 実装 HTML 画像のimg要素とエフェクト用のdiv要素をdiv要素で内包します。 <div class="image_shine"> <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.j... 続きを読む

[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート | コリス

2012/05/09 142 users コリス 矩形 並列 jpg CSS

「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 デモページ：div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" ... 続きを読む

[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina | コリス

2012/04/04 114 users コリス jQuery Retinaディスプレイ スクリプト

Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加え... 続きを読む

[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス

2011/11/28 102 users コリス wrapper overflow CSS Hidden

デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src... 続きを読む

[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ | コリス

2011/11/10 363 users ポパー コリス span要素 CSS アニメーション

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装し... 続きを読む

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

2011/07/26 256 users コリス Alt Photos section要素 グリッド

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt=... 続きを読む

[CSS]画像に美しい角丸とボックスシャドウを適用する方法 | コリス

2010/07/01 362 users trick WebKitブラウザ コリス Safari CSS

img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用す... 続きを読む