じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

公開日：2015.11.20 更新日：2020.05.18 jQuery, ナビゲーション jQueryのクリックやマウスオーバーで、コンテンツをスライドさせて表示する方法です。 ちょっとしたtipsを表示させる場合なんかにも、動きがついてかわいいかもですね。 IE8↑で動作確認しています。 jQueryライブラリの読み込みだけで、その他のプラグイン等は使用していません。 デモページ 右からマウスオーバーでスライドさせる CSS スライドさせる要素の親要素に対し、下記のようなスタイルを付与します。 今回はposition:fixed;で絶対配置にしていますが、相対配置でもOKです。 横幅を指定し、right: -140px; で初期位置を指定しています。この場合は-140px分右ヘ移動するので、40px分だけ画面に出ているということになります。 z-indexの値は、スライドさせるコンテン

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・

javascriptで、スマホのスクロールを制御する方法をご紹介します。 ハンバーガーメニューを開いたとき、画面のスクロールを停止する例を実装します。 ぼちぼち役立つ時があると思うので、頭の片隅に置いてみてください。 まずはデモをご覧ください。（スマートフォンで開いてください。PCだとイベントが発生しないので） removeEventListenerデモ 右上から展開するナビを開いている間はスクロールができません。 overflow:hiddenは間違い。たとえば、ハンバーガーメニューを開いたときに、body要素にclassをつけたりして「overflow: hidden;」すればいいんじゃね？と思いがちですが、これは誤りで、 iOSのsafariやAndroidのChromeだと普通にスクロールできてしまうので、大抵のケースで、開いたナビの下に隠れているコンテンツがスクロールされてしまう

こんにちは、福岡のホームページ制作シンス株式会社の越水です。 レスポンシブWebデザインでホームページ制作を行うとき、「スマホの時だけJavaScriptの処理を加えたい」なんてことあったりしますよね。 今回はそんな時によく使うJavaScriptの条件分岐について書きたいと思います。 レスポンシブWebデザインではウインドウ幅、またはUA（ユーザーエージェント）によって処理を分けることができる例えばスマホでホームページを見た時だけ動作させたい画像スライダーがあったとします。 何の情報をもとに条件分岐させればうまくスマホだけで動作させることができるでしょうか。主に2通りの方法があります。 ウインドウサイズの横幅によって条件分岐使用デバイスのUA（ユーザーエージェント）によって条件分岐前者はCSSのメディアクエリーを使うことでウインドウサイズによってレイアウトを変更させるのと似たような方法で

普段目にするアコーディオンは大抵トリガーとなるボタンの下にペロッと展開しますが、 トリガーの上に開き、かつ展開時はトリガーが非表示になるアコーディオンを実装する機会があったのでメモ。 参考にさせていただいたのはこちらです。 →クリックすると上に開くアコーディオン $(function(){ $(".acordion").hide(); $(".triger").click(function(){ $(".content").prev().slideToggle(); $(this).parent().css("display","none"); }); $(".acordion .close").click(function(){ $(".acordion").slideToggle(); $(".triger").parent().css("display","block"); });

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する

position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m

こんにちは。 今回は、IEの古いブラウザを使っている人に更新を促す「IE Alert js」を紹介したいと思います。 Web制作をしている方なら一度はIEの古いブラウザに悩まされたはず！ そんなあなたにぴったりなJQueryのプラグインです。 IEの古いブラウザ(IE6/7/8)でアクセスすると下記のようなアラートが表示されます。 Upgradeのボタンを押すとBROWSE HAPPYのページに行きアップグレードを促してくれます。 公式サイト:IE Alert js 公式サイトのdownload nowのボタンをクリックし、ソースをダウンロードします。 JQueryを読み込み、ダウンロードしたスタイルシートとjsを読み込みます。 iealertフォルダ内にスタイルシート、および必要な画像が入っていますので移します。 iealert.min.jsはjsフォルダにぶち込みます。 <link r

縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。

どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae

マウスの動きに追従してぐにょぐにょするjQueryプラグイン「jquery.morphing.js」 「jquery.morphing.js」は画像などを丸くしてマウスポインターの動きに追従してぐにょぐにょ（？）することができるjQueryプラグインです。 投稿日2014年07月11日 更新日2014年07月11日 使い方 リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。 html <div class="js-morphing"> <img src="img/01.jpg" alt=""> </div> JavaScript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../jqu

同一ページ内でYouTubeプレーヤーを複数埋め込んだとき、 通常だと同時に再生することができてしまいます。 実装前のデモページ 今回はこれを回避する方法を考えてみました。 対応方法案 対応方法として、以下の3案を考えました。 YouTubeプレーヤーではなくサムネイルを設置するようにして、サムネイルをクリックしたら ライトボックスを表示して再生するようにする。 YouTubeプレーヤーの設置を一つだけにして、代わりにサムネイルを設置。 サムネイルをクリックでYouTubeプレーヤーのURLが切り替わるようにする。 YouTubeプレーヤーをクリックして再生したときに、 他に再生しているYouTubeプレーヤーがあったら停止させる。 今回はYouTubeプレーヤーを複数埋め込むことが決まっていたたので、3番目を実装してみました。 ただ、実装するのは3案どれでも問題なさそうなので、場合に応じ

少し前に「jQueryでページの最上部に位置固定した、フルスクリーンスライドショー（クロスフェード）を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみたので紹介してみます。 言葉では少々説明しずらいのでまず動作サンプルから。 「jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法」サンプルを別枠で表示 ページ最上部に位置固定したフルスクリーンサイズでのスライドショーを設置します。 ※画像全体は横スライドして切り替え ページをスクロールさせるとフルスクリーンスライドショーはページ上部に固定されたままになり、下からコンテンツ要素が出現してきます。 スライドショー全体はブラウザサイズを変化させてもウィ

どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな　c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい　c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ

jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="