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

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

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

画像のRetina対応に便利なツールやアプリ、ライブラリ色々 | バンクーバーのうぇぶ屋

2015/10/12 31 users バンクーバー 他力本願 解像度 うぇぶ屋 根本

相変わらずWEB屋にとっては面倒くさいRetina対応…。@2x、@3x、解像度に合わせて毎回画像を作るのも、正直面倒くさいですよね。個人的には何か根本から解決してくれるような仕組みや対策が出てこないかなと、相変わらず他力本願でお待ちしています。 とはいっても、現時点で出来る限りの対応はしなくてはならないので、今日は僕が知っている画像作成時のRetina対応を少し便利にするツールやアプリ（一部使い... 続きを読む

商用利用無料、200種類の美しいブラーをつかったぼやけた背景・壁紙素材 -Blurgrounds | コリス

2014/05/08 117 users ウェブデザイン コリス Photoshop 壁紙 ドメイン

ウェブデザインの背景や、デスクトップ・スマフォなどの壁紙としても利用できる、ぼやけたブラーなスタイルが美しい素材を紹介します。 Blurgrounds http://blurgrounds.com/ って、ドメインがまたいいですね。 素材のサイズは2,000x2,900pxの高解像度で、Retina対応です。 必要があれば、Photoshopなどで自由に変更・修正してください、とのことです。 利用... 続きを読む

jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も － Publickey

2014/01/06 78 users Publickey iOS SVG 描画 アイコン

jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も iOSやAndroidなどクロスデバイス対応のモバイルアプリケーション開発のためのJavaScriptライブラリ「jQuery Mobile」の最新版「jQuery Mobile 1.4」が公開されています。 CSS内のSVGでアイコンを描画 今回のバージョンの大きな特徴は... 続きを読む

アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌

2013/05/14 51 users チュートリアル phpspot開発日誌 アイコンフォント

Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変... 続きを読む

ASCII.jp：WebサイトのRetina対応は必要か？｜清水 誠の「その指標がデザインを決める」

2013/03/15 31 users 指標 清水 Retinaディスプレイ ASCII.jp 解像度

アップルのWebサイトにRetina対応のiPadでアクセスすると、一昔前のWebサイト（インターレースGIF）のように、ボケた画像がジワっとシャープに切り替わります。通常の画像を表示した後で、Retinaディスプレイの場合には解像度が高い画像へ切り替えているのです。 Retinaディスプレイで表示した通常画像（左）と高解像度画像（右） それぞれの画像について、低解像度版と高解像度版の2種類を読み... 続きを読む

【Fireworks】スマホサイトに！スライスを偶数にリサイズするコマンド作りました。 | バシャログ。

2013/02/06 22 users Fireworks hakoishi 偶数 バシャログ 花粉

今年の花粉は少なめ、て話を聞いたこと無い気がするhakoishiです。 なんかそういうところボジョレーっぽい。 さて、今回はスライスを偶数にリサイズするFireworks機能拡張を作りました。 以前、ソース内の画像サイズを半分にリサイズするDreamweaverコマンドを作ったのですが、 Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利） 画像サ... 続きを読む

2013年こそWebフォント！Retina対応も楽々のアイコンWebフォント2012年版まとめ10個 - W3Q

2012/12/13 48 users フォント Webフォント W3Q

[フォント] 2013年こそWebフォント！Retina対応も楽々のアイコンWebフォント2012年版 続きを読む

画像をRetina対応で書き出しする、Fireworksの拡張機能作ったよ。 | creative tweet.

2012/12/07 17 users Fireworks Fire creative tweet

Fireworks Lover Advent Calendar 2012の7日目の記事です。 スマートフォン対応の案件も増える中、少々面倒なモノの1つにRetina対応の画像準備があったりします。もちろんFireworks Loverな私ですから、FireworksでRetina対応画像の書き出しができる拡張機能を探してみるわけですが、バシャログさんの拡張機能しか見当たりませんでした。 【Fire... 続きを読む

Compassでスプライト画象を高速に書き出す方法[to-R]

2012/12/03 35 users Compass background-image PNG

