IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
レスポンシブWebデザイン実装時にスクリーンサイズによってJSの処理を分岐させる方法
レスポンシブWebデザインを実装する時にはメディアクエリを用いてCSSをスクリーンサイズ毎に設定できますが、JavaScriptの処理をスクリーンサイズ毎に分岐したい時ってありますよね。今回はそんな時にJSの処理を分岐する方法をご紹介します。 window.matchMediaを使う方法 window.matchMediaを使うとCSSのMedia Queriesと同じようにスクリーンサイズによってJSの処理を分ける事ができます。具体的には下記のようにif文で条件判定をして使います。 if (window.matchMedia('screen and (min-width:768px)').matches) { //768px以上のデスクトップでの処理 }else{ //スクリーンサイズが768pxより小さい時の処理 } また以下の例のようにaddListenerを用いてリスナを追加する事
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
bouncejs.com - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES
jQueryで要素の表示・非表示を切り替える方法についてです。 要素の非表示 ( hide ) hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。 <body> <button>click</button> <p>表示されてるメッセージ</p> </body> $(function() { $('button').click(function(){ $('p').hide(); }); }); .hide()はcss('display', 'none')と同じ意味です。 $(function() { $('button').click(function(){ $('p').css('display', 'none'); }); }); .hide() | jQuery 1.9 日本語リファレンス | js STUDIO サンプ
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
[完全動作]レスポンシブ対応のカルーセルJQプラグインslickの使い方
（2016年6月15日若干修正） レスポンシブウェブデザイン化する際に重宝され始めた、ぬるっと画像がスライドするカルーセル表示。 そのカルーセルを簡単に導入する事ができるJQueryプラグインslickの導入方法を紹介する。 （デモページ） 導入に際して、結構な数のブログでその方法を紹介していたけど、矢印が表示されない、ナビゲーションのドットが表示されない等の不具合が出るやり方をこぞって紹介していた。 ということで、上のスライドのようにちゃんと動作するやり方を試行錯誤の末やっと見つけたのでシェア♪ （といっても、やり方は超簡単だったけどｗ） 導入方法 ①ファイルをダウンロード 公式ページからファイルをダウンロードする。 （ctrl＋Fで「Download Now」をページ内検索すれば、DL先が簡単に見つかる） ②ファイルをアップロード cssディレクトリに以下をアップ。 slick.css
![[完全動作]レスポンシブ対応のカルーセルJQプラグインslickの使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c3500cf65a8b0535d385d8e8a0508b3610ed5d0/height=288;version=1;width=512/https%3A%2F%2Fsingoro.net%2Fnote%2Fwp-content%2Fuploads%2F2013%2F12%2Fweb.jpg)
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript の書き方 - とほほのWWW入門