スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript（jQuery） : 森のコーディング
12月10 スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript（jQuery） カテゴリ:jQueryiphone/ipadサイト Tweet クライアントのサイトでは、大抵の場合、ヘッダーやフッターなどに電話番号画像がついたりします。 そして、こんな要望がでます 「スマホで見た時は電話番号をタップしたら電話がかかるようにしてよ」 これを実装はjqueryが便利です。 まずソースはこんな風になってるとします。 <header> <img src="img/tel.png" alt="0120111111" class="tel"> </header> jqueryから処理するためにclass="tel"をつけときます。 js側はこんな感じ。 $(".tel").wrap('<a href="tel:0120111111"></a>'); .wrapとい
クリックやタップで開閉するアコーディオンメニューを設置する方法 | TechMemo
jQueryを使って、アコーディオンメニューを設置する方法を紹介いたします。 アコーディオンメニューというのは、クリックやタップ(スマートフォン)でアコーディオンのように開閉するメニューのことです。 これだけ聞いてもわかりにくいと思うので、簡単なデモページを用意しました。こちらで動きをチェックしてみていただければと思います。 デモページを見る このデモページに設置したアコーディオンメニューをもとに解説していきます。 ステップ1. メニューリストのマークアップ まずは、HTMLで入れ子のリストを作成します。 <ul class="acordion"> <li><span class="trigger none-submenu">メニュー1</span> <ul class="submenu"> <li><a href="">サブメニュー1</a></li> <li><a href="">サブ
j-carousellite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB, yet very flexible and customizable to fit most of our needs. As if that wasn't enough, the best part is yet to come... You don't need any special CSS file or class name to get
2013年下半期に紹介したjQueryプラグイン68選まとめ – bl6.jp
今年も残すところあとわずかとなりました。今年もたくさんのjQueryプラグインを紹介してきたので復習もかねてまとめてみました。前回は2013年上半期をまとめたので、今回は2013年下半期に紹介したjQueryプラグインのまとめです。全部で68のプラグインがありました。上半期の50に対し下半期68なので、両方合わせると118になります。それでは、以下どうぞ。 [ads_center] スライダー、カルーセル系 Excolo Slider タッチやマウススライドにも対応しているjQueryスライダーです。 タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」 Owl Carousel タッチ操作やレスポンシブにも対応しているカルーセルです。 タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carousel」 Coin S
ぱんにゃっとTutorial │jQuery,Wordpress
人気記事ランキング div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」 105.2k件のビュー 高機能過ぎるjQueryスライドショー「Camera slideshow」 74.5k件のビュー ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」 70.4k件のビュー シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」 67.4k件のビュー ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」 41k件のビュー クリックすると横からメニューが現れるjQueryプラグイン『Sidr』 40.4k件のビュー レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」 38.7k件のビ
Youtubeとかの色々なiframeをレスポンシブ対応する対策 - MEMOGRAPHIX
レスポンシブデザイン、iframeと相性悪くて、普通に作るとスマホでyoutubeはみ出るみたいになる。そこで、よく使うiframeのレスポンシブ対策をまとめた。 Facebook Like Boxまずfb-like-boxをdivで囲う <div class="likebox-container"> <div class="fb-like-box"></div> </div> 次に下記のスタイルを書く。と幅可変になる div.likebox-container .fbcomments, div.likebox-container .fb_iframe_widget, div.likebox-container .fb_iframe_widget[style], div.likebox-container .fb_iframe_widget iframe[style], div.likeb
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！ | バンクーバーのうぇぶ屋
ちょっと遅くなりましたが皆様あけましておめでとうございます！ さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ？もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの？ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います！ ぶっちゃけお客さんに出す内容でも、
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
汎用性の高い、jQueryの定番系プラグインのまとめ
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
Pronto - Free Masonry Gallery WordPress Theme
Pronto is a very clean and minimal jQuery Masonry WordPress theme that’s perfect for showcasing your posts in a grid like fashion, that will re-adjust depending on your visitors browser size. Everything is set to work right out of the box, simply install, add your posts and you are set. The theme includes a custom logo upload field, options to disable various functions of the theme, support for th
Twitter Bootstrap 2.0でjQuery Masonryを使ってレンガ状に画像を並べる方法
jQuery Masonryはレンガ状にFloatしたbox要素を敷き詰めてくれるjQueryのプラグインです テキスト要素だけだと読み込むだけで勝手にレンガ状になったのですが画像が含まれているとうまく行きませんでした サイトをよく見たら書いてあったんですが、解決に時間がかかったのでメモを残しておきます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Sites: Sign-in
cmmntr.com
Blogger