jQueryで正規表現を学んでみる。【基礎編】
Posted: 2010.11.14 / Category: javascript / Tag: jQuery, 正規表現 正規表現といえばフォームチェックがぱっと思いつきますが、最近ではjQueryで外部APIで様々な情報を取得する機会が増え、それによって文字列の置き換えなどもできるようにならんとな、と思ったりしている人も増加しているはず！ ということでお手軽に使えるjQueryを使用して正規表現をちょこっと勉強してみようと思います。 文字列を置き換える基本の形 正規表現の前にjQueryで単純な文字列を取得して、置き換えて表示するということをしてみます。 html <p> 正規表現はjavascript以外のプログラムやテキストエディターなどの検索でも使えます。でもここではJavaScriptを使うんです。 </p> 例えばここにpタグでマークアップされた文字列があります。 「java
Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する
今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ！ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しないといけないってことが分かる。 今回はその方法を解説する。まずはjScrollというjQueryプラグインで無限スクロールを実装する方法を解説し、これをSEOに最適化させる方法へ続く。 プロジェクト作り jScrollのダウンロード まずはGithubからjScrollをダウンロードする。 pklauzinski/jscroll: jScroll Infinite Scrolling Plugin for jQuery 落としてきたファイル一式から『jquery.jscroll.min.js』を取り出し
背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
マテリアルデザインカラーを簡単に使えるLESS/CSS toolkit「Material Design Color Palette」:phpspot開発日誌
Material Design Color Palette by zavoloklom マテリアルデザインカラーを簡単に使えるLESS/CSS toolkit「Material Design Color Palette」 規則性のあるCSSクラス名を使って、マテリアルデザインのカラーを簡単に再現できます。 使う際は、色と色の強さをクラス名で指定すると次のように、赤一色をとってみても、50〜900の値の変更で変化を簡単につけられます 関連エントリ マテリアルデザインのスクロールトップに移動するボタンを実装できる「material-scrolltop」 WEB上でのマテリアルデザイン実装フレームワーク「Material Design Lite」 マテリアルデザインのPullして更新をWEB上で実現できるjQueryプラグイン マテリアルデザインのショーケースサイト「MaterialUp」
iOS7 のようなブラー効果を CSS でマネてみる (Webkitのみ) § ポリゴンバーガー
iOS7 いいですよね。いいなあ。まだ持ってないんだよなあ、初代 iPad だから。アップルストアのデモ機を触って「ウフフ…」って悦に入ることくらししかできません。 まあそれはいいとして、画面下からぐーって引っ張ってコントロールセンター表示させるアレって便利ですよね。便利な上に背景要素が擦りガラスの向こうにぼやけて見えるあの感じがとてもよいです。 なので、アレをなんとかブログとかに利用できないかしらとアグアグ考えておりましたら、結局同じものはできなかったんですが背景要素をボケさせてそのうえに透過要素を重ねることはできました。（ほんとうは透過要素のかかってる部分だけブラーがかかるようにしたかったのですが、どうにもわかりません。） jQuery と CSS3 を使う感じですがそんなに複雑なものではなく、案外用途がありそうでこれはいいぞということで公開してみました。 ブラーをかける際に徐々にボケ
JavaScript？CSS？PHP？鮮明な画像をWEB上でぼかす方法。
普通の画像をアップするだけで擦りガラスのようにボケた画像を表示させたかったのです。 別にボケた画像を作れば良いのですが、正直面倒臭いし、そんな方法で運用しようとすると絶対歪みが出ますよね。 「PhotoshopがないならGIMPを使えばいいじゃない」 なんてクライアントには言えません。 というわけで、WEB上でボケた画像を生成したり、表示をするための方法を調べてみました！ CSSでぼかす 真っ先に思い浮かんだのはコレです。 CSSフィルタを使ってボカす方法です。 サンプル コード cssに以下を記述。 img.blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } どうですか？ボケてますか？ フチまでボ
どれが本命？CSSやJQueryでぼかしのエフェクトをかける方法を一通り試してみた | sounansa.net
どれが本命？CSSやJQueryでぼかしのエフェクトをかける方法を一通り試してみた 最終更新日: 2017/03/28 最近のデザインの流行から、写真をぼかしてキービジュアル画像の背景などに使う機会が増えてます。 どんなにヘボイ写真でも、かっこいいデザインに仕上がったりするからと、とりあえずぼかしておけと言われることも多いのでは。 高解像度の写真を買わなくても済むので安上がりですしね。 ぼかした写真をデザインに取り入れるとき、普通は写真をPhotoshopでぼかして、画像そのものを加工する手法が多いとは思います。でも、今回どうしても写真は加工しないで、WEBページ内でblur（ぼかし）のエフェクトをかけることが必須という大人の事情がありましたので、仕方なくいろいろ調べてみました。 やりたいことはこんな感じです。 blurをかけると、どんな方法でやる場合にも画像のふち（境界線）は、ぼやけ
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
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
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
[jQuery] ユーザエージェント(userAgent)判別プラグイン
ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。 パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレビ・ガラケーのブラウザも判別対象としています。 直接見る Syntax $(document.body).checkAgent( [{option}] ); 対象にしたHTML要素にプラグインが得た情報に基づいたクラスを付与します。 Option 全てtrueまたはfalseで指定。trueにしたものをクラスに追加します。 type パソコン：pc、スマホ：smartphone、ガラケー：garapagos、テレビ：nettv デフォルトは true os PC(win, mac) ガラケー(au, docomo, softbank) スマホ(apple, android) ゲーム(wii
![[jQuery] ユーザエージェント(userAgent)判別プラグイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://smoothstate.com/index.html
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://cosao.net/archives/5524
JavaScript + Ajax 実践サンプル集 - ホーム
http://retinajs.com/