ブックマーク / hyper-text.org (3)

  • Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH

    フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら? という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか?」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー (主に HTMLCSS を書くフロントエンドな人) さん向けに、初めて

    Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
    lotus_tribal
    lotus_tribal 2014/06/10
    すごい丁寧な説明で、知りたいことぜんぶ書かれてた。ありがとうございます。
  • CSS と jQuery で作るスクロールにあわせて回転するロゴ

    Tumblr のスタッフ Blog を見てたら、ロゴ (正確にはロゴの周囲の部分) がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し

    CSS と jQuery で作るスクロールにあわせて回転するロゴ
    lotus_tribal
    lotus_tribal 2013/07/23
    これかわいいやってみたい! // CSS と jQuery で作るスクロールにあわせて回転するロゴ | WWW WATCH
  • IE11 でユーザエージェント文字列から 「MSIE」 が消えた件

    IE11 になって機能追加やレンダリングエンジン周りの進化もかなりありましたが、それとあわせてユーザエージェント文字列が大幅に変更されました。 先月末に Windows 8.1 のプレビュー版が公開され、早速手持ちの MacBook Pro に入れてみたっていう話は先日書いたとおりですが、Internet Explorer 11 (IE11) については細かく触れなかったのでまとめておこうと思います。 IE11 になって機能追加やレンダリングエンジン周りの進化もかなりありましたが、それとあわせてユーザエージェント文字列が大幅に変更された結果、従来のブラウザ判別コードで検出できなくなる可能性もあったりします。その辺について Nicholas C. Zakas 氏が Blog 記事を上げていたので紹介しつつ触れてみたいと思います。 とりあえず、IE11 の概要とか 公式情報として、IEBlog

    IE11 でユーザエージェント文字列から 「MSIE」 が消えた件
    lotus_tribal
    lotus_tribal 2013/07/05
    IE11 でユーザエージェント文字列から 「MSIE」 が消えた件 | WWW WATCH :
  • 1