いいこと聞いた！ 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... 続きを読む

[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg | コリス

2015/02/13 76 users コリス DOM SVG ベクター PNG

ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100... 続きを読む

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要素、切... 続きを読む

シンプルなダミー画像から、実用的なカスタマイズが豊富に用意されたダミー画像生成サービス -Cambelt | コリス

2012/10/15 71 users コリス Ruby カスタマイズ ダミー画像 真打ち

ダミー画像生成サービスの真打ちが登場したぞ、という感じです。 画像のサイズを表記したシンプルなダミー画像から、実用的なカスタマイズが豊富に用意されたダミー画像生成サービスを紹介します。 Cambelt Cambelt -GitHub Cambeltの使い方 Cambeltのデモ Cambeltの使い方 CambeltはRubyで作成されたオンラインサービスで、img要素のsrc属性にコードを記述す... 続きを読む

img要素でCSS Spriteする方法: 小粋空間

2012/06/06 90 users 小粋空間 座標 CSS Sprite HTTPリクエスト数

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、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]パラパラ漫画のように画像を次々に表示させるCSS3アニメーションを使ったスライドショー | コリス

2012/05/11 84 users コリス Alt CSS パラパラ漫画 スライドショー

マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ！と思いましたｗ デモ：With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt... 続きを読む

[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]普通のとはちょっと違う、オーバーレイのスライド方法が面白いホバーエフェクト | コリス

2012/04/25 79 users コリス class エフェクト div要素 デモ

画像を配置したパネルをホバーすると、各アイテムをまたいでオーバーレイのパネルがスライドするエフェクトを紹介します。 デモ：Inverse 反対の面からスライドするデモです。 実装 HTML 各パネルは画像のimg要素とオーバーレイのdiv要素が一組になっており、リスト要素で実装します。 <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http... 続きを読む

[JS]画像を湖面にゆらゆらと映し出す癒し系スクリプト -lake.js | コリス

2012/04/22 51 users コリス 湖面 None src display

lake.jsの使い方 HTML 画像はimg要素で配置し、「display: none;」で一旦非表示にします。 <img id="lake-img" src="lake.png" style="display: none;"/> 画像は下記のように、上半分のみ用意します。 使用している画像：lake.png 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <... 続きを読む

[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の角丸とボックスシャドウを適用す... 続きを読む