最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス

今時のトレンドがうまく取り入れられ、高品質にデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。 レスポンシブ時のレイアウトの変化、気持ちいい繊細なアニメーションなど勉強にもなりますね。

毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル

こんにちは！ Web心理マーケターの鈴木 公（@KouShinri）です！ Googleアナリティクスは便利ですよね！ 検索エンジンやSNS、広告からの流入数もわかるし、目標達成度や行動フローも分析できる！　だから、サイトの状況や価値を知るためにも重宝したい分析ツールですよね。あなたもきっと使っていることでしょう！ でも、Googleアナリティクスは複雑すぎる。どこをどう見ればいいのかもわからない。使い慣れていない時期なら、なおさら「？？？」がいっぱいになりますよね！ そんなGoogleアナリティクスを使い慣れていない方や、初心者の方のためにも……。Googleアナリティクスでは、レポートの「テンプレート」を取り入れ、簡単に分析結果を見れるようにする方法があるのです。 それが今回メインの「ソリューションギャラリー」！ この「ソリューションギャラリー」とは、他の人が見やすいように設定した独自

gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正（shinnn様にご指摘いただきました。感謝！m(_ _)m） 今は使わない方が良いプラグインリスト - gulpjs/plugins - github ↑要チェック。この記事には未反映 Webサーバー、ユーティリティ browser-sync Webサーバー/ライブリロード gulp-webserver Webサーバー/ライブリロード ※browser-syncに乗り換えた gulp-conn

設定ファイルの内容を定義 整形方法 こちらのジェネレーターでファイルの整形方法を定義できます。 (例)カラーコードの表記方法(小文字 or 大文字) #aaa or #AAA これにはジェネレーターはないので、自分で定義することになります。以下を参考にしました。 ・記述順序の参考 https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json https://github.com/csscomb/csscomb.js/blob/master/config/zen.json .csscomb.jsonを作成 gulpfile.jsと同じ階層、もしくはプロジェクトのルートフォルダに「

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。 今回は、細かい便利な機能をgulpに乗せてみましょう。 今までの記事はこちら gulp入門その１―とりあえず動かすところまで gulp入門その２―ファイルの監視をしてみる もくじ 同期処理をする ローカルサーバを立ててライブリロードする CSSのminifyしたりプロパティを並び替えたりする package.jsonでモジュールを管理する まとめ ※今回は手順にプラグインのインストールを含めません。 インストール方法は前回・前々回の記事を参照にしてください。 同期処理をする 初回からさんざん書く書く言っていた同期処理です。 そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。 そこでru

2015-05-02 gulpで幸せにマークアップする 最近コーディングがっらぃので幸せになるためgulpを使ってます。ので設定とかを自分へのメモ代わりに残す。ググって適当にやってるからより良い方法あったら教えてほしいです。 gulpとは 一言で言えばフロントエンド開発で使えるタスクランナー。画像圧縮とかsassのコンパイルとかしてくれる。昔はこういうことするときはGruntだったり、GUIツールのCodekitとかが主流だったみたいだけど、最近はみんなこれつかってるぽい。以下を参考にしました。（ただちょっと古い）2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編）lab.sonicmoov.com 導入方法 事前にすること gulpはnode.jsでできてるのでnodeいれて、 sudo npm install gulp -gでグローバル環境にgulpをイン

CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー

作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １