【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog
UNORTHODOX WORKBOOK BLOG TOP›Web Design›【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) 最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たので書き残しておきたいと思います。 「新たな知見」といっても、誰でも考えつくようなことで、そんなに大したことではなく、「あぁ、なるほど」とちょっと思った程度のことですが。。。 クリックでサイドから現れるメニューとは 何て言う名前なのか良く分からないので、デモを。デモページ右上の三つの四角いボタンをクリックすると、にょきっと横からスライドして現れるやつがそうです。 jQueryを利用していますが
bxsliderで2枚目以降の画像もブラウザ幅いっぱいに表示してみる。 | らうんじ
もともとbxsliderにはカルーセル表示をすることができるオプションがあるんですがコンテンツの幅を固定、またはmax-widthを指定してある場合、少し工夫をしてあげないとうまくいきませんでした。それからnext/prevのアイコンをクリックするとスライドショーが停止して動かなくなるという現象が起きていたので動くように変更しました。 以下サンプルページ http://gallery-lounge.com/demo/bxslider/ bxslider head bxsliderを自分のサーバーへアップロードし以下記述。easingを適用するならダウンロードしたファイル内にあるeasingファイルもアップロードしてください。 ※ファイルパスはご自身の環境に合わせて記述。 <script src="../js/jquery.bxslider.js"></script> <script src
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
WordPressテーマの作成方法 | kigiroku
WordPress（ワードプレス）テーマの作成方法 WordPress（ワードプレス）のテーマを作成するには、htmlとcssの他に、phpとWordPress（ワードプレス）のテンプレートタグの知識が必要になります。phpとテンプレートタグは、htmlやcssに比べると難易度が高く、コーディングが苦手なWebデザイナーとっては、壁となることがあります。Javascriptを触れる方であれば、phpやテンプレートタグの学習は難しくないでしょう。 WordPress（ワードプレス）のテーマは、一から自作しようとするとかなりの工数が掛かります。インターネット上には、たくさんのWordPress（ワードプレス）テーマが公開されていますので、それらテーマを利用し開発を進めるのが合理的でしょう。 ここでは、WordPress（ワードプレス）テーマがダウンロードできるサイトをご紹介します。 WordP
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
jQueryの$(function(){...});と$(window).on(
jQueryの$(function(){...});と$(window).on("load",function(){...})の違い 本エントリーは「to-R JavaScript Advent Calendar 2015」8日目のエントリー、今回はjQueryの$(function(){...});と$(window).on("load",function(){...});の違いについて解説を行います。 共にページの読み込みが終わったタイミングでfunction(){...}内に書かれている処理を実行するための記述ですが、$(function(){...});に書かれている処理はHTMの読み込みが終了したタイミング、正確にはDOMツリーの構築が完了したタイミングで実行されます。 $(function(){ //do something }); それに対して$(window).on("lo
jQueryでアニメーションをループさせる方法｜Gimmick log
公開日：2015.11.10 更新日：2020.05.18 jQuery, アニメーション アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。 ※2020年5月18日 サンプルが表示されなくなっていたので修正しました
レスポンシブ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プ
各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -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
【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から作れるよう、解説します。
フッターをCSSやjQueryで常に最下部（一番下）に固定表示する方法 | 株式会社WEB企画
ウェブサイトを制作中に、「あれ？コンテンツが少なくてフッターが浮き上がってきてる！？」なんて経験はありませんか？ 弊社は東京と名古屋でホームページ制作を行っている会社ですので、稀にですがそういったシーンがあります。 「そうじゃなくて最下部にフッターを固定表示したいんだーっ！」というあなたのためのエントリーです。 ↓弊社リンク 「株式会社WEB企画」のホームページはこちら CSSで実装する flexbox（CSS3)を使う この記事を公開した際には、存在していなかったのですが、最近では flexbox のお陰でかなり実装が楽になっています。（2019/06/11現在） 下記の内容をコピペで実装できます。HTML5の書き方をしていることが条件になりますね。 【HTML】 <body> <div id="wrapper"> <main> <!-- メインコンテンツ --> </main> <fo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://hamatte-wataru.com/shopserve_catch_customize/
Bright英会話
https://blog.mismithportfolio.com/web/20150320drawer