[B! jquery] sigのブックマーク

デジタル庁でjQueryが何をしているのか - laiso

TL;DR: jQueryはDrupalのバーターリニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆくまた、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたいどのような変更があったのかシステム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて

sig 2023/12/15

リンク

ロールオーバーを簡単に実装する-Image Rollover Code--JavaScript Library Archive

ロールオーバーを簡単に実装する-Image Rollover Code- Check Tweet 配布元：Daniel Nolan ライセンス：不明 Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。設置方法 rollover.jsをhead要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample

sig 2017/05/16

リンク

jQueryを使った画像のロールオーバー

まさに車輪の（以下略）なんですが、 jQuery使う事最近多い jquery_auto.js（リンク先なくなってる！）やyuga.jsを使うまでもない時もあるという事でなんとなしに書こうと思った。こうだったらいいなと思ったことシンプル拡張子の文字数にかかわらずに動く input type="image"でも動くコード /** * rollOver on jQuery * rollOver tag:img,input * rollOver class:Over * rollOver FileName:*_o.* * Last modify:20081210 * Licensed:MIT License * @author AkiraNISHIJIMA(https://nishiaki.probo.jp/wp/) */ function rollOver(){ var preLoad

sig 2017/05/16

リンク

レスポンシブ対応でサイドメニューを一定範囲で固定表示する jQuery プラグイン | CYOKODOG

久しぶりのプログラム関連のエントリーです。表題の「サイドメニューを一定範囲で固定表示」って意味通じますでしょうか？画面スクロール時、サイドメニューが上部に流れきって消えてしまわないように途中から position:fixed で位置固定して、フッターにかぶる位置にきたら位置固定を解除するＵＩのことです。あの有名な LIG さんや痛いニュースでも採用されてるデザインです。このちょくちょく見かけるＵＩのかゆいとこを解消した jQuery プラグインを紹介します。一定範囲固定メニューのかゆいとこ個人的意見ですが、よく見かける一定範囲固定メニューで感じるかゆいとこは以下２点です。レスポンシブに対応してない上部方向にスクロールした場合、位置固定がなかなか解除されないまず１の「レスポンシブに対応してない」についてですが、レスポンシブに対応してるやつを見たことがありません。実はスマホ持っ

sig 2017/04/19

リンク

スクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】

2015/03/12 (更新日: 2016/08/14) スクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】 JavaScript PROGRAMMING 今どきのフロントエンドエンジニアはサイドバーを固定したいと思います。ブログとかでもよく使われている手法ですよね。デモ：» スクロールでサイドバー固定するデモそれでググっていたら以下のスクリプトにたどり着きました。 » ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん！(Hatena) たしかに動くのですが「コード長すぎじゃないか！」と思ったので、もっとスッキリしたコードを配布します。jQueryを利用するので、しっかり読み込んでおいてください。サイドバー固定のJavaScriptテンプレート // PC用のサイドバー固定 (function(){ $(function(){

sig 2017/04/19

リンク

Mojik

Mojikという、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリを公開しました。いまのところ、以下のパターンでの「アキ」を調整できます。連続する約物のアキ行頭の始め括弧のアキ欧文間のアキ Mojik.compose()メソッドの引数にCSSセレクターを渡すと、マッチする要素から上記に該当する箇所を検出し、それぞれマークアップが挿入されるので、CSSでアキ量を調整します。以下のページに実際に動いているデモがあるので、ぜひ見てみてください。 Mojikデモウェブページの本文やタイトルなどで使われることを想定しているので、HTMLタグがあっても問題なく動作することは必須条件でした。基本的に、まずHTML文字列をテキストとタグに分けて、正規表現でテキストの検索を繰り返す、という方法を採っています。ここらへんはkotarok/jQuery.waokonなど

sig 2016/08/01

リンク

JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）

はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき

sig 2016/01/21

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

sig 2015/03/24

リンク

jquery.kerning.js

jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。うつくし明朝 - kerned ポラーノの広場あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場あのイーハトーヴォ

sig 2015/03/07

リンク

スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」 – bl6.jp

mmenuというjQueryプラグインを使えば、スマホアプリのように横からスライドするメニューを実装することができます。実際のデモではレスポンシブになっており、画面を縮小するとメニューがアイコンに切り替わります。このアイコンをクリックすると横からメニューがスライド表示されます。メニューが多階層にも対応しているのがいいですね。 [ads_center] mmenuの使い方 mmenu 使い方は、まずhead内に以下のjQuery本体とプラグインファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.mmenu.min.js" type="text/javascript"></script> <link href="jquery.mmenu.css" type="text

sig 2014/10/27

リンク

http://mmenu.frebsite.nl/

sig 2014/09/26

リンク

CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com

もちろん、そうでない方にも親しんで頂きたいと思います。最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きましたこの記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割したそしたら今まで動いていたも

sig 2014/04/16

jquery
css

リンク

jQuery最高の教科書｜株式会社シフトブレイン著

「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。また、jQuery初心者のデザイナーの視点を加えることで、プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。通常、サンプルコードは全て出来上がった状態で配布されますが、本書ではあえて途中までのみを記載しています。コードに余白を残すことで、サンプルをただなぞるだけではなく、読み手の工夫次第で様々な表現を生み出すことができるようにしています。最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。シフトブレインの取締役、テクニカルディレ

sig 2013/12/08

book
jquery

リンク

『jQuery 最高の教科書』サンプルサイト

Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きのスライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化するスティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡

sig 2013/12/07

jquery

リンク

jQuery Tutorial

jQueryは、JavaScriptライブラリです。 jQueryは、JavaScriptプログラミングを非常にシンプルにします jQueryは、簡単に学習できます。 <html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide() }) }) </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html> "試してください" ボタンをクリックし、どの様に動くかを見てください。学習するこ

sig 2013/11/22

リンク

jQueryプラグインなスライダー | かえラボBlog

jQueryプラグインにチャレンジしてみました。よくあるスライダーです。 (10/26 追記) iPhone&iPad対応しました。細かいことはCSSで調整ください (9/7 追記) ドラッグに対応しました。 slider.js Demo HTML側の記述は下記を参考ください。 <div class="slideFrame"> <ul class="slideGuide" id="slide-00"> <li class="slideCell">セル</li> <li class="slideCell">セル</li> </ul> <div class="slideCtrl left"><</div> <div class="slideCtrl right">></div> </div> リスト要素の部分はdiv要素など他のブロック要素でも構いません。ガイド用クラス(.slide

sig 2013/07/21

リンク

[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB

ランディングページやバナーなどで、クリックされるテキストはどっちだろう？カラーを変えるとクリック率があがる？など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。

sig 2013/07/20

リンク

jquery小技まとめ３２

作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。エンジニア速報は Twitter の@commteで配信しています。もくじスクロール１．ページ内リンク／フッターまわり／トップに戻る２．パララックススライド３．カルーセル４．レスポンシブなスライダー５．ヌルヌルサクサクなスライドメニュー６．サムネイル付きクロスフェードスライドショー補助７．Google Ana

sig 2013/07/03

jquery

リンク

[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy

Google Maps Pop Easyの使い方使い方は非常にシンプルです。 Step 1: 外部ファイルスクリプトを</body>の上あたりに、外部ファイルとして記述します。 <script type='text/javascript' src='js/jquery.modal.js'></script> <script type='text/javascript' src='js/site.js'></script> Step 2: HTML 最低限必要なHTMLの構造は、こんな感じです。 L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。 <a class="modalLink" href="#">Click Me</a> <div class="overlay"></div> <div class="modal"> <a href="#"