jQueryでTwitterの公式ウィジェットをカスタマイズする
Posted: 2013.02.08 / Category: javascript / Tag: jQuery, Twitter 以前のTwitterウィジェットは色とか色々とカスタマイズできたのですが、新しくなってほぼそのまま使うしかなくなってしまいました。 そこでjQueryを使用してカスタマイズしてみようと思います。今後、Twitterの仕様変更によって使えなくなる可能性もありますがご了承ください。 タイムラインを表示するウィジェットの設置 タイムラインを表示したいときはこんな感じに設置しますね。 html <a class="twitter-timeline" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxx" lang="JA" width="600">@xxxxxxxxxxxxx
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
ロールオーバーするイメージマップをjQueryで実装する - 無料のフォームプログラムならCGIラボ
詳細 カテゴリ: JavaScript 最近ではあまり使うことがなくなったイメージマップ（クリッカブルマップ）ですが、地図などのナビゲーションを表現する際にFlashを使用せずに実装できるので便利だったりもします。 でも、Dreamweaverの多角形スポットツールでそのまま作成したイメージマップでは、マウスカーソルを当てた際に変化がない為、クリックする領域が分かりにくくなります。 jQueryを使用すると簡単に画像を切り替える機能を実装することができます。 また、テキストリンクのナビゲーションを併用することによって、検索エンジンのロボットが適切なアンカーテキストからリンク先のページを巡回してくれるので、インデックスにもれがないようにできます。 最初に地図の画像をIllustrator等を使って作成・準備します。 それぞれのフォーマットはPNG画像となっており、地図全体を表すkantou
Webデザイナーのための jQuery入門 サンプルコード
サンプルファイルのご利用の前に サンプルファイルについて、一般的な環境においては特に問題のないことを確認しておりますが、万一障害が発生し、その結果いかなる損害が生じたとしても、技術評論社および著者はなんら責任を負うものではありません。また生じた損害に対する一切の保証をいたしかねます。必ずご自身の判断と責任においてご利用ください。 また、サンプルファイルは、写真、イラスト等の画像ファイルを除き、商用利用、再配布が可能です。 それぞれのファイルは、著作権法上の保護を受けています。 jQueryファイル（jquery-1.6.4.min.js）はMIT/GPLのデュアルライセンスにて配布されています。 Chapter5のColorboxはMITライセンスにて配布されています（書籍の264ページ参照）。 ダウンロードしていただくファイルは、ZIP形式の圧縮ファイルです（約3MB）。解凍してお使いく
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
ページ内ナビをコンテンツの位置によってカレント表示させる
パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。 参考にしたサイト 作ってみたと言いつつ、大部分が参考サイト通りなので先にご紹介いたします。 jQueryで長いページの区切り（セクション）ごとに背景を変化させる | webOpixel jQueryを使った長い縦スクロールページの現在地による制御 | 2GRAVITY カレント表示でaタグはそのまま とりあえずカレント表示されればOKのタイプ。カレントの箇所もクリックできます。 サンプルページ HTMLの抜粋は以下 <ul id="nav"> <li><a href="#section01">menu<a></li> <li><a href="#se
福岡の地域医療と介護を支える病院 | 桜十字福岡病院
患者さまや入居者さまに安心した入院生活を送っていただけるように、スタッフの質の向上を目的として、教育プログラム資格や、取得支援制度、キャリアパスの充実を図っています。 桜十字福岡病院のケアプランセンター、訪問看護ステーション、介護老人保健施設レ・ハビリス桜十字デイケアセンターと、地域の薬院内科循環器クリニック、大賀薬局西鉄福岡店がチームを組んで、福岡市主催の「ふくおか元気向上チャレンジ」に挑戦。見事、金賞を受賞しました。
たったの10秒でできる！jQueryで実装する「ページトップへ戻るボタン」 - Kowappa
ページをスクロールするとフワッとフェードインする「ページトップへ戻るボタン」をたったの10秒で実装してしまいます。 今回ご紹介するものは、スクロールするとフワッとフェードインしてボタンが出てきて、ボタンを押すとスルスルッとページトップに戻るものです。とても10秒クオリティーとは思えないものなのでご安心を。 HTML <a id="pageTop" href="#contents">ページトップへ</a> CSS #pageTop{ background:#DDD; border-radius:5px; color:#FFF; padding:20px; position:fixed; bottom:20px; right:20px; } #pageTop:hover{ background:#EEE; } JavaScript <script type="text/javascript">
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | Digital experience University
2013年 05月 09日 【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 Yoshiaki Sato はじめまして、フロントエンド担当のヨシアキです。 この記事では、JavaScriptで作るFlashのようなタイムラインアニメーションについて、編集や管理の手間が省けるような作り方を説明していきます。 初心者向けに解説していますので、ぜひこの記事を参考にしてご自分のタイムラインアニメーションを作ってみて下さい！ 目次 はじめに - 増え続けるJavaScript製アニメーション 下準備 - HTMLとCSS JavaScriptアニメーションの作成！ まとめ このアニメーションのサンプルを見る はじめに - 増え続けるJavaScript製アニメーション iOSなどで表示ができないFlashの代替手段としてJavaScriptで
【jQuery】JSで共通ナビの現在地をアクティブにする ｜ Tips Note by TAM
グローバルナビを共通ファイル化するとき、PHPやCMSで管理して 現在地判定もそこで設定することが多いのですが、 今回は現在地の判定をJavaScriptで実装してほしいという要望があり、調べてみました。 カテゴリ1 カテゴリ2今ここ カテゴリ3 カテゴリ4 「jquery 現在地」で検索したら、すぐ使えそうなものがいっぱい出てきました。。 やり方はいくつかあり、 ・bodyタグに、該当するディレクトリをIDで指定しておき、マッチする要素にクラスを追加 ・liやa要素にIDをつけておき、現在のURLとIDがマッチしたらクラスを追加 ・現在のURLとナビのリンクURLがマッチしたらクラスを追加 etc. ページごとにIDやクラス指定を追加するのは手間なので、他サイトでもすぐ使いまわせそうな 「現在のURLとナビのリンクURLがマッチしたらクラスを追加する」パターンを紹介します。 こちらは参考
【jQuery】IE8以下で透過PNGのopacityアニメーションが黒く汚れるのを回避する | バシャログ。
そうめんと水出しのお茶があれば生きていける気がしてきたhakoishiです。 さて、今回はjQueryで透過PNGのopacityアニメーションがバグるのを回避する方法です。 透過画像をアニメーションさせた時、IE8以下でフチが黒くなって困った経験をお持ちの方、いらっしゃるのではないでしょうか？ 発現条件 発現する条件は、この4点です。 画像は透過png。 画像自体にopacityアニメーションを設定している。 画像にフィルター（AlphaImageLoader）をかけている。 ブラウザはIE8以下。 回避するためのポイント 回避するためのポイントはこの2点。 画像にフィルター(AlphaImageLoader)をかける。 アニメーションの対象を、その画像を包括する要素にする。 移動やサイズ変更もしたい場合、包括要素も画像と同じサイズにしておくと扱い易いと思います。 サンプルを作りましたの
[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト
URLエンコードとデコードが行えるフォームです。 URLエンコード、またはデコードのフォームに文字列を入力し、変換用のボタンをクリックしてください。 マルチバイト文字だけをエンコードしたい場合は「URLエンコード（URL作成用）」をご利用ください。
JSでAndroid携帯、iPhoneなどを判別する方法 - THE FACTORY
スマートフォンページと、PCページをつくったはいいけど、 それぞれの専用ページにはそれぞれ適した端末からアクセスして欲しい。 そんな時はJavascriptでUserAgent判定して、以下のように記載します。 以下、PCサイトにスマートフォンからアクセスしてきた場合SPページに飛ばす処理。 <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://chibinowa.net/notebook/js/smoothscroll.html
http://wdr.watanabehiroki.net/2013/02/15/jquery-menu/
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
25egg -Webデザイナーのポートフォリオサイト-
今度こそ始めるjQuery超入門
W3 Watch Reference
Border