Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal - かちびと.netこの記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。
[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
知識ゼロでもコピペでOK！『yuga.js』を使ってWEBサイトを今より”優雅”にする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして。LIGフィリピン支社代表のせいとです。 今回は『yuga.js』というjQueryのプラグインを使用して、WEBサイトに�↑のお姉さんのような”優雅さ”を加えるやり方を書かせていただきます。 『yuga.js』とは？ yuga.jsとは、Kyosuke氏によって作られた、WEBサイトをなんかこう、カッコよくするヤツです。 これを使うと、たとえば… カーソルを合わせると画像が切り替わる動き（マウスオーバー）が簡単にできる。 画像をオシャレに表示させられる。 「ページトップへ戻る」とかのリンクの動きがスムーズになる。 といったことができるようになります。 この記事では、個人でWEBサイトを作られている方や、WEB初心者の方に読んでいただけるようにコピペだけで実装できるよう解説していきます。 それでは早速始めましょう。 ダウンロード＆下準備 まずはこちらのページからyuga.jsをダ
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
View Full Site for Responsive Web Design | Creative and Code
Add a view full site link for visitors who want to see the desktop version of your web page. Please note: make sure you are viewing this demo from a mobile device. Content Content Content // viewport stuff var targetWidth = 980; var deviceWidth = 'device-width'; var viewport = $('meta[name="viewport"]'); // check to see if local storage value is set on page load localStorage.isResponsive = (localS
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
[JS]DOMエレメントを操作するシンプルで超軽量のスクリプト -Chibi
jQueryなどの他のスクリプトに依存せず、DOMエレメントを操作するシンプルで超軽量（2KB gzipped）のスクリプトを紹介します。 Chibi -GitHub Chibiの対応ブラウザ Chibiの使い方 Chibiの対応ブラウザ IE6をはじめ、ほとんど全てのデスクトップ・スマートフォン用のブラウザをサポートしています。 Android Browser 2.1+ Blackberry Browser 6+ Chrome Chrome Android Firefox 3.5+ Firefox Mobile Internet Explorer 6+ Internet Explorer Mobile 9+ Opera 10+ Opera Mini Opera Mobile 10+ Safari 3.2+ Safari Mobile 3.2+ Symbian^3 Browser or h
jQuery / CSS3 TIPS｜BLACKFLAG
BLACKFLAGで紹介しているjQueryとCSS3を使って実装するスライドショーやカルーセル等、Webサイト上でのUI系スクリプトのTIPSをまとめたページになります。 ※一覧は随時更新します。 Comments (6) html/css/jquery などのtipsが多彩のサイト | webサイト作成に関する自分メモ | 2013.02.25 19:11 […] jQuery/CSS3 TIPS jQuery/CSS3 TIPS […] きのぴ | 2015.12.04 14:01 はじめまして、 パララックスデザインのソースについて探しておりました。 勉強も兼ねてですが、簡単なLPサイトで使用させていただこうと考えております。 こういったサイトがあるとすごく助かり、また勉強にもなります。 ブックマークさせていただき、ちょくちょく拝見させていただければと思います。 ありがとうございま
Managing JavaScript on Responsive Websites | Viget
The original breakout article on responsive web design came out in early 2010 (well, maybe it wasn't the first article, but it was certainly the one that moved responsive design firmly onto all our radars). Since then, responsive design has rocketed from a parlor trick only found on edgy portfolio sites to an accepted practice, finding its way into large-scale sites. For a sample of the breadth, v
というわけで、レスポンシブ Web デザインを取り入れてみた…
というわけで、何となくですがレスポンシブ Web デザインのことがわかったような気になった 😛 ので、実際に制作していくことに… まず、IE8にも対応させるために css3-mediaqueries.js というスクリプトを読み込むように記述。 [html] [/html] 最近話題になってた気がする Google HTML/CSS Style Guide には [html] [/html] と、書いてあったりするので [html] [/html] のように記述する方がいいのかな… 次に Viewport の記述。 [html] [/html] Viewport をどのように記述するのがベストなのかよくわかっていない。 ただ、user-scalable を 『no』に設定する人もいるようですが、ユーザビリティの観点からするとあまりお勧めできないと思います。 Viewport に関しては、
Webデザイナーのためのjquery入門2（前編）
82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2（前編） — Presentation Transcript Webデザイナーのための jQuery入門 -覚醒編（前編） -jQueryのコードを自分で考えて書けるようになろう！ 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容１. 何かを取ってくる ２. それに何かをする３. まとめ 1
Diving Into CSS Regions | Envato Tuts+
CSS Region Support At the time of this writing, the CSS Regions specification is a working draft and things may change! Techniques mentioned in this tutorial might change in implementation. The aim of this tutorial is to give a basic understanding of CSS Regions and what might be coming to a browser near you. Check out caniuse.com for a list of browsers which have some support for CSS Regions. Thi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 × CSS3 × jQueryを真面目に勉強してみる | DevelopersIO
How & When to Build Website Content using Tables
HTML5 User Experience Design - ＠IT
Collective #14 | Codrops
チェックボックスやラジオボタンのデザインを変更可能な送信フォームを実装する為のフレームワーク・Ideal Formsにバリデーション機能が付いた - かちびと.net
Clever Problem Solving Techniques for CSS - Developer Drive