ここ最近のぼくのフロントエンド｜平尾ゆうてん
いわゆるホームページの制作は、フロントエンド技術ではWebサービス系と比べると何かと遅れがちなのだけど（地方の場合はもっと）、ここ1年近くは「次の時代に変わりつつある」と感じるようなことが多かったので、2018年度のエンジンもようやくかかり始めたので綴ってみようと思う。 ※完全に主観です。 Webアクセシビリティ少し前までは知識が先行して「やりましょうやりましょう」と言っていたけど、WCAG達成を目標にするケースが突然増えた。実施までは（残念ながら）ならくても、クライアントから求められて見積もりをすることも増えた。 総務省のガイドラインの理由もあるだろうけど、普及を行っている方々の活動の賜物だと思う。社内でも言葉すら知らなかった人間もいたはずだけど、今では最初の要件定義や提案で考えられるようになってきているので、本当に変わったなぁと思う。 脱jQueryReactやVue.jsをはじめとし
jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita
はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。 似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel ! なお実際の動作は↓で確認ができます http://nekoneko-wanwan.github.io/demo/jquery/dom/ とりあげるメソッド append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapInner() wrapAll()
【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
モーダルウィンドウ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQueryとCSS3で作るページの上までスクロールするボタン
wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。 今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。 今回はボタンが現れるパターンを3種類作ってみました。定番のフェードインして現れるものと、CSS3を使ったものがあります。まずはサンプルをご覧ください。 HTMLは全て同じです。 <a href="#" id="page-top1">上に戻る</a> 非常にシンプルです。 では、CSSとiQueryを1つずつ解説します。 1. フェードイン まずはとても有名なやつです。ある程度スクロールするとフェードインして現れます。CSSは次のようになります。サンプルは
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+ | co-jin
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示できるスライダー。 今回は無料で利用できるバリエーション豊富なスライダー用jQueryプラグインをご紹介します。 画像のスライダーから、レスポンシブ対応、フルスクリーン対応のほか、目を引くアニメーションによる画像の切り替えやコンテンツそのもののスライダーなど、多くのプラグインを集めてみました。 今後のコンテンツ制作にお役立ていただければ幸いです。 Swiper レスポンシブ対応で、スマホなどのタッチデバイスでのフリッカブル（スワイプ）にも対応したコンテンツスライダー。 オートプレイのほか、縦スライドや3Dエフェクト、ネスト構造（コンテンツにさらにスライダーを設置できる）対応と、幅広い表現が可能な、使い勝手のよいスライダーです。 設置も簡単、スワイプの反応もよい。 本当にオススメのスライダーです
【jQuery】IE8以下でもCSS3のbackground-sizeプロパティが使えるようになるプラグインjquery.backgroundSize.js | Rapid Progress
IE8以下でもCSS3のbackground-sizeプロパティが使えるようになるプラグイン「jquery.backgroundSize.js」についてです。最近縦長＋背景画像が横幅100%になるページを作る機会が増えました。 そんな時便利なのがCSS3から登場した「background-size」というプロパティですが、IE8以下は当然（？）対応していません。 が、非常に有難いことに、「jquery.backgroundSize.js」というプラグインを用いることでIE8以下でもbackground-sizeプロパティが使えるようになります。 1.background-sizeプロパティについてちょっとだけ CSS3から背景画像の幅と高さを拡大・縮小するプロパティが追加されました。それがbackground-sizeプロパティです。なんか文章で説明しても伝わりにくいと思うのですが、とに
スクロールしても固定表示されるヘッダーを実装する | FSFIELD Labs
JavaScript スクロールしても固定表示されるヘッダーを実装する グローバルナビなどが配置されているヘッダ部分を、スクロールしても固定表示されるようにする方法を紹介します。jQueryを使います。 最近増えてきた表現ですね。ナビゲーション部分が常に表示できるようになるので便利ですが、常に表示されるということはその分コンテンツ部分が狭くなるというわけで、デザインする際はその点を計算する必要がありそうです。 スマホでやると挙動がうっとうしかったので、やらないか、更なる改良が必要と感じました。 格納するファイル jquery.js 記述の仕方 HTMLの記述 <div id="navigation"> <ul> <li><a href="/">お知らせ</a></li> <li><a href="/">会社案内</a></li> <li><a href="/">Web開発室</a></
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」