前にgruntの使い方を書きましたが、それからいろいろ試してみて自分なりのタスクを作成しました。 まだあまり使い倒してないのでまだまだ変更するところがあると思いますが、これを元に変えていきます。 2種類用意しました がっつり機能を使いたい時もあれば、ちょこっとだけ使えればいいかなっていうことが個人的にあったので2種類用意してみました。 制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする 制作フォルダにはscssファイルのみ置き、HTMLやJSは確認・納品フォルダにのみ置いておく 1.がっつりタイプ こちらは先程も書いたように、「制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする」ということをやります。 使用gruntプラグイン grunt-contrib-watch grunt-contrib-

前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。 スライドのパターン よく使う配布されているスライダーを見ると画像の動き方が何種類かありますよね。なので、今回は6種類作ってみました。 サンプルページ サンプルページは以下から。全種類並べています。また、ダウンロードも出来ます。 サンプルページ ダウンロード 設置方法 HTML 設置したい箇所に以下のように記述します。 <div id="slide01"> <ul> <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li> <li><a href="#"><img src="img/img02.gif" width="700" height="

JavaScriptやCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になってずいぶん立ちますが今更ながら入れてみましたのでその方法です。 前にGruntの話題で盛り上がった時に試してみたのですがどうしても動かず原因もわからずで止まっていたのですが、情報も増えてきたので再チャレンジでした。 結果的に原因もわかったのでGruntの入れ方と基本的な使い方を書いておこうと思います。 node.jsのインストール Gruntを使うためにはnode.jsが必要になりますので、以下のサイトからnode.jsをダウンロードします。 node.js ダウンロードしたものを実行します。 これでnode.jsがインストールできたはずです。 コマンドを起動 次にコマンドを起動します。「管理者として実行」をクリックします。 まずはnode.jsが入ったか確認してみましょう。以下の

今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();（角度の変更） #img01 img { animation: animat

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま

最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー

スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。 なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。 慣性スクロール 横スクロール（ナビゲーション付き） iOS見たいなスクロールバーと慣性スクロールができるプラグインNiceScroll スクロールに遅れてついてくるコンテンツ 途中からスクロールについてくる 慣性スクロール こちらは以下のサイトに実装方法が書いてありましたので、そちらをそのままご紹介です。 jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる | webOpixel 参考JSソース <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqu

スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ

デモ 手元にあったFirefoxとChromeで表示の確認をしています。 東京の地下鉄の路線図を描いてみた 結構ごっちゃごちゃになってしまいました。それだけ入り組んでるという事で・・・駅はそれぞれWikipediaの各駅にリンクしています。 紹介サイト こちらのサイトで詳しく紹介されています。 canvasを使って地下鉄の路線図のようなグラフィックを描けるjQueryプラグイン・Subway Map Visualization 配布サイト JavaScript自体は以下のページからダウンロードできます。 Subway Map Visualization jQuery Plugin

flashを使ったサイトをチェックをしていた時に、表示されない時がありました。 そこで検索してみたところ、情報がいろいろあったので主な原因をまとめてみました。 swfobject2.2とFirefox3.5の相性が悪い flashを貼付ける時に使う、「swfobject2.2」と「Firefox3.5」の相性が悪いとのことです。 簡単な解決法はswfobjectのバージョンを2.1にすることです。 Issue 327 – swfobject – swfobject 2.2 fails… SWFObject v2.1 アドオンのPearl Crescent Page Saver Basic2.5を削除する サイトのキャプチャを撮ってくれるアドオンの「Pearl Crescent Page Saver Basic」。 こちらのアドオン（バージョン2.5）が入っていると表示されない事があるそうで