Sass v3.3, v4.0 での変更点についてメモ
Sass3.3 がそろそろリリースっぽいので、追加機能・変更点についてうまくまとまった記事があったので、学んでみた。 ちなみに、変更点はこちら 実際に動作を確認するにはpreバージョンのsassをインストールします。 [shell] gem install sass –pre sass –watch source_dir:output_dir [/shell] で確認できます。 ＆セレクタに関連する構文の改善たとえば、以下のようにした場合 [ruby] $module: ".module"; #{$module}–element { #{$module}__child { //valid color:orange; } & #{$module}__child { // valid color:orange; } #{$module}__parent & { // valid
他の要素に変更を通知する - Kazzzの日記
AngularJSは素晴らしいフレームワークでありJavascriptのイベント処理を意識することはあまりないのだが、それでも皆無ではない。 私がそれを必要としたのは、特定の要素が変更されたことを他で検出したいケースだ。 AngularJSはコンテナとなる要素、例えばdiv要素毎にコントローラを配置できる。コントローラは要素と同じ親子関係を持つが、基本的にはスコープとして他と分離、隔離されており互いに影響を与えない設計となっている。 ※ これ自体は非常にスマートで理にかなった設計なのだが、分離されているが故に他の要素を変更を検知するためには仕掛けが必要になるケースがある。 $scope.$broadcast 接頭に$が付くものはAngularJSが使用する予約された変数だが、そのうち$scopeは最も多用する変数であり、コントローラが定義されたスコープ(要素)に対してAngularJSが必
CSS Condense
Sassで書いてると分散しまくるMedia QueriesのブロックをまとめられるCSS圧縮ツールを探している。まずはCSS Condenseというものを見つけた。だいたいの所は単純な空白と改行削除ツールだけど、Media Queriesを始めセレクターの最適化などなかなかアグレッシブな機能がある。Node.jsパッケージだし、grunt-csscというGruntプラグインもあるので導入の敷居は極めて低い。 まだ実践投入はしてないけど、大体期待した通りに動いている。うちくらいの規模で1KB弱減った。--safeオプションを有効にするなら安定しているようでもあるので、 cssc: { main: { options: { lineBreaks: false, safe: true }, src: 'styles/style.css', // Uncompressed CSS compiled
【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 | DevelopersIO
アジェンダ styledoccoとは? 導入準備 Gruntの設定 CSSのコメント記述方法 動作確認 styledoccoとは？ Node.jsを使用して、CSSのスタイルガイドを作成してくれます。 導入準備 今回はNode.jsのパッケージを使用します。当ブログでも環境構築のご紹介していますので、以下を参考にNode.jsをインストールしてください。 【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる 今回の動作環境 OS:windows7 Gruntをインストールする。 今回styledoccoを自動化するに際に、Gruntにお世話になるので以下コマンドからGruntをインスールします。 npm install -g grunt npm install -g grunt-cli gruntで自動化し
プライベートフィールドに対するテスト | DevelopersIO
クラスメソッドの渡辺です。 弊社では業務時間内にブログを書くことが推奨されており、ネタも何でも良いということで、自動化やユニットテスト関連も投下していきます。今日は結構良く話題に出るプライベートフィールドに対するテストです。 オブジェクト指向プログラミングと可視性 オブジェクト指向プログラミングのひとつの特徴はカプセル化です。簡単に言えば、フィールド（情報）やメソッド（機能や操作）の公開範囲を可能な限り狭くすることで、安全にオブジェクトを扱うことができる、ということです。このため、古典的なJavaのコーディング標準では、次のように、「全てのフィールドをprivateに設定し、必要に応じてアクセサメソッドを定義すること」となっています。 public class Item { private String name; private int price; public String getN
【自動化】PageSpeed ModuleでWebサイトのパフォーマンスチューニング #1 インストール編 | DevelopersIO
パフォーマンスチューニングって手間ですよね。 そんな時にお金（サーバーのスペック）とちょっとしたスキルでぱぱっとパフォーマンスを改善できるのがPageSpeed Module（Mod Pagespeed）ってやつです。 対象者 この記事では黒い画面（コンソール）からsshでサーバーにアクセスし、LinuxコマンドやViを使った各種操作を行う必要があります。 自分もWebデザイナー上がりなのでWebデザイナーやコーダー、フロントエンジニアのような方にも黒い画面やサーバー側に興味を持ってもらい挑戦してもらえると仲間が増えて嬉しいな〜なんて思ってます。 PageSpeed Moduleって？ PageSpeed ModuleはWebサイトのロードタイムを高速化するためのツールです。 PageSpeed Moduleをサーバーにインストールし適切な設定を行うことでWebサイトをほとんど調整すること
フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」:phpspot開発日誌
Tipr, a small and simple jQuery tooltip plugin フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」 次のような、フラットデザインにもよくあうツールチップ実装に使えます 凝ったデザインのツールチップもいいですが、こういうシンプルなものもいいですね。 アニメーション速度などのカスタマイズが可能みたい 関連エントリ JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」 いろんな種類のツールチップを簡単実装できる「Opentip」 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」
コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」:phpspot開発日誌
imagefill.js | Project Page コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 HTMLの指定した位置に画像をフィルさせたい場合に使えます。 次のように、画像を特定サイズのブロックに適度に拡大させておさめられます。 それ用の画像を作る必要はもうなく、動的にフィットさせられるというのは便利でレスポンシブWEBデザインにも使えます 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 画像のカーソル位置を拡大できるjQueryプラグイン「mlens」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
Facebook アプリのようなリッチなメニュー一覧を表示するドロワーレイアウト (DrawerLayout)
フェイスブックを代表する、"iPhone スタイルのアプリケーション" では早くから左からスライドしてくるパネルに、 リッチなメニュー項目が表示されていました。 Android でもこれを模したアプリケーションを実装することは可能でしたが、やはり面倒なものです。 API レベル 18 のサポートライブラリではここで紹介する DrawerLayout (ドロワーレイアウト) なるものがサポートされ、 簡単に左側からスライドするメニューを実装できるようになりました。 最近の UI デザインガイドラインに "ドロワーナビゲーション" を利用すべき状況等の説明がありますので、確認しておくとよいでしょう。 ともあれ、最近 Google がリリースするアプリケーションではほぼ例外なくドロアーナビゲーションがサポートされているため、 これに慣れてきたユーザーも急速に増えてきていると予想されます。 例えば
ページがずれて立体的なメニューを作れるjQueryプラグイン「BoxLid」:phpspot開発日誌
Box Lid Menu by jimjh ページがずれて立体的なメニューを作れるjQueryプラグイン「BoxLid」。 次のようにページが傾いてメニューが現れるというシンプルながらカッコいいエフェクトが作れます。 対応ブラウザ（Safari等）で見てみて下さい。 こういう地味な3Dエフェクトは今後、どんどんサイトで使われるようになってきそうですね。 関連エントリ 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 WebGLを使った3Dマップ描画エンジン「Cesium」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」
[CSS]パラグラフやリストなどのテキストの下にできてしまう意図しない余白を解決する方法
p, ul, ol, dl などのテキストの下にできてしまう意図しない余白を解決するうまい方法をCSS-Tricksから紹介します。 下記は各ポイントを意訳したものです。 Spacing The Bottom of Modules 上記のコードはシンプルで、divをラッパーとして、見出しとパラグラフを配置しているだけです。 HTML <div class="module"> <h3>Module</h3> <p>Pellentesque habitant morbi tristique senectus...</p> </div> スタイルシートもシンプルです。 CSS html { background: #333; } .module { width: 20rem; padding: 1.5rem; margin: 1.5rem auto; background: white; } h
[Android Tips] SDK 内の Drawable リソースが一覧できる「Android Drawables」が便利！ | DevelopersIO
Android Drawables 「Android Drawables」は SDK 内の Drawable リソースが一覧できる Web ツールです。 社内で共有してもらい、とても便利だったのでご紹介したいと思います。 SDK 内の Drawable リソースが種類ごとに一覧できます 使いかたはシンプルです。Drawable の種類リストから見たい種類を選ぶだけです。 Drawable を一覧で見てみる ということでそれぞれの種類ごとに一覧してみました。 Buttons ボタンに使われている Drawable です。CheckBox や RadioButton なども含まれています。 Dialog ダイアログのアイコンに使われている Drawable です。 Emoticons (絵文字) いわゆる絵文字です。かわいいですね！ Menu メニューに使われている Drawable です。3
![[Android Tips] SDK 内の Drawable リソースが一覧できる「Android Drawables」が便利！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/3457a10e2096f0bdd87f97cdc7602f6664bd9950/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F04%2Fandroid_eyecatch.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
feb19
blinkをCSSアニメーションでやってみる - jsdo.it - Share JavaScript, HTML5 and CSS
Drag and Drop APIのテスト - jsdo.it - Share JavaScript, HTML5 and CSS