タグ

ブックマーク / kojika17.com (3)

  • LiveReload から BrowserSync に乗り換えてる

    LiveReload から BrowserSync に乗り換えてる 2014-06-24 この記事を書いて放置していたら、GoogleからWebアプリケーション開発用テンプレートのWeb Starter Kitに、BrowserSyncが利用されていました。 まだまだ把握しきれていませんが、需要がありそうなので、どんなことができるか簡単な導入方法を紹介します。 BrowserSyncの利点 BrowserSyncは、その名の通り「ブラウザを同期」してくれます。 LiveReloadのように、HTMLファイルなどを編集、保存するとブラウザをリアルタイムに更新を行い、さらにGoogle Chromeで行ったブラウザの「操作」が、Firefoxなどの他のブラウザにも、リアルタイムに反映されます。 BrowserSyncを利用すると、開発から確認までが、スムーズに行えます。 BrowserSync

    LiveReload から BrowserSync に乗り換えてる
    kazuph1986
    kazuph1986 2015/11/29
    そういえばこれ使ってみたけど、断然こっちって感じだった。
  • Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門

    Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSJavaScriptのminify、gzipCSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは? Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ

    Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
    kazuph1986
    kazuph1986 2013/05/12
    良いチュートリアル。
  • CSS: marginの正しい理解 - kojika17

    toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基的な内容ですが、読んで頂ければ幸

    CSS: marginの正しい理解 - kojika17
    kazuph1986
    kazuph1986 2012/08/28
    すごい。この人のブログ他の記事も解説多いしデモも多くてわかりやすい。
  • 1