どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう まず画像が必要ですね。今回はこのような画像を用意いたしました。 1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝ HTML マークアップはこんな感じで、sectionの中のspriteを動かします( ˘ω˘)☝ <section class="section css"> <h2>CSS</h2> <div class="sprite"></div> </section> 準備はこれで以上になります( ˘ω˘)☝ 実装をしよう お次にそれぞれの実装方法をご紹介します( ˘ω˘) CSS3を使用した形での実装方法 CSS3ではanimationを使用します。

先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。 デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。 そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ベースとなるカラーを設定したい 1． 原色大辞典 https://www.colordic.org/ いつも参考に

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ ここ最近新しいゲームにピンと来ず、PS3のアーカイブスからFF8をDLしてプレイしております。スコール尊いです( ˘ω˘)✌ どうでもいいですね✌(´ʘ‿ʘ｀)✌ 今回はjQueryメソッドanimateとjQuery.Deferredを駆使して、動きのある「トップへ戻る」ボタンを作ってみました。 こちらの実装方法をご紹介します( ˘ω˘)☝ HTMLとCSSの準備 HTML HTMLはこんな感じでございます。通常の状態の#buttonと、変化させた時に表示させる#button_linkを用意しました( ˘ω˘)☝ <footer id="footer"> <a href="#wrapper" id="page_link"> <span id="button"><i></i></span> <span id="button_c

こんにちは、フロントエンジニアのおじいちゃんです。 今回は、任意で入力した場所から指定された場所までのルートをGoogleマップに描画する方法を紹介したいと思います。 Googleマップ描画 サンプルとして、任意に入力した場所からLIGまでの、徒歩でのルートを描画することにしたいと思います。 まずは通常のGoogleマップを設置します。 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js/sensor=TRUE"></script> <div id="map_canvas" style="width: 800px; height: 600px;"></div> <div class="searchBox"> <form> <input id="mapSearch" type="text"> <

こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素

こんにちは。エンジニアののびすけです。最近周囲で結婚ラッシュがきており、漠然と焦っています。 さて、私は業務上Node.jsを触ることがあるのですが、今日はnode-webkitで少し違ったNode.jsの活用法をお伝えしていきたいと思います。 node-webkitとは 「node-webkit」はNode.jsとChromiumを利用してネイティブアプリを作ることができる、ランタイム/開発フレームワークです。 ダウンロードは下記よりおこなうことができます。 rogerwang/node-webkit – GitHub https://github.com/rogerwang/node-webkit HTML/CSS/JavaScriptでアプリを作ることができる HTML/CSS/JavaScriptと聞くと、Webブラウザ上で動作するWebアプリケーションをイメージしますが、node

こんにちは！　LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！　これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝

はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。 このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。 さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。 Animate.cssとは？ Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。 使用方法 まずはこちらからダウンロードしてください。 ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。 animate.css　→　_animate.scss ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延さ

こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="

こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo

こんにちは、エンジニアののびすけです。 さて、いきなりですが皆さんは「Swift」やってますか？ iOS開発やSwiftについて僕は超絶初心者だったのですが、最近の流れに乗っかり挑戦し、ついでに勉強会まで開催してみました。 そこで今回は、僕と同じくSwift初心者という方たちに向け、Swiftの概要と勉強会の内容について書かせていただきたいと思います。 Swiftとは Swift Blog – Apple Developer https://developer.apple.com/swift/blog/ かなり話題になったのでご存じの方も多いと思いますが、Apple社が今年6月に発表したiOSアプリやMacアプリ向けの新言語です。 これまではiOSアプリやMacアプリを作るときはObjective-Cで作るのが主流でしたが、Swiftが発表されて以降はこちらへ移行する流れになりつつあります

こんにちは！　LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた

こんにちは、LIGブログ編集長の朽木（@amanojerk）です。 さて、これからみなさんに、下記のそれぞれの文章を見比べていただきたいのですが、 A. ヒャッハー！汚物は消毒だ〜 B. ヒャッハー！　汚物は消毒だ〜 A. 何してますか？忙しいですか？手伝ってもらってもいいですか？ B. 何してますか？　忙しいですか？　手伝ってもらってもいいですか？ どちらがしっくりくる、あるいは、どちらに違和感がある、と思ったでしょうか。 A.とB.の文章の違いは、文末の「感嘆符（！）」「疑問符（？）」の後に全角空白（スペース）があるかないかです。 ほとんどの人はあまり注意して見てはいないと思うのですが、じつはこの表記ルールはメディアによってさまざまです。絶対に全角スペースを空けているメディアもあれば、そうでないメディアもあります。 では、一体どちらが正式なのでしょうか。そもそも、明確な基準はあるのでし

こんにちは、最近あだ名が増えるばかりのおじいちゃんと申します。 今回はブラウザ対応で便利な「modernizr.js」を紹介します。 modernizr.jsとは modernizr.jsはJavaScriptのライブラリです。 閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。 それらを利用して、ブラウザごとの処理を記載することが可能となります。ということで、さっそく使ってみましょう。 ダウンロード 下記よりダウンロードが可能です。 Modernizr http://modernizr.com/ modernizr.jsをダウンロードしようとするとチェックボックスが並んでいるページが表示されます。これらの項目はmodernizr.jsを使用

