2015年3月13日のブックマーク (2件)

  • jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験|BLACKFLAG

    半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON/OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

    jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験|BLACKFLAG
  • photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 訳も知らないで

    RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた&CSS設計について初めて考えてみた(SMACSS)時の感想 - 記すに足らず。 そのときにやってみた Photoshopのデータから画像切り出し→compass(-rails)でcssスプライト用画像を作成する方法のまとめ。 photoshopの画像をスライス photoshopから画像を切り出す際、CCから追加された 「画像アセット」 という機能を使うと便利です。 画像アセットとは? レイヤーに決められた名前を付けるだけで、 勝手に画像として切り出してくれます。 〜参考にさせていただきました!〜 使い方

    photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 訳も知らないで
    coemi
    coemi 2015/03/13
    レイヤー名に拡張子付の名前をつけると、それに従ってassetというフォルダに画像を書き出してくれる機能。画像アセット。