【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
心地よし！フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」
twitter facebook hatena google pocket クリックするとより多くの情報が表示されるモーダル。 非常に便利で、デザインがシンプルなページが増えてきてより使用されるようにも感じています。 今回紹介するanimatedModal.jsはCSS3の動きの効果を利用して、心地良い動きをさせられるjQueryプラグインです。 sponsors 使用方法 animatedModal.jsからファイル一式をダウンロード。 まずはanimate.cssを読み込みます。 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"> 次に、モーダル部分の記載です。 <a id="id名" href="#animatedModal">クリックしてね
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
Mosaic – Sliding Boxes and Captions jQuery Plugin « Build Internet
The most popular tutorial on Build Internet is now a jQuery plugin. Welcome aboard, Mosaic. Sliding Boxes Revisited The original sliding boxes tutorial is undoubtedly our most popular tutorial, with about 660,000 views as of this post. Given our recent surge in releasing plugins, we decided to add sliding boxes to the roster – say hello to the Mosaic jQuery plugin. Features Automatically generates
WordPress Share Buttons Plugin – AddThis
If you upgrade to PHP 8, it crashes the website.Needs an urgent update! I researched and bought what was supposed to be the best and tried for two days to get it to work on my site. AddThis works out of the box. I kid you not. Just install and activate the plugin, and it works. Wow! I can’t believe it. Thank you, guys. Thanks a lot. Everything should work so well. Now I’ll go make the connections
Photoshopがもっと便利になるすごい機能拡張・プラグインのまとめ
Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
What’s New Generator | WP-BizPlugin
What’s New Generatorは、投稿、固定ページ、ウィジェットに下のような新着情報を表示するプラグインです。 新着情報の日付、タイトルは自動的に表示されます。また、タイトルをクリックすると該当のページが開きます。 特徴 期間を指定してタイトルにNEW！マークを表示させることができます。 新着情報に表示するコンテンツに投稿、固定ページ、投稿＋固定ページを設定できます。 表示する件数を設定できます。 表示順序は、公開日順・更新日順から選択できます。 カテゴリを指定して記事の新着情報を表示させることができます。 WordPressの設定画面でこれらの設定を行い、新着表示のプレビューができます。 ダウンロード・インストール こちらのページです 設定 WordPressの管理画面で、設定メニューからWhat’s New設定を選択して、What’s New Generator設定画面を開き
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Lightbox風のjQueryプラグインColorBoxの使い方 – bl6.jp
綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹介です。とても人気のあるjQueryのプラグインなのでご存知の方も多いかと思います。画像をクリックするとポップアップ表示されるので、じっくりと見ることができます。パリエーションも色々あるので自分のサイトに合うようにカスタマイズしてみてもおもしろいですね。以下、使い方です。 [ads_center] ダウンロードしたフォルダの中にはexample1〜example5というフォルダがありますが、それぞれのバリエーションが異なるのでその中にある自分の使いたいCSSファイルとimagesフォルダをサーバーにアップロードします。 colorboxの中にはjquery.colorbox-min.jsとjquery.colorbox.jsが入っていますのでどちらか好きな方をアップロードします。ちなみにminの方が軽いです。 あとは<h
読み進めると、すっとトップに戻るを表示するjQueryプラグイン「scrollUp jQuery plugin」
twitter facebook hatena google pocket よくページの下の方まで行くと「トップに戻る」がすっと表示されることがあるかと思います。 scrollUp jQuery pluginを利用するとすっと導入ができます。 すっと出てくるので、目につきやすいのが特徴ですね。 sponsors 使用方法 scrollUp jQuery pluginからファイル一式をダウンロード。 あとは下記を記述するだけですっとできちゃいます。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.scrollUp.js"></script> <script type="text/javascript"> $(functio
WordPress サイトを静的 HTML に変換するプラグイン StaticPress - dogmap.jp
実は WordPress サイトを静的 HTML に変換するプラグイン StaticPress をリリースしていました。 ダウンロードは、WordPress 公式プラグインディレクトリからお願いします。 WordPress › StaticPress « WordPress Plugins このプラグインを使用することで WordPress で作成されたサイトを丸ごと静的ファイルに変換することができます。 また、変換時にサイトのパーマリンク構造を変換することができるため、http://wp.example.com/ というオリジナルサイトを http://www.example.com/static/ というサイトとして公開するための html を作成することも可能です。 完全に静的ファイルを作成するため、コメントやサイト内検索・コンタクトフォームの設置などはできません。 それらについては
働いていた私が言うんだから間違いない！ 稼げるキャバ嬢の特徴
私は大学生時代の4年間、キャバクラでキャバ嬢としてアルバイトをしてたんやけど、その時はナンバー1までは行かずとも、そこまで売れてないわけではなかった。 でも、最高でそのお店でナンバー3を取るくらいの人気を得ることができてたから、決して悪い成績ではなかったかなーとは思ってて笑 そんな私が4年間キャバクラ業界にいて、稼げるキャバ嬢と稼げないキャバ嬢の違いについて、気づいたことをここで書いていくね。 大阪のキャバクラで稼ぎたい、そう思ってる女の子はこのことについて1回考えてみて欲しい！ 稼げるキャバ嬢の特徴① 常に学ぼうとする意識がある キャバクラに入りたての頃は、仕事や接客の方法について学ぼうという意識を持つやろうけど、ある程度経って仕事にも慣れてきた頃が要注意。 キャバ嬢の仕事に慣れてきたからと言って、何も学ぼうとしないのはNG！ 接客の方法がワンパターンやと最初に持ったお客さんも、だんだん
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
Responsive Tables, for Bootstrap 5
cmmntr.com
IDEA * IDEA
