画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
Improving Perceived Performance with Multiple Background Images – CSS Wizardry
23 October, 2016 Improving Perceived Performance with Multiple Background Images Written by Harry Roberts on CSS Wizardry. Table of Contents CSS Gradients and Multiple Backgrounds Making the Approximation Practicality Update 2016-11-11 I’m on a train right now, which means the wifi is awful. A lot of sites are refusing to load at all, and those that do have lots of images missing, leaving big blan
レスポンシブなCSSスプライト - MANA-DOT
よく知られたCSSスプライトはボックスの幅･高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、 background-sizeとbackground-positionを % で指定し、ボックスの幅によって可変サイズな (レスポンシブ、あるいはフレキシブルな)CSSスプライトの表示法を紹介します。 デモ 元画像 gulp-spritesmith で作成した適当なスプライトシートです。 スプライトの利用例 このページの幅を変えてみると、以下のスプライト画像のサイズが画面幅によって可変であることがわかると思います。 上からwidthを 70% 、 50%、 100% で指定しています。 ボタン1 ボタン2 ボタン3 利用例を含め
マンガでわかるDocker🐳 on Twitter: "CSSちゃん塗り終わった！ レースがカスケーディングしてたりニーソがborderだったり https://t.co/jNiG7X91XB"
CSSちゃん塗り終わった！ レースがカスケーディングしてたりニーソがborderだったり https://t.co/jNiG7X91XB
GitHub - substack/html-inline: inline javascript, stylesheets, and images from an html page
<html> <head> <style>body { background-color: cyan; } </style> </head> <body> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFcwAABXMBNzKusgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAhPSURBVHic3Zt/cFRXFcc/5y1JIP6oRG1lWmutJU0WtLRaZEaH2l+O/2A7U9JWHQWqBWuLimInQHYvd7MJYAewLVhg2lK106JpZ/zRP5yK2Ok/oB3aqrggwZZqpVAFNE4o+bF7/OO9JJtl39
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
CSS Image Replacement Museum
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replac
How to proportionally scale images that have dimension attributes | 456 Berea Street
Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy – all you need to do is give the image a width (or max-width) in percent: img { max-width:100%; } This will prevent any img element from getting wider than its container. If the container is narrower than the ima
Border Image CSS Code Generator - Easy Image Border - Border Image
Create now your custom border image CSS Border image generator allows programmers and developers to draw an image on the borders of an element. It provides room for efficient and perfect design. It is very complex to do it by yourself, you need this generator to assist you and it is a bit frustrating to properly take by hand. Though it is tricky, it allows users to create flexible borders with a s
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
IEで透過pngにopacity - latest log
@nksm さんのつぶやき IE7+で透過pngに対してopacityを指定した時の汚さはなんとかならんかな。IE6はキレイなんだが・・・。 via http://twitter.com/nksm/status/16611637369 を見つけたので、VMLを使って透過pngにopacityを適用する方法を jsdo.it にあげました。 http://jsdo.it/uupaa/IEAlphaPng_x_Opacity 解説 知識として IE6〜IE8では、filter: AlphaImageLoader(src="**.png") で透過png画像を利用できる IE6〜IE8では、filter: alpha(opacity=0〜100)で 画像の不透明度(opacity)を指定できる filter: は一度にひとつではなく、複数指定できる があり、これを踏まえて filter: alp
オンラインカジノの主な特徴と魅力
オンラインカジノは、リアルにあるカジノの世界を、ネット上でエンジョイする事が出来る、ギャンブルゲームです。 現実の上でのカジノと変わらず、インターネット上と言いましても、リアルマネーをかけることが可能となっています。 したがって、ギャンブルを満喫する事が行なえるので、とてもスリリングな世界観を満喫できます。 そして、オンラインカジノについては、賞金額もかなり高いのが持ち味だと言えます。 オーソドックスなギャンブルとして市民権を得ている、パチンコやスロットのケースでは、稼ぐことができたとしても、1日あたり数十万円ぐらいになります。 しかしながら、オンラインカジノについては、1日あたり数千万の高額当選も想定でき、具体的に1億円を的中させたプレイヤーもいます。 ひと晩で億万長者になれることが望めるギャンブルとなっています。 そして、オンラインカジノについては、好きな時間に好きな場所で満喫する事が
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
CSSのみでスライドして画像を切り替えるギャラリーを作る
ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。 Demo: CSS Sliding Image Gallery ギャラリー全体のマークアップは以下のような単純なもの。 <ul id="gallery"> <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li> <li class="image" id="second"><a href="#third"><img src="161-2.png"></a
box-shadowとradial-gradientで画像をポラロイド写真風に
CSS3のbox-shadowプロパティではinsetという値を取ることができ、その場合ブロックの内側に影が付く。これをある工夫と共に利用すると写真の端に影がつけられる。更にradial-gradientでセピア色のグラデーションを重ねてやれば、良い具合に古ぼけさせることもできるので、両方の効果を重ねてやればポラロイド写真風に見えないこともない？ Demo: Polaroid effects using inset box-shadow and radial-gradient キモは以下のようにz-indexを使って画像を背面に回してやること。そうすれば親のブロック要素でのbox-shadowやbackground-imageを画像の上に重ねることができる。 .polaroid { float: left; width: 400px; height: 400px; background-i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2016年版 フロントエンド開発フォーマット
Files | Adobe
CSS Sprites vs. Data URIs
Reassess IR techniques · Issue #1149 · h5bp/html5-boilerplate
http://buzz.dendrocacalia.com/2009/04/css_sprite.html