面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
Pixel Map Generator
<!DOCTYPE html> <html> <head> <title>map created with amCharts | amCharts</title> <meta name="description" content="map created using amCharts pixel map generator" /> <!-- This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License. You may use this map the way you see fit as long as proper attribution to the name of a
Silk – Interactive Generative Art
Silk was made by Yuri Vishnevsky, with music and sound crafted by Mat Jarvis. Art shared with Silk is licensed under Creative Commons. If you enjoyed Silk, please let me know! ✨ It's 2024 and I’m working on a new Silk. Is there anything you'd like to see? Call or text me at ☎ (415) 671-6855 If I don't reply I might be asleep, so feel free to leave a message. Double-click the ? (top right) to remov
Seamless Lite - Seamless Pattern Design by COLOURlovers
We use cookies and other data collection technologies to provide the best experience for our customers. You may request that your data not be shared with third parties here: Do Not Sell My Data X Terms Updated We’d like to inform you that we have updated our Terms of Use. The most substantive changes are: This platform was acquired by a joint venture in Israel. changes have been made to the releva
オンラインでもPhotoshopでも簡単にグリッドが設計できる -Modular Grid Pattern
オンラインでもPhotoshopでも、数値を指定して簡単にグリッドが設計・作成できる「Modular Grid Pattern」を紹介します。 Modular Grid Pattern [ad#ad-2] Modular Grid Patternは、オンラインでもPhotoshopでも同様の手順で、簡単にグリッドが作成できます。 Modular Grid Pattern：オンライン版 Modular Grid Pattern：Photoshop版 Modular Grid Pattern：オンライン版 ベースラインの高さを変更しているキャプチャ 作成したグリッドは、3つのフォーマットでダウンロードできます。 PNG pattern ※GIMP用 Photoshop pattern ※Photoshop用 Transparency mask ※Fireworks用 [ad#ad-2] Mod
Webサービス「Android アイコン ジェネレータ」をリリースしました - Wizard-G 開発日誌
本日、「Android アイコン ジェネレータ」をリリースしました。 Android アイコン ジェネレータ (英語版もあります → Android Icon Generator) これは何？ ガイドラインに沿った、Androidのアイコンを簡単に作成することができるツールです。 Androidのアイコンを作るときには、公式で決められた、アイコンデザインガイドラインに従う必要があります。 グラデーションの色や、影のつけ方、余白のサイズなどが細かく決められていて、以前その通りに作ろうとしたら、なかなかピッタリに作れなくて苦労しました。(しかもドキュメントが英語で、読むのが大変だった・・・) しかし、こうしてガイドラインがきっちりと決まっているのなら、これは、プログラムでジェネレートできるのでは？と思ったのが、このツールを作るきっかけです。 また、メニューアイコンやタブアイコン
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」:phpspot開発日誌
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」 2010年11月05日- 2011/5/7: 本ライブラリに脆弱性がありましたので速やかにバージョンアップを実施して下さい。(詳細) Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」。 仕様について理解しなくても、このプラグインを読み込んでちょちょっと数行書くだけで実装出来てしまいます。 例えば、facebookなら、$('.facebook').socialbutton('facebook_like'); と１行書くだけ。 mi
簡単にCSS3を使おう！お役立ちCSS3ジェネレーターまとめ - EC studio デザインブログ
CSS3を使いたくても、コードを書くのがなかなか難しい。 そんなときはCSS3ジェネレーターで作成してみてはいかがでしょうか？ 視覚的に確認できるので、ちょっとした調節も簡単。 気に入った形を作成して、コピー＆ペーストでスタイルシートに貼るだけです。 ジェネレーターを使って、ぜひCSS3にチャレンジしてみてください。 複数のプロパティを作成する場合 CSS3プロパティジェネレーター http://css-eblog.com/eblog_sample/0912/css3-generator/ 日本語のジェネレーターなので英語が苦手な方におすすめ。 gradient, box-shadow, text-shadow, border-radiusを生成できます。 CSS3 Generator http://css3generator.com/ 様々なCSS3のコードを作成できます。 ほとんどが値
CSS3のジェネレーター１４種:phpspot開発日誌
14 CSS3 Smashing Generators | Marked Lines CSS3のジェネレーターが１４種まとまったエントリのご紹介。 既に紹介したものを多く含まれていますが、CSS3の作成をツールを使ってより効率化しちゃいましょう。 CSS3 Please! １個のプロパティを編集すれば全部変わるもの CSS3 Generator v1.5 ウィザード形式でCSS3プロパティを簡単作成 CSS3 Generator – Widgetpad クリックで簡単にCSS3生成 CSS3 Gradient Generator v2.0 グラデーションを使ったボタンを生成 Westciv Tools WYSIWYGなCSS3プロパティ調整ツール色々 CSS Border Radius Radiusに絞った超シンプルツール。よく使うRadiusプロパティを一発生成 全部見る 関連エントリ
便利なCSS3ツール6つ＋α:phpspot開発日誌
Six Useful CSS3 Tools | Tools 便利な６つのCSS3ツールがまとまったエントリを＋αでご紹介。 まだ覚えていないプロパティなんかもWYSIWYGやジェネレート等で簡単に理解＆覚えることが可能です。 CSS3 Button Maker CSS3なボタンメーカー。角丸やシャドウの指定が可能 CSS3 Generator CSS3を使ったスタイル効果をブラウザ上で簡単ジェネレート CSS3 Please! クロスブラウザ向けのradiusやshadow等を一括生成 CSS3 Gradient Generator CSS3のグラデーション生成ツール CSS3 Transforms WYSIWYGでCSS3のtransformプロパティを生成可能 CSS3 Selectors Test ブラウザのCSS3対応状況が分かるツール CSS3 Click Chart by Im
4月26日配信！予約者限定スペシャルコンテンツ！！ | 千里金蘭大学 受験生応援サイト
4月26日に開催予定でしたオープンキャンパスの代替として、予約者限定スペシャルコンテンツを4月26日に配信いたします。 学科概要説明や大学内各施設の紹介、気になる今年度の入試情報など、予約者限定でお届けします。 予約は、4月25日まで受け付けます。 ご予約には千里金蘭大学マイページの作成が必要です。 https://mypage.s-axol.jp/kinran/login 皆さまからのご予約をお待ちしております。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Calligraphr - Create your own fonts.
Gridulator: Make pixel grids, lickety-split
Initializr - HTML5 project - template
HTML → PDF
PunyPNG
Gridulator PREVIEW
動作が快適で使いやすいCSS3のジェネレーター -CSS3 Playground
Twitter "Follow" Badge for your site / blog
CSS3を使用した美しいフォームが簡単に作成できる -FAARY