動くWebデザインアイデア帳 | 動くWebデザインアイディア帳
jQueryとCSSアニメーションを はじめたばかりの方へ Webデザインのスクール講師が 「動かしたいパーツ」ごとの 逆引きリストをつくりました News 2024.03.27Gmailにおける特典受け取りについて2024.01.185-1-1、5-1-2 グローバルナビゲーション ドロップダウンメニュー（上・左）に関するCSSコード不備のお詫び2023.08.305-1-3、5-1-4 グローバルナビゲーション ドロップダウンメニュー（写真付 上・左ナビ）に関するコード不備のお詫び2022.10.195-1-7 「グローバルナビゲーション-スクロールするとハンバーガーメニューに変化-」に関するコード不備のお詫び Gmailにおける特典受け取りについて 【お知らせとお詫び】 2024年2月にGmailのガイドラインが変更となった影響で、特典受け取りとお問い合わせフォームの内容がGmail
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
プラグインを使わずにCSSとjQuery数行でできるドロワーナビ | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。 jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。 実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。 今回はプラグインを使わずに作るドロワーナビをご紹介いたします。 Table of contentsコンテンツとナビゲーションを用意開いている状態を作成するjQueryで制御するコンテンツとナビゲーションを用意まずはコンテンツとナビゲーションを用意します。 固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。 DEMO.コンテンツとナビゲーションを用意 <div id="page"> <!-- コンテンツ --
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
jQuery＋CSS3で全画面表示するハンバーガーメニュー
Posted: 2019.01.31 / Category: HTML&CSS, javascript jQuery＋CSS3を使用して、ハンバーガーボタンをクリックすると全画面メニューが表示するやつをやってみます！ フェードで表示されるナビゲーション 一つ目はフェードで表示されるナビゲーションです。 See the Pen Full Screen Hamburger Menu 01 by webopixel (@webopixel) on CodePen. html <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="gloval-nav"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン... 「トップへ戻る」ボタンのデザイン15パターン ボタンで表示を切り替えてご覧ください。 See the Pen PAGE TOP BUTTON01 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON02 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON03 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON04 by kenichi (@ken81
非表示にしたメニューをクリックでモーダルウィンドウ風に画面いっぱいに表示する | UNORTHODOX WORKBOOK | Blog
最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 target擬似クラスを使えばCSSだけでも実装できるようなんですけど、フラグメント識別子を付けたり変えたりすると、ブラウザの「戻る」が反応してしまい、それが好みじゃなかったので、一般的なjQuery＋CSSで実装しています。jQueryといっても、クリックイベントだけなので、実質CSSみたいなものですけど。 モーダルウィンドウメニュー 以下のリンクから試しに作ってみたもの(デモ)がご覧になれます。右上の「MENU」というところをクリックすると、モーダルウィンドウが表示されるようになっています。 DEMO PAGE 以下、簡単に仕組みとかを書いておきます。 モーダルウィンドウメ
【jQuery】ナビの範囲外をクリックしてナビを閉じる方法
Webサイトのナビやメニュー用のプラグインが多く出回ってますが、 それを使わずにわずか数行のコードで超軽量ナビを実装する方法を教えたいと思います。 ちなみにかなり簡易版なのでカスタムは結構自由にできると思います。 超簡単に実装 まずはデモを用意しました。 ※すみませんスマホで見るとWordPressの影響でカクつきます
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
【コピペ可】３行のjQueryでハンバーガーメニューを作る
スマホ版サイトではおなじみのハンバーガーメニューの作り方を３行のjQueryを元に解説します。javascriptでの作り方を知りたい方は「【コピペ可】jQuery不要！javascriptだけでハンバーガーメニューを実現」をご覧ください。 ハンバーガーメニューの完成デモ まずはハンバーガーメニューのデモになります。HTMLとCSSとjQueryで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。 See the Pen 最もシンプルなハンバーガーメニュー実装方法０1 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen. jQueryの実装内容を解説 bodyタグの末尾にCDNのjQueryを読み込みましょう jQueryを使う際には、scriptタグ
jQueryでページ遷移をする方法とサンプル
JavaScriptでは、ページ遷移・リダイレクトするためのメソッドとして、 window.location.hrefが用意されており、jQueryでもこのメソッドを使うことでページ遷移・リダイレクトができます。 今回は、jQueryを使ったさまざまなパターンのページ遷移をサンプルを交えながら説明します。 JavaScriptでページ遷移 JavaScriptでページ遷移をするには、window.locationオブジェクトを使います。 UX MILKに遷移する場合は、以下のようになります。
【Labs】チェックしたら有効になるリンクボタン
6月更新・前月(5月)の人気記事トップ10 06/06/2024 ( 02 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について ( 01 ↓) 【Mac】macOSをHigh SierraからMontereyにアップグレード ( 03 – ) 【Mac】Safariでソースコードを見る方法 ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む ( 05 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法 ( 08 ↑) 【Labs】CSSだけでドロップダウンメニュー ( 09 ↑) 【Labs】PHPのエラー表示をなくす方法 ( 06 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方
【jQuery】スライダー系プラグイン slickの使用方法 - Qiita
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> デフォルトのスタイルからカスタマイズしたい場合はslick-theme.cssを入れる。 また、slick.min.jsはbodyの閉じタグの直前で読み込む。 スライドさせるコンテンツを作成
【Swiper】ズームインした後にフェードで切り替わるスライダーの作り方
こんにちは、Ryohei（@ityryohei）です！ 本記事では、Swiperでズームインした後にフェードで切り替わるスライダーの作り方をご紹介しています。 Swiperは、jQueryを必要としないJavaScriptのスライダーライブラリです。高機能でありながらシンプルな設計となっているため、初めて触る方にもとっつきやすいスライダーとなっています。 今回は、Swiperで実装することができるフェードエフェクトのスライダーに少し手を加えて、画像がズームした後にフェードで次のスライドに切り替わるスライダーを作っていきたいと思います。 本記事ではズームインの後にフェードするスライダーの実装方法を、下記の2パターンご紹介しています。 CSSのみでズームインした後にフェードで切り替わるスライダーを実装する CSS + JSでズームインした後にフェードで切り替わるスライダーを実装する キービジュ
プラグイン不要！多階層のモバイル向けドロップダウンメニューを作ってみた！| CSS・jQuery | WebLamps
こんにちは、Aroeです！ 「よし、新しいWebサイトを作ろう」と思って、朝からいろんなテーマ(最近はもっぱらWordpressばっかり使ってる)を探し始めて、気がついた時にはもう日が暮れてるってことがよくあるこの頃です。 最近はいっぱいあるんですよねぇ、テーマの種類が。観てるだけでワクワクします。(笑) そんなテーマ選びの中で、僕が最初に見てしまうのが「ナビゲーションメニュー」（グローバルメニュー）です。トップページや個別記事ページ、ほとんどどのページでも共通して表示される箇所ですからね〜、力を入れて作り込みたいところ。（時間があれば） モバイル対応でいい感じのドロップダウンが見つからない メニュー系のプラグインって、けっこう多種多様なのですが、PC表示の場合はよくても、モバイル表示時のデザインや挙動が「うーん・・・」って感じで納得のいかないものが多かったり、片手間なカスタマイズだとスタ
【Wordpress】CSSやJavaScript（jQuery）ファイルを読み込む正しい方法｜WorPreYa
オリジナルのCSSやJavaScript（jQuery）を設定したい時に、テーマファイルに直接書いてしまえば手っ取り早いのですが、Wordpressの場合は書き方が異なるようです。 そこで、WordpressのテーマにオリジナルのCSSやJavaScript（jQuery）を読み込ます書き方を解説します。 読み込む画面に合わせてフックが準備されているWordpressは、CSSやJavaScriptファイルを読み込ませれるように画面に対してフックが準備されています。 フック一覧wp_enqueue_scripts
ズームアウトしながらフェードで切り替わるZoom Sliderの使い方
Zoom Sliderの使い方とは？ Zoom Sliderの特徴は、ズームアウトしながらフェードで切り替わること。ズームアウトするスピードや次の写真に切り替わるスピード、次の写真に移るタイミングを簡単に操作できます。ズームインやスライドといった機能はないのでご注意を。 それでは説明していきます。 ステップ１： zoomslider.jsを読み込む 配布サイトからzoomslider.jsをダウンロードしましょう。 ダウンロードするとdistというフォルダの中に以下の４つが入っています。 jquery.zoomslider.min.jszoomslider.cssdots.pngplain.png distフォルダごと以下のようにjsフォルダにインポートします。 インポートしたら</body>の直前に以下のコードを挿入してください。フォルダへのパスは自分の環境に合わせて変えてくださいね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodingMania
jQuery サンプル: グローバルナビ (2階層・レスポンシブ)