みなさんはじめまして。ディレクターのモトキです。幹と書きまして本名です。 最近カナダから帰ってきたのですが、日本はほんとにご飯が美味しくて、女性が可愛いなーとしみじみ思ってます。よろしくお願いします！ さて、つい先日新しいiMacとMac miniが発売されましたね。新型MacBook Air登場の噂もありますし、新しくMacユーザになるという方も増えていくのではないでしょうか。僕もLIGでMacBook Airが支給されたのですが、この機会にアプリについてあらためて見直してみました。 というわけで今回は、新しくMacユーザになった方、これからもっとMacで作業効率を上げていきたいという方へ向け、超絶便利なMac初心者向けアプリを紹介していきたいと思います！ （Windowsユーザーの方も使えるものが多数あるのでぜひご覧ください。） 作業が捗るおすすめMacアプリ10選 1. Everno

こんにちはデザイナーの藤田です。 テレビなどを見ていて、一時期あまり見かけなかったのに「おや、最近また○○をよく見かけるな。あらためて見るとやっぱりいいな。」なんて思った経験、皆さんもありませんか。 というわけで今回は「おや、最近スプラッシュページを設けたWebサイトよく見かけるな」と感じたので、スプラッシュページ・スクリーンを設けたWebサイトをまとめてみました。 1. TWLVR http://twlvr.com/ フランスの動画・Web制作会社のサイトです。 ローディング完了後、女性の後ろ姿をリピート再生しております。 振り向きそうで振り向かないのが残念ですが、スプラッシュページからスクロールをおこなった後の演出が素敵です。 2. Failsworth 1903 http://www.failsworth1903.com/ イギリスの帽子メーカのサイトです。 国内サイトではあまり見か

こんにちは。ディレクターのエリカです。 突然ですが、Webサイトが完成するのはいつだと思いますか？ サーバ上ですべての機能が動き出したとき？ サイトを公開しプレスリリースを出したとき？ トラフィックが増えてPVが目標値に達したとき？ このように改めて考えてみると、Webサイトには完成がないということに気づきます。 だからこそ、ユーザに公開され長い長い運用フェーズがはじまると、気になってくるのがサーバなどのネットワークトラブルです。ネットワークトラブルが原因で、せっかくのPVやCVを逃したくはないですが、素人にはなかなか難しいのも事実。 「よくわからないから、ネットワークやサーバのことは全部専門の会社に任せきり」というWeb担当者も多数いらっしゃると思いますが、そこでおすすめしたいのが、「Uptime Robot」というネットワーク監視ツールです。 とても便利でしたので、今回はその詳細を解説

こんにちは、LIGブログ編集部です。 LIGブログを読んでくれている皆さんの中には、自身でもブログを書いているという方も多いと思います。 しかし、HTMLタグを自分で入力しながら書いている、タグの意味を理解しながら使っている、という人は少ないかもしれません。 最近では、HTMLタグが全くわからなくても、同じような書式の効果が手軽に反映できるブログサービスもたくさんあります。 でも、そのような設定でブログを書こうとすると、改行のときにフォントが崩れたり、勝手に斜字になったり、思わぬストレスになることもありますよね。 実はこれ、HTMLを書式に自動で反映する仕組みにも限界があり、全てを正確に反映できるわけではないことが原因です。 それを修正したり、根本的に防止するためには、HTMLの知識が必要になります。また、せっかくブログを書くからには、しっかりとHTMLタグの意味を理解し、入力していきたい

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ だんだんと秋の気配が近づいて過ごしやすくなりましたね。 なんだかゴロゴロしたくなってきます<( ˘ω˘ ┌┛)┌┛ ってなわけで今回は、要素を立体的にゴロンゴロン動かせるプラグイン TURNBOX.jsをご紹介しますc⌒っ´ʘ‿ʘ｀)っ それでは実装方法を解説していきます( ˘ω˘)☝ はじめに jQueryを呼び出す記述の後にturnBox.jsを読み込みます。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/turnBox.js"></script> HTML divの中に表示させたい面の数の子要素を配置しましょう( ˘ω˘)

こんにちは！　観光体験のWebサービスTRIPの運営をしている、まさしです。 TRIPはLIGの新規事業として４月にローンチしたWebサービスなのですが、今振り返ってみると、ローンチ前後にはもっといろいろなことに注意しておくべきだったと思うことばかりです。 そこで本日は、新規事業やスタートアップの立ち上げを検討している方へ向け、ボクが個人的にローンチ前に絶対やっておくべきだったなと感じた10のことについて紹介をしていきたいと思います。 ▼目次 誰も検証していないものをリリースしちゃダメ 営業と広報は早い段階からやったほうがいい 事業を軌道に乗せるまでの計画を立てろ 利用する外部サービスの仕様は深く理解すべし 意見はぶつけあえ！立ち上げチームに序列はいらない 顧客に張り付いて行動を観察せよ 思いつく限りの資料は全部用意しておけ プレゼンは何回した？人前で話し慣れておくべし 1人で戦うな！外に