Compassでスプライト画象を高速に書き出す方法 Check Tweet CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。 以下のままですとすごく時間がかかるのですが、 $sprites: sprite-map("sprites/*.png"); @mixin sprite-background($name) { background-image: spri... 続きを読む

Retina対応も楽チン！特に使い勝手のよいアイコンWebフォントまとめ6つ - コメンター

2012/09/20 48 users コメンター Facebookページ ちん クリエイター シェア

コメンターとは コメンターは、クリエイターの気になるサイトやページをシェアして、匿名ならではの自由なコメントをみんなで楽しむコミュニティです。 このページをシェア 上記リンクをブックマークツールバーに登録することで、閲覧中のサイトをその場でシェアできます。 Facebookページ 2012年8月にオープンしたコメンターのFacebookページでは、クリエイター向けの最新Web/IT情報をどこよりも... 続きを読む

Retinaディスプレイ対応ではないアプリをRetina対応にする『Retinizer』 - Macの手書き説明書

2012/09/19 36 users Retinaディスプレイ対応 Mac 手書き説明書 アプリ

現在の価格: 無料 販売元: Retinizer リリース日: 不明 ウィンドウにドラッグ&ドロップされたRetina非対応アプリの.plistファイルを書き換えてRetina対応にするアプリです。アプリ内で使われている文字がくっきり滲まなくなるのが一番の恩恵。僕はまだRetinaではないので配布サイトのスクリーンショットを拝借しました。Retina対応(.plist書き換え)から元に戻す機能もあ... 続きを読む

Favicon系のアイコンをまとめて生成してくれる『AllTheFavIcons』 | 100SHIKI

2012/09/17 43 users 100SHIKI アイコン ウェブ ファイル タブレット時代

若干エラーが出るのが気になるが、アイコンはきちんと生成されたのでご紹介。 AllTheFavIconsを使えば、ウェブ/アプリ/タブレット時代に必要なFavicon系アイコンをまとめて作ってくれるようだ。 iPhoneやらiPadやら向けに別々にアイコンを用意して、しかもRetina対応までって面倒すぎる・・・と思っている人には良いだろう。 また生成されるファイルにはアイコン設置用のコードなんかも... 続きを読む

【Retina対応】素晴らしいiPhone用壁紙150枚下さい!! - iPhoneで遊ぶ夫

2012/07/15 47 users iPhone Safari Safari以外 ブラウザ 保存

2012年07月15日21:51 カテゴリ壁紙スレまとめ 【Retina対応】素晴らしいiPhone用壁紙150枚下さい!! ※iPhoneからこのページを開いている場合には必ず"画像をタップしてリンク先から保存"するようにしてください。 ※Safari以外のブラウザで開くと、リンク先が正しく表示されない場合がありますので、必ずSafariから開き直してから画像を保存してください。   ツイート　... 続きを読む

【iOS 6】Facebookが統合されて可能になる4つの機能！ - AppBank

2012/06/12 9 users AppBank Facebook Faceboo 新OSX

本日発表された「iOS 6」では、Facebookが今まで以上に使いやすくなります。 iOS 6 などの発表された情報はこちらのページからチェックできます。 【速報】iOS6, 新OSX, Retina対応のMacBook Pro、すぐわかるまとめ！ 具体的には以下のことができるようになります。 webページや写真をすぐに投稿できる Facebookイベントがカレンダーに同期される Faceboo... 続きを読む

iOS 6 で Siriはさらに頭の良い子に！FacebookやTwitterへの投稿、アプリの起動など。 - AppBank

2012/06/12 8 users Twitter AppBank Facebook Siri

本日「WWDC 2012」で発表されたiOS 6の情報はチェックされたでしょうか？まだチェックしてないよ！って方はまずはこちらから全体概要をご覧ください。 【速報】iOS6, 新OSX, Retina対応のMacBook Pro、すぐわかるまとめ！ あの「Siri」にiOS 6でさらに新機能が追加されました。 なんと言っても目玉は「FacebookやTwitterへの投稿」と「アプリの起動」でしょ... 続きを読む

iOS 6 では「電話」アプリが大きく進化！3つの新機能をサクッとご紹介！ - AppBank

2012/06/12 15 users MacBook Pro iOS6 新OSX まとめ 速報

本日「WWDC 2012」で発表された iOS 6 、すでにチェックされていますでしょうか？ 「WWDC 2012」の発表内容をサクッとチェックしたい方はこちらの記事をどうぞ。 【速報】iOS6, 新OSX, Retina対応のMacBook Pro、すぐわかるまとめ！ iOS 6 では、あまり変化のなかった「電話」アプリにも便利な新機能が追加されました。今回「電話」に追加された機能は以下の3つで... 続きを読む

【速報】iOS6, 新OSX, Retina対応のMacBook Pro、すぐわかるまとめ！ - AppBank

2012/06/11 175 users iPad 端末 配布 iPod touch 随時

本日WWDC2012で発表されたまとめになります。 内容は随時更新します。正確性を保証するものではありませんので予めご了承ください。 iOS6の発表 iOS6は200の新機能を搭載。iOS6βは本日より開発者に配布。 対応端末は iPhone 3GS以上、iPad 第2世代以降、iPod touch 第4世代以降 導入部。 これまで出荷した iOS デバイスは3億6千500万台（20123月まで）... 続きを読む

遂にKinoppyの神アップデートきた！iPadのRetina対応で更に電子書籍が加速しきそうな件 - もとまか日記

2012/04/20 18 users Kinoppy ドカーン 実名 本題 待望

毎週金曜日はKinoppyで新刊チェックが欠かせない、ネットの実名「もとまか」です。電子書籍も好きだけど、辛子明太子も好きです。 Kinoppyは金曜日に新刊がドカーンとくるんですよね。今週もたくさん入荷（というのかな？）してました。 で、本題はそこではなくて、何を言いたいのかと言うと、ついに！待望の！iPadのRetina対応版「Kinoppy」が登場してた模様です。 紀伊國屋書店Kinoppy... 続きを読む

Final Fantasy III: フル3Dファイナルファンタジーを遊ぼう。ピンチ操作によるアイテム探しや、Retina対応も嬉しい。 - iPhoneアプリのAppBank

2011/03/24 24 users AppBank ファイナルファンタジーシリーズ ピンチ操作

ミリオンヒットしたDS版からさらにパワーアップした、Final Fantasy IIIの紹介です。皆さんこんにちは。@kazuendです。私がファイナルファンタジーシリーズで1番好きなタイトルがiPhone版としてリリースされました。しかも2006年にリメイクされミリオンヒットとなったDS版からパワーアップしたということで、RPGファンのみならず全てのiPhone･iPod touchユーザーにオ... 続きを読む