タグ「外部ファイル」

タグ外部ファイル

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

(1 - 25 / 40件)

これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス

2018/10/22 205 users コリス cla Lazy Load img要素テクニック

最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。そんなLazy Loadを外部ファイルとimg要素にcla... 続きを読む

[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts | コリス

2018/08/01 672 users アニメーション単体レスポンシブ対応 div要素一つコリス

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。レスポンシブ対応で、アニメーションに... 続きを読む

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

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

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

Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke | コリス

2015/06/01 168 users jQuery Smoke コリス Bootstrap コード

Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。 Bootstrapの対応バージョンは、3.xです。 Smoke Smoke -GitHub Smokeの使い方 Smokeのデモ Smokeの使い方 Smokeの使い方は、簡単です。 Bootstarpでつくったページに、外部スクリプト・スタイルシ... 続きを読む

[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js | コリス

2015/05/26 129 users コリス Step スクリプト変形アニメーション単体

オフキャンバスメニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとし... 続きを読む

実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス

2015/05/19 143 users head スピナーコリス Step link rel

ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。スピナーの実装実装は、簡単です。「弾むボール」を例に、説明します。 Step 1: 外部ファイル各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む

[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js | コリス

2015/05/13 156 users コリス ESC boot Bootstrap スクリプト

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Boot... 続きを読む

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js | コリス

2015/03/16 140 users コリス jQuery head jquery.js Step

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type... 続きを読む

[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス

2014/11/14 121 users コリス Demo canvas Step Body

最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む

[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス

2014/11/10 110 users WebM コリス jquery.js Body Step

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。デモページ単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

[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... 続きを読む

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse | コリス

2014/08/06 125 users class フレームワークコリス div要素 HTML

p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 [html... 続きを読む

[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス

2014/07/02 124 users コリスビューポート jQuery class スクリプト

ページがロードされた時、ビューポートに要素が表示された時に、指定した要素をさまざまなCSS3アニメーションで表示するjQueryのプラグインを紹介します。外部ファイルをセットして、あとは要素にclassを加えるだけの簡単実装です！ CSS3 Animate It CSS3 Animate It -GitHub CSS3 Animate Itのデモ CSS3 Animate Itの使い方 CSS3... 続きを読む

たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス

2014/03/25 676 users コリス SVG 一行レスポンシブ対応 iframe

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します。外部ファイルとして使用するのでそれでも一行ですが、中身も一行（115文字）の超軽量スタイルシートです。 Fluidity Fluidity -GitHub Fluidityのデモ Fluidityの使い方 F... 続きを読む

WordPressで記事やページなどに個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox | コリス

2014/02/05 140 users コリスカテゴリページ CSS PHP HTML

以前、紹介したCustom CSS and JSは記事や固定ページごとにそれぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインで、これは手軽に利用できて便利ですが、今回紹介するのはそれより高機能。投稿記事、固定ページ、カテゴリページ、カスタム投稿記事に、個別のHTML, CSS, JavaScript, PHPのコードを追加でき、一元管理もできるプラグインを紹介... 続きを読む

[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css | コリス

2014/01/06 318 users コリス Sass ホバーエフェクト Step class

ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方使い方は非常に簡単です。 Step 1: 外部ファイル ... 続きを読む

[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat | コリス

2013/04/17 109 users TopCoat コリスレスポンシブ UIエレメント CSS

クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。 TopCoat TopCoat -GitHub TopCoatのセットアップ当スタイルシートを外部ファイルとして配置するだけです。 [html] [/html] TopCoatのスタイルシートは2種類あり、デスクトップ用（24KB）、スマフォ用（20KB）となっています。... 続きを読む

[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay | コリス

2013/04/14 168 users jQuery easing コリス jquery.js ソート

ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 DyLay! V2 DyLay -GitHub DyLayのデモ DyLayの使い方 DyLayのデモデモはフィルタとソートでレイアウトを変更します。デモページ DyLayの使い方 Step 1: 外部ファイル「jquery.js」と「easing.... 続きを読む

[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax | コリス

2012/10/16 326 users パララックス script src コリス jquery.js

Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方「Demo 3」を例に、実装方法を簡単に紹介します。外部ファイル「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text... 続きを読む

[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]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART | コリス

2012/07/10 215 users コリス jQuery jquery.js text Step

シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART EASY PIE CHARTの使い方実装は、3ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。外部ファイルはhead内に記述してください。 <script type="text... 続きを読む

[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

2012/06/17 148 users jquery.js コリス Opera Step Safari

IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモデモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 IE Alert jsの使い方使い方は簡単で、2ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外... 続きを読む

[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide | コリス

2012/06/07 100 users コリス stylesheet Libs スクリプト Ajax

Pageguideの使い方実装は4ステップです。 Step 1: 外部ファイルスクリプトとスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="stylesheets/pageguide.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.m... 続きを読む

[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry | コリス

2012/05/28 121 users jQuery コリス jquery.js スライダー実装

表示サイズに合わせて最適なサイズで表示する、幅が固定ではないレイアウト用の超シンプルなスライダーを実装するjQueryのプラグインを紹介します。「Blueberry」という名前は、開発時に使った画像がブルーベリーだったからだそうです。 Blueberryの使い方実装はいたってシンプルです。外部ファイル「jquery.js」と当スクリプト、あと当スタイルシートを外部ファイルとして記述します。... 続きを読む

(1 - 25 / 40件)

次の25件 »