ときどきWEB | スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!（後編）
前回、前々回とスマホに対応したフリック式スライダーを自作してみよう！というエントリーを書かせていただきました。 スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!（前編） スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!（中編） 前編でタッチイベントの仕組みやスライダーコンテンツを自作してプロトタイプのフリックスライダーを作成。 中編ではプロトタイプを踏まえての新設計とＵＩ改善とカスタマイズ・・・と思ったのですが、制作過程の解説がムダに長くなってしまったのでプラスαのカスタマイズを今回に持ち越しとなりました。今回で完結です。 追加させたいカスタマイズ機能 前回新設計で作成したフリックスライダーがこちら これに前回の冒頭で追加させたい機能がこちら リアルタイムの画像取得を利用してサムネイルに視覚的にわかりやすいページネーション効果
指定した秒数ごとに画像がスライドするカルーセル | A Day in the Life
jQueryを使ったカルーセルプラグインはたくさんあるのであまり困る事は無いと思いますが、試しに自分で作ってみたので2回に分けてカルーセルの作り方を記事にします。 1回目は指定した秒数ごとに画像がスライドする無限ループのカルーセルを作ります。2回目は無限ループに加え、ボタンを画像分用意し、クリックするとボタンに対応した画像が表示されると言ったものに改造して行きます。（余裕があれば3回の記事にし、プラグイン化しようと思います。） プログラムの流れは下記のような流れに従って作ります。 画像の数や幅などの初期設定を行う。 画像が左にスライドするアニメーションを作る。 このアニメーションをメソッド化する。 指定した秒数でこのメソッドを実行させる。 まずデモで完成形をご覧ください。 View Demo それではコードを解説して行きます。 HTML HTMLは下記のようなソースコードになります。 HT
画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（3/4 ページ） カルーセル（画像スライドショー）プラグインを作ってみよう 複数の画像をスライドショーの要領で順番に表示させることをカルーセルと呼びます。JavaScriptによるリッチなインタラクションとしてはおなじみのUIですね。おなじみ過ぎて検索すると膨大な数のプラグインがヒットしますが、今回はそんなカルーセルを自分の手で作ってみたいと思います。 まずは大ざっぱな要件を決めます。 画像ファイルは1つずつ表示する 画像の切り替えは横方向のスライドアニメーションで行う カルーセルには“戻るボタン”と“進むボタン”があり、これらをクリックすることで 表示する画像を切り替えることができる 表示する画像は一定時間ごとに自動的に切り替わり、循環して表示される まずはHTMLから作ってい
You are being redirected...
Javascript is required. Please enable javascript before you are allowed to see this page.
忙しい人こそ知るべき「忙しい人と仕事ができる人の20の違い」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの代表の岩上です。ジムに行こうと思っても中々行けない日々を過ごしています。 ついつい時間が足りないと思ってしまうのですが、多分、タイムマネジメントとタスクマネジメントが上手く行っていないんでしょう・・・。寝坊してしまうし。時間管理は永久の課題です。 耳が痛いのですが、友人から教えて貰ったエントリーがとても印象的だったのでご紹介します。 ※各項目のタイトルは勝手ながら付けさせて頂きました。 『忙しい人』と『仕事ができる人』の20の違い 1. 評価基準 『忙しい人』は、「忙しい」と周りに言えば「カッコイイ、頑張っている」と他人が評価してくれると思っている。 『仕事ができる人』は、「忙しい」と周りにに言うことは「無能の証明」だと思っている。 2. スケジューリング 『忙しい人』は、終了時間への認識が甘い。（なんとなく終わったらいいな～的な） 『仕事ができる人』は、絶対にここまで
月間PV/UUどのくらい？好きなサイトの月間PV/UUを調べてみました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。代表の岩上です。LIGではコーポレートサイトをメディア化するべく色々と試行錯誤しながら、やれ今月はPVはどれくらいいきそうかなどメディア事業部をつついております。今回、ふと、自分自身が良く見ているサイトのPVやUUはどうなのだろうと調べてみたので、分かる範囲で共有します。 Tech Crunch Tech Crunch 海外、国内問わずベンチャーに特化したニュースサイト。ターゲットを絞った上で190万PVはスゴイですね。ターゲット層もIT関連企業で先進的なユーザと明確です。2006年のTechCrunch Japan立上げから僕もずっと見てます。 月間UU：80万 月間PV：190万 メディア資料[PDF] CNET Japan CNET Japan IT系の総合ニュースサイトです。1000万PV以上はさすが。ここ最近、IT系のブログメディアが増えてきてるので、過去から現状の経
MarkeZine（マーケジン）
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
「へぇー」と言ってしまうかもしれない、css3の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。 子供の出産予定日を過ぎているので、毎日お腹に応援歌を歌ってるADの野田です。 前回書かせていただきましたデザイナー募集の記事では、 一切笑いのない記事となり大変申し訳ございませんでした。 してやったりだったので、ドSな僕としてはちょっと快感でした。 今回、cssを使っていて私自身が「へぇー」となったものを記憶をたどってご紹介させていただきます。 常に、新しい技術等をチェックしているつもりですが、 日々の業務との葛藤で、つい情報を見逃してしまうこともございます。 そんな方は、今回の記事を見て「へぇー」っと、なっていただけると嬉しいです。 知らなくても恥ではないので、これを期に使ってみましょう。 なお、今回は単純に「こんなの出来るんだ」ということを知ってほしいだけなので、 対応のブラウザやバージョンは記載していません。 ご了承ください。 文字は透過せず、背景のみを透過する これは
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
日本の全エンジニアに捧ぐ！現在公開されているAPI一覧【2013年版】 | Find Job ! Startup
2013年のいま、API界隈が熱い！ 今年に入り、官公庁の統計データやNHKの番組情報など、今までなかなか利用できなかったデータがAPIとして扱えるようになってきました。このエントリでは現在公開されているAPIを一覧でまとめます。いま使えるAPIはこれだけ読めば大丈夫。2013年の最新マッシュアップ事情をあますとこなく網羅します！ HOT! API 総務省 次世代統計利用システム（国勢調査、人口推計、就業構造、企業統計、物価統計 etc.） NHK番組表（※未公開） 行政・自治体・公共サービス 郵便番号 郵便番号検索API（郵便番号 → 住所） 郵便専門ネット（郵便番号 → 住所、郵便番号の簡易存在チェック） ぽすたん（郵便番号 → 住所、住所 → 郵便番号） IW3 PROJECT（郵便番号 → 住所、住所 → 郵便番号） 宇宙 Google+ JAXA PR（※現在一部の学生に限定公開
jQueryで作るスライドするローテーションバナー
jQueryで作るスライドするローテーションバナー ちょっと前まではコーポレートサイトのトップページによくあるローテーションバナー（というかスライドショー？）はFlashで作るのが当たり前でしたが、最近ではjavascriptで作成しているものが増えてきましたね。 ということでjQueryを使用してシンプルなスライドタイプのローテーションバナーを作成します。 投稿日2010年09月15日 更新日2011年04月03日 html+cssの作成 bannerというidを付けたdivにリストでマークアップした表示する画像を入れます。 画像は全て同じサイズの方が良いでしょう。ここでは320×213の画像を4枚用意しました。 html <div id="banner"> <ul> <li><a href="img/01.jpg"><img src="img/01.jpg" width="320" h
jQuery Easing Plugin エフェクト一覧ページ
ほんのり解説 ＜script src="jquery-1.8.2.min.js"＞＜/script＞ ＜script src="jquery.easing.1.3.js"＞＜/script＞ ＜script＞ $(function(){ $(".button").toggle(function(){ $(".hoge").animate({ "marginLeft":"100px"},2000,"Easingの種類") },function(){ $(".hoge").animate({ "marginLeft":"0px"},2000,"Easingの種類"); }); }); ＜/script＞ headタグ内に「jquery本体」と「jquery.easing.js」を読み込むことで、"Easingの種類"の部分に記述したエフェクトを使用することが可能です。 （上記のコードは＜＞を半
jQueryのanimateで自由にアニメーションできるようになろう
jQueryのanimateで自由にアニメーションできるようになろう jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 投稿日2011年12月27日 更新日2011年12月27日 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryで背景画像をアニメーションで無限ループさせる
画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新方式のGoogleマップをホームページに設置する方法♪