タグ「script src」 - はてブログ

タグ script src

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 48件)

[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height | コリス

2015/09/10 179 users コリス script Body Step スクリプト

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init();... 続きを読む

[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop | コリス

2015/09/01 72 users コリススライダー stylesheet rotate

アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="pa... 続きを読む

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス

2015/08/03 338 users jQuery コリス Body Step スクリプト

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む

[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js | コリス

2015/06/30 90 users コリス script プルダウンエレメント Body

デモページ物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定... 続きを読む

ブログのアクセス数を1.5倍に増やすカスタマイズの全手順 - Appism（アップイズム）

2015/06/13 75 users Appism charset Facebook JSAPI

2015-06-13 ブログのアクセス数を1.5倍に増やすカスタマイズの全手順はてなブログ-はてなブログカスタマイズはてなブログシェアするはてブ Facebook Google+ https://www.google.com/jsapi"></script> <script src="http://bulldra.github.io/commons.js" charset="u... 続きを読む

[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs | コリス

2015/01/26 64 users head コリス jquery.js Step タブ

デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></sc... 続きを読む

[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate | コリス

2014/11/26 54 users Modernizr コリス head jquery.js デモ

デモ：Safari/OS Xで表示フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="j... 続きを読む

[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js | コリス

2014/11/25 108 users コリス rolling スクリプスクリプト script

demo 5 一行ごとにさまざまなアニメーションで表示します。「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプ... 続きを読む

[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js | コリス

2014/09/08 188 users コリス jQuery 横軸 head Step

スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/time... 続きを読む

YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video - かちびと.net

2014/07/31 55 users YouTube jQuery Vimeo script 備忘録

YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。動画を手軽に背景指定出来る、というもの。 OKFocus video 動作サンプルです。背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> ... 続きを読む

スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」 - to-R

2014/05/19 239 users GitHub scrip to-R script スマホ用

普段スマホ用のブラウザ判別を行うために利用しているjQueyプラグインを公開したのでご紹介します・ダウンロード / GitHub 利用方法 jQuery本体を読み込んだ後にダウンロードしたjquery.browser.sp.jsを読み込みます。 <script src="jquery.js"></script> <script src="jquery.browser.sp.js"></scrip... 続きを読む

レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal - かちびと.net

2014/03/07 96 users モーダルウインドウ jQuery RWD対応スクリプト設計

RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 Remodal デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="ht... 続きを読む

[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper | コリス

2013/10/30 99 users WallPaper コリス script src text

幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.j... 続きを読む

[JS]数字や文字をクルマの走行距離計のようにぐるぐる回転させて表示するスクリプト -Odometer | コリス

2013/10/24 93 users コリス stylesheet スクリプト train クルマ

テーマファイル「train」 Odometerの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。スタイルシートはさまざまなテーマが用意されています。 <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> 要素を指定する... 続きを読む

[JS]リアルさが想像以上！ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js | コリス

2013/09/25 222 users コリス canvas head text type

ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。ぼっーと見てると、音まで聞こえてきそうです。 Demo 2 雨はCanvasを使って再現しており、実装は下記のようになります。 <head> ... <script src="rainyday.js" type="text/javascri... 続きを読む

IE でアクセスしてきた場合ハローワークにリダイレクトする js のホスティングを開始しました - ltcmdr927atenablog

2013/09/12 227 users ホスティングハローワークスペシャルサンクス CDN ヘッダ

2013-09-12 IE でアクセスしてきた場合ハローワークにリダイレクトする js のホスティングを開始しました IE でアクセスしてきたらハローワークに飛ばしたいなあというサイトがありましたら以下をヘッダにコピペする感じでお使いください <script src="http://buttlabo.net/cdn/ie_hellowork.js"></script> スペシャルサンクス: @ca... 続きを読む

[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver | コリス

2013/08/28 81 users NAVER jQuery コリス script Step

水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel... 続きを読む

デザイナーさんの為のjQuery講座 Lv.1 | 株式会社LIG

2013/07/19 127 users 株式会社LIG LIG jQuery デザイナーさん備忘録

暑いですね。　鳥よしです。あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。サボってるわけではないのです。勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するためにまずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.goo... 続きを読む

いい加減、<script src="http://..　と書くのはやめましょう - DQNEO起業日記

2013/05/18 793 users DQNEO起業日記 http example.com パク

JSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読... 続きを読む

【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ

2013/05/13 57 users メディアクエリ CSS IE7 IE8 CSS3

2013/04/12 / Category css, html5 問題あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js... 続きを読む

[JS]実装は簡単！ページの使い方の説明などをかっこよくオーバーレイで表示するシンプルなスクリプト -Chardin.js | コリス

2013/04/04 82 users コリス stylesheet スクリプト実装 rel

デモページ：オーバーレイ非表示 Chardin.jsの使い方 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="chardinjs.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>... 続きを読む

ページを移動（離脱）するときにjQueryで警告を出す方法: 小粋空間

2013/03/10 335 users Facebook jQuery 小粋空間離脱警告

Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。１．ページを移動するときに警告を出すページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.goog... 続きを読む

[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js | コリス

2012/09/11 212 users コリス jQuery jquery.js height 実装

エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.go... 続きを読む

[JS]数行のコードで、動画をウェブページの背景いっぱいに配置するスクリプト -BigVideo.js | コリス

2012/08/20 220 users コリス jQuery ウェブページスクリプトデモ

デモページデモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。  <script src="//ajax.googleapis.com/a... 続きを読む

[JS]ノート風のレイアウトもOK！画像をベースラインに揃えて配置するだけのシンプルなスクリプト -Baseline.js | コリス

2012/06/24 82 users script コリス jquery.js Step スクリプト

Baseline.js適用後 Baseline.jsの使い方使い方は2ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.baseline.js"></script>... 続きを読む

(1 - 25 / 48件)

次の25件 »