[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう！ | Neganin(ネガニン)
2. ダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。 jQuery Waypoints <header id="header"> <h1>Waypoints</h1> </header> <p id="text">jQuery Waypoints Demo</p> <div id="content"> <div id="wrapper"> <section class="section"> <figure class="thumb"><img src="img/thumb1.jpg"></figure> <h2>Title</h2> <p>Text Text
Chromeのバージョン38によるyuga.jsの画像ロールオーバー不具合
こんにちは。Webデザイナーのモリゾーです。 弊社では、サイト構築の際に画像のロールオーバーやページ内リンクのスムーズスクロールなど、様々な機能が使えるyuga.jsを使用しています。 yuga.js公式サイト しかし、少し前にyuga.jsを使用した際にロールオーバーがChromeでの閲覧時のみ機能しない事象が起こりました。 今回はその解決方法についてご紹介します。 原因について 2014年10月7日にChrome38の安定版が公開され、Chrome38からレスポンシブイメージの[picture]要素と[img]要素に新しい属性が追加されました。 そのことが理由でyuga.js内に書いてある属性とバッティングしてしまったことが原因です。 また、yuga.jsのバージョンは最新の0.7.2。 jQueryのバージョンは1.7.1を使用していました。 参考サイト – Dev.Opera （O
爽健美茶 ｜ 製品情報 ｜ 日本コカ･コーラ株式会社
<a href=\"#maincontent\">Skip to content</a></p>\r\n"}}" id="text-c4828cda8d" class="cmp-text"> Skip to content \r\n<li><a href=\"/content/onexp/jp/ja/brands.html\" target=\"_self\" rel=\"noopener noreferrer\">製品情報</a></li>\r\n<li><a href=\"#\">サスティナビリティー</a><ul>\r\n<li><a href=\"/content/onexp/jp/ja/sustainability.html\" target=\"_self\" rel=\"noopener noreferrer\">サスティナビリティー</a></li>\r\n</ul>\r\
BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter etc...
Categories HTML／(X)HTML (33) HTML5 (26) CSS (122) CSS3 (82) jQuery (334) TIPS (157) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (31) Mootools (8) iPhone／iPad／iPod／Android (26) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (52) WebサイトGallery (17) Web素材 (44) Web開発用ツール (28) Web情報 etc… (8) リリース情報（その他） (17)
沿線おでかけ情報（おけいはん.ねっと）｜京阪電気鉄道株式会社
【お知らせ】 イベントが中止または延期になる場合があります。 詳細は主催者までお問い合わせください。
PanoJS3 - 巨大画像をGoogleマップのように表示するJavaScriptライブラリ - QTVR Diary - 京都・日本・世界のパノラマムービー情報
ネタ元は、こちら。 □ 大きなパノラマ写真をGoogleMap風インタフェースで拡大縮小させられるライブラリ「PanoJS3」:phpspot開発日誌 巨大な画像、特に高解像度パノラマのような膨大な容量の画像データを、エンドユーザーの端末でストレス無く読み込ませる方法に「多段解像度読み込み方式（Multi Resolution Loading）」があります。老舗としては「Zoomify」が挙げられますね。このブログでも大昔にさんざんご紹介してきたかと思います。しかしこのご時世、iPhoneやiPadの人気に押されて脱Flashの波に抗うことは出来ません。 但しこの技術はどちらかというと、FlashよりJavaScriptによる表示の方が発達していったかもしれません。それが「Googleマップ」です。 「AJAX」と呼ばれるJavaScriptによる非同期通信技術を一躍有名にしたこの
A simple scrollable image gallery
A simple scrollable image gallery This demo continues from the minimal setup and adds a simple click action to the scrollable items which will open up a larger version of the thumbnail image. HTML coding The scrollable setup is identical to the minimal setup. Nothing has been modified from that. Here we focus only on the elements that are required for showing the large image. First, we add a conta
jQueryをうまく使ったクールなポートフォリオサイト25 – creamu
CreativityDenというサイトで、jQueryをうまく使ったクールなポートフォリオサイトがたくさん紹介されています。 いくつかご紹介しますね。 » webalon jQueryを使って画像を水平方向にスクロールしているWebalonのサイト » metalabdesign マウスオーバーでさりげなくフェードイン&アウトするグローバルメニュー » brynnshepherd ”about me”タブをクリックすると、スライドして現れるコンテンツ » jp3design マウスオーバーすると、ふわっと浮き上がって落ちる時も滑らかなグローバルメニュー » cpeople スライディングパネルとスクローラーをクールに使ったCPeopleのサイト その他のリストは以下からどうぞ。 » 25 Portfolio Sites Using jQuery Amazingly Well pdfがcom
[JS]jQueryのプラグイン100選 -2009年総集編
2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building the Perfect Logo StripCreate a visually balanced logo strip by adjusting logo heights based on aspect ratios using CSS. By scaling logos dynamically, you can display a harmonious row of diverse logos without manual tweaking.
jqueryでウェブサイトをリッチにするプラグインまとめ « vanillate
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
1stWebDesigner • Helping You Build a Better Web - For Web Professionals
Marketing & SEO A Better Google Analytics AlternativeOur recent migration to GA4 left a lot to be desired and led us to explore for better google analytics alternatives. We tried just about everything out there, including Plausible, Fathom, and several others, all with their own pros and cons. The biggest hurdles were: limited features and higher costs.… CSS offers an array of tools that, when use
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーヒーはUCC上島珈琲
jQuery Slider | Responsive jQuery Slider | bxSlider
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
はじめてのjQuery
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
http://www.designwalker.com/2009/09/jquery-table.html
学校法人 大覚寺学園 嵯峨美術大学 嵯峨美術短期大学