jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法｜BLACKFLAG
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験｜BLACKFLAG
最近ではWebサイトを構築する際にレスポンシブ対応として、PCでの表示のみならずスマートフォンやタブレットでの表示を考慮して構成する必要があります。 レスポンシブ対応でレイアウトに関してはCSSのMediaQueriesを使ったりすることで、ウィンドウサイズによって画面上のレイアウトを調整させたりすることが可能ですが、大きな画像を使用する画面デザインなどの場合ではスマートフォンで表示する際のレンダリング負荷が問題になったりします。 そんな際に使えるようにMediaQueriesと同様の方法で、ウィンドウサイズによって読み込む画像を切り替える動作をjQueryを使って実験的に作ってみたので紹介してみます。 【2016/05/22】 ウィンドウサイズを取得して画像を切り替える部分のスクリプト動作を一部改修しました。 ウィンドウサイズによって切り替える画像については、PCで表示させる為の大きな画
FacebookのOGP画像がどのように表示されるかブラウザ上でシミュレートできる「og:image Simulator」｜BLACKFLAG
Facebook上にWebページをシェアした際に表示されるOGP画像。 最近では様々な表示パターンがあり 実際にどう表示されるか、画像を作成する際に悩みどころだったりします。 そんな際にFacebook上でOGP画像がどう表示されるか ブラウザ上でシミュレートできるサービス「og:image Simulator」が この先便利に使えそうだったので自分用メモとして紹介してみます。 OGP画像シミュレータ | og:image Simulator OGP画像シミュレータ | og:image Simulator ページ上部の画像ドラッグエリアに 作成したOGP画像をドラッグ＆ドロップするだけで 複数パターンのFacebookのOGPサンプル枠に作成した画像がはめ込まれ、 Facebook上でどの様に表示されるかが一目で分かるようになります。 推奨画像サイズも明記されていてとても親切。 当ブログ
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
IE8でのclearfixの挙動｜BLACKFLAG
コーディングする上で今では当たり前となっているfloatを使って回り込みをした際の解除指定の「clearfix」。 この記述方法についてはいくつかパターンがありますが、うちでは —————————————– .clearfix:after { content: “.”; height: 0; clear: both; display: block; visibility: hidden; } .clearfix { display: inline-block; } —————————————– の記述を基本としています。 ですが、この記述方法では「IE8」では、ページ上にJSを使って高さが可変する動きをつけるとブロック要素ごとに重なりあったりする不具合が生じることがちらほら。 そんな際にはIE8のみ“display”要素を“inline-block”から“block”に変えることで解決でき
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
短縮URLを作成するツール「URL短縮 [URL SHORTNER]」作ってみました｜BLACKFLAG
もはや今ではTwitterでつぶやく際にURLは自動で短縮されたり あえて短縮URLを生成するツールを使用することも少なくなって 必要性もなくなってきていると思いますが 勉強がてら「bit.ly」のAPIを使って短縮URLを生成するツールを 試しに作ってみたので紹介してみます。 URL短縮 [URL SHORTNER] 短縮させるURLを画面上にあるフォームに入力し「URL短縮」ボタンをクリックすると すぐ下に短縮されたURLが生成されます。 短縮されたURLはコピーすることが可能。 一緒に表示される「リンク確認」の部分をクリックすることで 生成された短縮URLのリンク先を確認することができます。 「bit.ly」APIの詳しい使い方などに関しては、 「PHP & JavaScript Room」さんの記事を参考にさせていただきました。 【参考記事】bit.ly API｜短縮URL｜Web
jQueryで右クリックを禁止させる方法｜BLACKFLAG
Webサイト制作の際にクライアントからの要望などや 画像を簡単に保存させたくない時など、 右クリック動作を禁止させることがたまにあるかと思います。 右クリック禁止はJavaScriptで簡単に実装できますが jQueryを使うと、より簡単に実装することができたので メモ書きとして紹介してみます。 まずは単純にページ全体に対して 右クリック禁止させる方法は以下のような記述になります。 ◆SCRIPT $(function(){ $(document).on('contextmenu',function(e){ return false; }); }); もしくは、 ◆SCRIPT $(function(){ $('body').on('contextmenu',function(e){ return false; }); }); 「contextmenu」が右クリック動作にあたるようなので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
