Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

タグ

RetinaとCSSに関するglat_designのブックマーク (2)

  • 面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方

    レスポンシブイメージ、使ってますか? ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で! 日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも!アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基的な考え方、それから自動化について書いてみます。 では、行ってみ

    面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
  • WebページをRetina対応させるテクニック~基礎知識編

    WebページをRetina対応させるテクニック~基礎知識編:jQuery×HTMLCSS3を真面目に勉強(4)(1/2 ページ) iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応(1920×1080ピクセル)のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場

    WebページをRetina対応させるテクニック~基礎知識編
    glat_design
    glat_design 2015/02/04
    Retina対応のCSS(Media Queries)版 /
  • 1